/* Home page */
function HomePage({ navigate, tweaks }) {
  const HeroByVariant = {
    reel: HeroReel,
    editorial: HeroEditorial,
    assembly: HeroAssembly,
    manifesto: HeroManifesto,
    nyc: HeroNYC
  };
  const Hero = HeroByVariant[tweaks.heroVariant] || HeroAssembly;
  const [talentForm, setTalentForm] = React.useState(null);

  React.useEffect(() => {
    if (!talentForm) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const onKey = (e) => {
      if (e.key === "Escape") setTalentForm(null);
    };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener("keydown", onKey);
    };
  }, [talentForm]);

  return (
    <>
      <div className="page" id="home" data-screen-label="01 Home">
        <Hero navigate={navigate} />
        <CapabilitiesSection navigate={navigate} />
        <TalentTeaser navigate={navigate} openForm={setTalentForm} />
        <ContactSection navigate={navigate} />
      </div>
      {talentForm && <TalentFormDrawer mode={talentForm} onClose={() => setTalentForm(null)} />}
    </>
  );
}

function CapabilitiesSection({ navigate }) {
  const services = [
    {
      n: "01",
      title: "Social Strategy & Management",
      paragraphs: [
        <>We offer both one-time strategy and audit services as well as ongoing social management. That means identifying your target audience, understanding what content actually resonates, developing that content, and determining when and where to post it.</>,
        <>Clients get access to our <strong>proprietary tech portal</strong> to view analytics across all platforms in real time, monitor your content calendar, leave feedback, and communicate directly with our team.</>
      ]
    },
    {
      n: "02",
      title: "Content Production",
      paragraphs: [
        <>Whether your brand needs raw, iPhone-style UGC or a fully produced cinematic short film, we handle both and everything in between. We help you decide what's right for your audience and your current goals.</>,
        <>Our roster includes some of the <strong>most talented young directors and photographers</strong> in the industry, ready to bring your vision to life or help you build one from scratch.</>
      ]
    },
    {
      n: "03",
      title: "Influencer Marketing",
      paragraphs: [
        <>Our team handles everything end to end. Sourcing, vetting, strategy, negotiating, creative briefing, relationship management, reporting, and ongoing optimization.</>,
        <>Already have a program in place? We can step in, audit what's working, and <strong>cut unnecessary spend</strong>. We make sure you're actually paying for real engagement value.</>
      ]
    }
  ];
  const [active, setActive] = React.useState(0);
  const current = services[active];

  return (
    <section id="social" className="section services-editorial" data-screen-label="02 Social" style={{scrollMarginTop: 120}}>
      <div className="services-editorial-grid">
        <div className="services-editorial-preview">
          <div className="section-label services-preview-label">Our Services</div>
          <div className="services-preview-copy" key={current.n}>
            <div className="services-preview-head">
              <div className="services-preview-index">{current.n}</div>
              <div className="services-preview-title">{current.title}</div>
            </div>
            <div className="services-preview-body">
              {current.paragraphs.map((paragraph, index) => (
                <p key={index}>{paragraph}</p>
              ))}
            </div>
          </div>
        </div>

        <div className="services-editorial-list">
          <div className="services-editorial-intro">
            <TypewriterOnView text="Full-service creative agency." speed={42} startDelay={180} />
          </div>
          {services.map((service, index) => (
            <button
              key={service.n}
              className={`services-lane ${index === active ? "is-active" : ""}`}
              onMouseEnter={() => setActive(index)}
              onFocus={() => setActive(index)}
              onClick={() => setActive(index)}
              data-cursor="hover"
              data-cursor-label={service.title}
            >
              <div className="services-lane-index">{service.n}</div>
              <div className="services-lane-main">
                <h3>{service.title}</h3>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function TalentTeaser({ navigate, openForm }) {
  return (
    <section id="talent" className="section" style={{background:"var(--ink)", color:"var(--paper)", position:"relative", overflow:"hidden", scrollMarginTop: 120}}>
      {/* grid paper on dark */}
      <div aria-hidden style={{
        position:"absolute", inset: 0,
        backgroundImage: "linear-gradient(to right, rgba(239,235,227,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(239,235,227,0.04) 1px, transparent 1px)",
        backgroundSize: "56px 56px",
        pointerEvents:"none"
      }}/>

      <div style={{position:"relative", zIndex: 1}}>
        <div className="section-label" style={{color:"rgba(239,235,227,0.6)"}}>
          <span style={{background:"currentColor", width: 28, height: 1}}></span>
          212 Talent
        </div>
        <div className="talent-editorial-grid">
          <div>
            <div style={{
              fontFamily:"var(--display)",
              fontSize:"clamp(48px, 7.5vw, 120px)",
              lineHeight: 0.95,
              letterSpacing:"-0.03em",
              fontWeight: 400
            }}>
              Representing the <em style={{fontStyle:"italic", color:"var(--paper)"}}>next generation</em> of directors, photographers, and creatives.
            </div>
            <p style={{
              marginTop: 28,
              maxWidth: 520,
              color: "rgba(239,235,227,0.68)",
              fontSize: "clamp(18px, 1.8vw, 24px)",
              lineHeight: 1.55
            }}>
              A curated roster of directors, photographers, and creatives shaping the image as much as the campaign.
            </p>
            <div style={{display:"flex", flexWrap:"wrap", gap: 28, alignItems:"baseline", marginTop: 40}}>
              <button className="link-action" onClick={()=>openForm("work")} data-cursor="hover" data-cursor-label="TALENT" style={{color:"var(--paper)"}}>
                Work With Our Talent
              </button>
              <button className="link-action small" onClick={()=>openForm("apply")} data-cursor="hover" data-cursor-label="APPLY" style={{color:"rgba(239,235,227,0.78)"}}>
                Apply For Representation
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TalentFormDrawer({ mode, onClose }) {
  const [workForm, setWorkForm] = React.useState({ name:"", email:"", company:"", message:"" });
  const [applyForm, setApplyForm] = React.useState({ email:"", field:"", instagram:"", notes:"" });
  const [sent, setSent] = React.useState(false);

  React.useEffect(() => {
    setSent(false);
  }, [mode]);

  const isWork = mode === "work";
  const submitMailto = ({ subject, lines }) => {
    const body = lines.filter(Boolean).join("\n");
    const href = `mailto:info@212-social.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    window.location.href = href;
    setSent(true);
  };

  return (
    <div className="form-drawer-root" role="dialog" aria-modal="true" aria-label={isWork ? "Work With Our Talent" : "Apply For Representation"}>
      <button className="form-drawer-backdrop" onClick={onClose} aria-label="Close form" />
      <aside className="form-drawer-panel">
        <div className="form-drawer-header">
          <div>
            <div className="section-label" style={{marginBottom: 18}}>
              {isWork ? "212 Talent" : "212 Talent"}
            </div>
            <h2 className="form-drawer-title">
              {isWork ? "Work With Our Talent" : "Apply For Representation"}
            </h2>
            <p className="form-drawer-intro">
              {isWork
                ? "Tell us what you are looking for and we will route your inquiry to the right creative."
                : "Think you belong on our roster? Tell us a bit about yourself."}
            </p>
          </div>
          <button className="form-drawer-close" onClick={onClose} data-cursor="hover" data-cursor-label="CLOSE">
            Close
          </button>
        </div>

        {sent ? (
          <div className="form-success">
            <div className="mono" style={{marginBottom: 14}}>Received</div>
            <div className="form-success-title">
              {isWork ? "Sent. Thank you." : "Received. We'll review and get back to you."}
            </div>
          </div>
        ) : isWork ? (
          <form onSubmit={(e)=>{
            e.preventDefault();
            if (!workForm.name || !workForm.email) return;
            submitMailto({
              subject: "Work With Our Talent",
              lines: [
                "Work With Our Talent",
                "",
                `Name: ${workForm.name}`,
                `Email: ${workForm.email}`,
                `Company / Brand: ${workForm.company || "N/A"}`,
                "",
                "Tell us more:",
                workForm.message || "N/A"
              ]
            });
          }} className="form-drawer-form">
            <div className="form-grid">
              <div className="field">
                <label>Name</label>
                <input
                  required
                  type="text"
                  placeholder="Your name"
                  value={workForm.name}
                  onChange={e=>setWorkForm(f=>({...f, name:e.target.value}))}
                  data-cursor="text"
                />
              </div>
              <div className="field">
                <label>Email</label>
                <input
                  required
                  type="email"
                  placeholder="you@email.com"
                  value={workForm.email}
                  onChange={e=>setWorkForm(f=>({...f, email:e.target.value}))}
                  data-cursor="text"
                />
              </div>
            </div>
            <div className="field">
              <label>Company / Brand</label>
              <input
                type="text"
                placeholder="Optional"
                value={workForm.company}
                onChange={e=>setWorkForm(f=>({...f, company:e.target.value}))}
                data-cursor="text"
              />
            </div>
            <div className="field">
              <label>Tell us more;</label>
              <textarea
                rows="4"
                placeholder="Project, brief, or talent needs."
                value={workForm.message}
                onChange={e=>setWorkForm(f=>({...f, message:e.target.value}))}
                data-cursor="text"
                style={{resize:"vertical"}}
              />
            </div>
            <div className="form-drawer-actions">
              <button type="submit" className="form-submit" data-cursor="hover" data-cursor-label="SUBMIT">
                Send Inquiry
              </button>
            </div>
          </form>
        ) : (
          <form onSubmit={(e)=>{
            e.preventDefault();
            if (!applyForm.email || !applyForm.field || !applyForm.instagram) return;
            submitMailto({
              subject: "Apply For Representation",
              lines: [
                "Apply For Representation",
                "",
                `Email: ${applyForm.email}`,
                `Creative field: ${applyForm.field}`,
                `Instagram: ${applyForm.instagram}`,
                "",
                "Anything else you think we should know:",
                applyForm.notes || "N/A"
              ]
            });
          }} className="form-drawer-form">
            <div className="field">
              <label>Email</label>
              <input
                required
                type="email"
                placeholder="your@email.com"
                value={applyForm.email}
                onChange={e=>setApplyForm(f=>({...f, email:e.target.value}))}
                data-cursor="text"
              />
            </div>
            <div className="field">
              <label>Creative field</label>
              <input
                required
                type="text"
                placeholder="Creative field (e.g. Director, Photographer)"
                value={applyForm.field}
                onChange={e=>setApplyForm(f=>({...f, field:e.target.value}))}
                data-cursor="text"
              />
            </div>
            <div className="field">
              <label>Instagram</label>
              <input
                required
                type="text"
                placeholder="@yourinsta"
                value={applyForm.instagram}
                onChange={e=>setApplyForm(f=>({...f, instagram:e.target.value}))}
                data-cursor="text"
              />
            </div>
            <div className="field">
              <label>Anything else you think we should know; <span style={{textTransform:"none", letterSpacing:"0.02em"}}>(Optional)</span></label>
              <textarea
                rows="3"
                placeholder="Anything else you think we should know."
                value={applyForm.notes}
                onChange={e=>setApplyForm(f=>({...f, notes:e.target.value}))}
                data-cursor="text"
                style={{resize:"vertical"}}
              />
            </div>
            <div className="form-drawer-actions">
              <button type="submit" className="form-submit" data-cursor="hover" data-cursor-label="SUBMIT">
                Submit
              </button>
            </div>
          </form>
        )}
      </aside>
    </div>
  );
}

function ContactSection({ navigate }) {
  return (
    <section className="section contact-strip" id="contact" style={{scrollMarginTop: 120}}>
      <div className="contact-strip-grid">
        <div className="contact-strip-item">
          <div className="eyebrow contact-strip-eyebrow">Email</div>
          <a
            href="mailto:info@212-social.com"
            className="contact-strip-link"
            data-cursor="hover"
            data-cursor-label="WRITE"
          >
            info@212-social.com
          </a>
        </div>
        <div className="contact-strip-item">
          <div className="eyebrow contact-strip-eyebrow">Instagram</div>
          <a
            href="https://instagram.com/212__social"
            target="_blank"
            rel="noreferrer"
            className="contact-strip-link"
            data-cursor="hover"
            data-cursor-label="FOLLOW"
          >
            @212__social
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomePage });