// About + Services + Process + CTA + Contact + Footer

const About = ({ about, trusted }) => {
  const [lang, setLang] = React.useState("en");
  const body = lang === "es" ? (about.bodyEs || about.body) : (about.bodyEn || about.body);

  return (
    <section id="about" className="mr-about-section" data-screen-label="about" data-comment-anchor="about">
      <div className="mr-section">
        <div className="mr-section-eyebrow-row">
          <span className="meta">About · Mateo Romero</span>
          <span className="meta">Studio of one</span>
        </div>
        <div className="mr-about-grid-2">
          <div
            className="mr-about-portrait-2"
            style={about.image ? { backgroundImage: `url(${about.image})`, backgroundSize: "cover", backgroundPosition: "center top" } : undefined}
          >
            <span className="caption">Bogotá · 2026</span>
          </div>
          <div>
            <div className="mr-about-lang-row">
              <button
                className={"mr-lang-btn" + (lang === "en" ? " active" : "")}
                onClick={() => setLang("en")}
                type="button"
              >EN</button>
              <button
                className={"mr-lang-btn" + (lang === "es" ? " active" : "")}
                onClick={() => setLang("es")}
                type="button"
              >ES</button>
            </div>
            {body.split("\n\n").map((para, i) => (
              <p key={i} className="mr-about-text">{para}</p>
            ))}
            <dl className="mr-about-facts">
              {about.facts.map((f) => (
                <div key={f.label}>
                  <dt>{f.label}</dt>
                  <dd>{f.value}</dd>
                </div>
              ))}
            </dl>
            <div className="mr-clients">
              <span className="eyebrow">Trusted by</span>
              <div className="mr-clients-list">
                {trusted.map((c, i) => (
                  <React.Fragment key={c}>
                    <span className="name">{c}</span>
                    {i < trusted.length - 1 && <span className="sep">·</span>}
                  </React.Fragment>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Services = ({ services }) => (
  <section id="services" className="mr-section" data-screen-label="services" data-comment-anchor="services">
    <div className="mr-section-eyebrow-row">
      <span className="meta">Services · Six lanes</span>
    </div>
    <h2 className="mr-section-headline">{services.title}</h2>
    <p className="mr-section-lead">{services.description}</p>
    <div className="mr-services-grid" style={{ marginTop: 56 }}>
      {services.items.map((s) => (
        <div key={s.num} className="mr-service">
          <span className="mr-service-num">{s.num}</span>
          <h3 className="mr-service-name">{s.name}</h3>
          <p className="mr-service-desc">{s.description}</p>
        </div>
      ))}
    </div>
  </section>
);

const Process = ({ process }) => (
  <section className="mr-process" data-screen-label="process" data-comment-anchor="process">
    <div className="mr-process-inner">
      <div className="mr-section-eyebrow-row">
        <span className="meta">Process · Four stages</span>
      </div>
      <h2 className="mr-section-headline">{process.title}</h2>
      <p className="mr-section-lead">{process.description}</p>
      <div className="mr-process-steps">
        {process.steps.map((s) => (
          <div key={s.step} className="mr-process-step">
            <span className="step">{s.step}</span>
            <span className="name">{s.name}</span>
            <span className="desc">{s.description}</span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const CTABanner = ({ cta, onNavigate }) => (
  <section className="mr-cta-banner" data-comment-anchor="cta">
    <div className="mr-section-eyebrow-row">
      <span className="meta">— Let's talk</span>
    </div>
    <h2 className="mr-cta-title">{cta.title}</h2>
    <p className="mr-cta-sub">{cta.subtitle}</p>
    <PillButton onClick={() => onNavigate("contact")}>{cta.button}</PillButton>
  </section>
);

const ContactForm = ({ footer }) => {
  const [state, setState] = React.useState({
    name: "", email: "", project: "Brand Content", budget: "", message: "",
  });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);

  const update = (k) => (e) => setState((s) => ({ ...s, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!state.name.trim()) errs.name = "Required";
    if (!state.email.trim()) errs.email = "Required";
    else if (!/^\S+@\S+\.\S+$/.test(state.email)) errs.email = "Invalid email";
    if (!state.message.trim()) errs.message = "Tell me a little";
    setErrors(errs);
    if (Object.keys(errs).length === 0) setSent(true);
  };

  return (
    <section id="contact" className="mr-contact-section" data-screen-label="contact" data-comment-anchor="contact">
      <div className="mr-section">
        <div className="mr-section-eyebrow-row">
          <span className="meta">Contact · Start a project</span>
          <span className="meta">Replies within 48h</span>
        </div>
        <h2 className="mr-section-headline">Let's build something with direction.</h2>

        <div className="mr-contact-grid" style={{ marginTop: 56 }}>
          <div className="mr-contact-info">
            <div className="item">
              <span className="eyebrow">Email</span>
              <a href={`mailto:${footer.email}`}>{footer.email}</a>
            </div>
            <div className="item">
              <span className="eyebrow">Instagram</span>
              <a href={footer.igUrl} target="_blank" rel="noreferrer">{footer.instagram}</a>
            </div>
            <div className="item">
              <span className="eyebrow">Based in</span>
              <p>Bogotá, Colombia<br/>Available worldwide</p>
            </div>
          </div>

          {sent ? (
            <div className="mr-form-success">
              <span className="title">Message received.</span>
              <span className="mr-form-note" style={{ color: "var(--ink-3)", maxWidth: "none" }}>
                Thanks {state.name.split(" ")[0]}. I'll reply to {state.email} within 48 hours.
              </span>
            </div>
          ) : (
            <form className="mr-form-2" onSubmit={submit} noValidate>
              <div className="row">
                <div className="mr-field-2">
                  <label>Name</label>
                  <input type="text" value={state.name} onChange={update("name")} placeholder="Your name" />
                  {errors.name && <span className="err">{errors.name}</span>}
                </div>
                <div className="mr-field-2">
                  <label>Email</label>
                  <input type="email" value={state.email} onChange={update("email")} placeholder="you@studio.com" />
                  {errors.email && <span className="err">{errors.email}</span>}
                </div>
              </div>
              <div className="row">
                <div className="mr-field-2">
                  <label>Project type</label>
                  <select value={state.project} onChange={update("project")}>
                    <option>Brand Content</option>
                    <option>Photography</option>
                    <option>Editing & Film</option>
                    <option>Creative Direction</option>
                    <option>Consulting</option>
                    <option>Other</option>
                  </select>
                </div>
                <div className="mr-field-2">
                  <label>Budget (USD)</label>
                  <select value={state.budget} onChange={update("budget")}>
                    <option value="">— Select —</option>
                    <option>Under 5k</option>
                    <option>5k — 15k</option>
                    <option>15k — 50k</option>
                    <option>50k+</option>
                  </select>
                </div>
              </div>
              <div className="mr-field-2">
                <label>Brief</label>
                <textarea rows={5} value={state.message} onChange={update("message")} placeholder="Goals, references, timeline — anything helps." />
                {errors.message && <span className="err">{errors.message}</span>}
              </div>
              <div className="mr-form-submit">
                <span className="mr-form-note">By sending, you agree to be contacted at the email above.</span>
                <PillButton onClick={submit}>Send brief</PillButton>
              </div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
};

const Footer = ({ footer, onNavigate }) => (
  <footer className="mr-footer-2" data-comment-anchor="footer">
    <div className="mr-footer-2-inner">
      <div className="mr-footer-mark-2">mateo romero studio<sup>®</sup></div>
      <div className="mr-footer-cols-2">
        <div>
          <span className="eyebrow">Studio</span>
          <p className="colophon">
            Independent creative direction & audiovisual production. Building visual systems where strategy and aesthetics work together.
          </p>
        </div>
        <div>
          <span className="eyebrow">Navigate</span>
          <a href="#work" onClick={(e) => { e.preventDefault(); onNavigate("work"); }}>Work</a>
          <a href="#about" onClick={(e) => { e.preventDefault(); onNavigate("about"); }}>About</a>
          <a href="#services" onClick={(e) => { e.preventDefault(); onNavigate("services"); }}>Services</a>
          <a href="#contact" onClick={(e) => { e.preventDefault(); onNavigate("contact"); }}>Contact</a>
        </div>
        <div>
          <span className="eyebrow">Contact</span>
          <a href={`mailto:${footer.email}`}>{footer.email}</a>
          <a href={footer.igUrl} target="_blank" rel="noreferrer">{footer.instagram}</a>
        </div>
        <div>
          <p style={{ color: "rgba(255,255,255,0.55)" }}>Replies within 48h</p>
        </div>
      </div>
      <div className="mr-footer-bar-2">
        <span>© 2026 Mateo Romero Studio</span>
        <span>Bogotá · Worldwide</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { About, Services, Process, CTABanner, ContactForm, Footer });