/* Talent (coming soon) + Contact + Join pages — doc copy only */

function TalentPage({ navigate }) {
  const [notifyEmail, setNotifyEmail] = React.useState("");
  const [notifyDone, setNotifyDone] = React.useState(false);
  const [inquiry, setInquiry] = React.useState({ email:"", field:"", insta:"" });
  const [inquiryDone, setInquiryDone] = React.useState(false);

  return (
    <div className="page" data-screen-label="03 Talent">
      <section style={{padding:"140px var(--pad-x) 60px", minHeight:"90vh", display:"flex", flexDirection:"column", justifyContent:"center", position:"relative", overflow:"hidden"}}>
        {/* Background video mosaic */}
        <div aria-hidden style={{
          position:"absolute", inset: 0,
          display:"grid", gridTemplateColumns:"repeat(6, 1fr)", gridTemplateRows:"repeat(3, 1fr)", gap: 2,
          opacity: 0.24, pointerEvents:"none"
        }}>
          {(window.VIDEOS || []).slice(0, 9).map((v, i) => (
            <video key={i} src={v} autoPlay muted loop playsInline preload="metadata" style={{
              width:"100%", height:"100%", objectFit:"cover",
              gridColumn: i === 0 ? "span 2" : "span 2",
              gridRow: i === 0 ? "span 2" : "span 1"
            }}/>
          ))}
        </div>
        <div style={{position:"absolute", inset:0, background:"linear-gradient(180deg, var(--bg) 0%, transparent 20%, transparent 70%, var(--bg) 100%)", pointerEvents:"none"}}/>

        <div style={{position:"relative", zIndex: 2}}>
        <div className="eyebrow" style={{marginBottom: 24}}>— 212 Talent</div>
        <h1 style={{
          fontFamily:"var(--display)",
          fontSize:"clamp(80px, 18vw, 320px)",
          lineHeight: 0.85,
          letterSpacing:"-0.04em",
          fontWeight: 300
        }}>
          Coming<br/>
          <em style={{fontStyle:"italic", color:"var(--muted)"}}>Soon.</em>
        </h1>
        <p style={{
          marginTop: 48, maxWidth: 820,
          fontFamily:"var(--display)", fontStyle:"italic", fontSize:"clamp(22px, 2.4vw, 34px)", lineHeight: 1.25, letterSpacing:"-0.01em", fontWeight: 300
        }}>
          Representing the next generation of directors, photographers, and creatives.
        </p>
        </div>
      </section>

      <section className="section" style={{borderTop:"1px solid var(--line)", paddingTop: 80}}>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: 96}}>
          {/* Notify form */}
          <div>
            <div className="section-label">Notify</div>
            {notifyDone ? (
              <SuccessBlock text="Thank you."/>
            ) : (
              <form onSubmit={(e)=>{e.preventDefault(); if(notifyEmail) setNotifyDone(true);}}>
                <div className="field">
                  <label>Email</label>
                  <input type="email" required placeholder="you@email.com" value={notifyEmail} onChange={e=>setNotifyEmail(e.target.value)} data-cursor="text"/>
                </div>
                <div style={{marginTop: 40}}>
                  <button type="submit" className="link-action" data-cursor="hover" data-cursor-label="SUBMIT">
                    Submit <span className="glyph">↗</span>
                  </button>
                </div>
              </form>
            )}
          </div>

          {/* Inquiry form */}
          <div>
            <div className="section-label">Talent Inquiry</div>
            {inquiryDone ? (
              <SuccessBlock text="Received."/>
            ) : (
              <form onSubmit={(e)=>{e.preventDefault(); if(inquiry.email&&inquiry.field&&inquiry.insta) setInquiryDone(true);}}>
                <div className="field">
                  <label>Email</label>
                  <input type="email" required placeholder="you@email.com" value={inquiry.email} onChange={e=>setInquiry(v=>({...v, email:e.target.value}))} data-cursor="text"/>
                </div>
                <div className="field">
                  <label>Creative field</label>
                  <input type="text" required placeholder="Director, Photographer…" value={inquiry.field} onChange={e=>setInquiry(v=>({...v, field:e.target.value}))} data-cursor="text"/>
                </div>
                <div className="field">
                  <label>Instagram</label>
                  <input type="text" required placeholder="@yourinsta" value={inquiry.insta} onChange={e=>setInquiry(v=>({...v, insta:e.target.value}))} data-cursor="text"/>
                </div>
                <div style={{marginTop: 40, display:"flex", gap: 40, alignItems:"baseline", flexWrap:"wrap"}}>
                  <button type="submit" className="link-action" data-cursor="hover" data-cursor-label="SUBMIT">
                    Submit <span className="glyph">↗</span>
                  </button>
                  <button type="button" className="link-action small" onClick={()=>navigate("/join")} data-cursor="hover" style={{color:"var(--muted)"}}>
                    Apply to 212 Talent <span className="glyph">→</span>
                  </button>
                </div>
              </form>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

function SuccessBlock({ text }) {
  return (
    <div style={{
      padding: 32,
      background: "var(--accent)",
      color: "var(--accent-ink)"
    }}>
      <div className="mono" style={{marginBottom: 12}}>— Received</div>
      <div style={{fontFamily:"var(--display)", fontStyle:"italic", fontSize: 36, lineHeight: 1.15, letterSpacing:"-0.02em", fontWeight: 300}}>
        {text}
      </div>
    </div>
  );
}

/* ---------- Contact ---------- */
function ContactPage({ navigate }) {
  const [interest, setInterest] = React.useState([]);
  const [services, setServices] = React.useState([]);
  const [form, setForm] = React.useState({ name:"", email:"", company:"", message:"" });
  const [sent, setSent] = React.useState(false);

  const toggle = (arr, set, v) =>
    arr.includes(v) ? set(arr.filter(x=>x!==v)) : set([...arr, v]);

  const interestOpts = ["212 Social", "212 Talent", "Both"];
  const serviceOpts = ["Social Strategy", "Content Production", "Influencer Marketing", "Talent Booking", "Full Service"];

  return (
    <div className="page" data-screen-label="04 Contact">
      <section style={{padding:"140px var(--pad-x) 60px"}}>
        <div className="eyebrow" style={{marginBottom: 24}}>— Contact Us</div>
        <h1 style={{
          fontFamily:"var(--display)",
          fontSize:"clamp(60px, 11vw, 200px)",
          lineHeight: 0.88,
          letterSpacing:"-0.03em",
          maxWidth: 1400,
          fontWeight: 300
        }}>
          Contact <em style={{fontStyle:"italic"}}>Us.</em>
        </h1>
      </section>

      {sent ? (
        <section className="section" style={{paddingTop: 40}}>
          <SuccessBlock text="Sent. Thank you."/>
          <div style={{marginTop: 48}}>
            <button className="link-action" onClick={()=>navigate("/")} data-cursor="hover">
              Back to 212 <span className="glyph">→</span>
            </button>
          </div>
        </section>
      ) : (
      <form onSubmit={(e)=>{e.preventDefault(); setSent(true);}}>
        <section className="section" style={{paddingTop: 40}}>
          {/* Interest */}
          <div style={{marginBottom: 64}}>
            <div className="eyebrow" style={{marginBottom: 20}}>— I'm interested in;</div>
            <div style={{display:"flex", gap: 8, flexWrap:"wrap"}}>
              {interestOpts.map(o => (
                <div key={o} className={"pill " + (interest.includes(o) ? "active" : "")} onClick={()=>toggle(interest, setInterest, o)} data-cursor="hover">
                  {o}
                </div>
              ))}
            </div>
          </div>

          {/* Services */}
          <div style={{marginBottom: 64}}>
            <div className="eyebrow" style={{marginBottom: 20}}>— Services;</div>
            <div style={{display:"flex", gap: 8, flexWrap:"wrap"}}>
              {serviceOpts.map(o => (
                <div key={o} className={"pill " + (services.includes(o) ? "active" : "")} onClick={()=>toggle(services, setServices, o)} data-cursor="hover">
                  {o}
                </div>
              ))}
            </div>
          </div>

          {/* Text fields */}
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap: 24}}>
            <div className="field">
              <label>Name</label>
              <input required type="text" placeholder="Your name" value={form.name} onChange={e=>setForm(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={form.email} onChange={e=>setForm(f=>({...f, email:e.target.value}))} data-cursor="text"/>
            </div>
            <div className="field">
              <label>Company / Brand</label>
              <input type="text" placeholder="Optional" value={form.company} onChange={e=>setForm(f=>({...f, company:e.target.value}))} data-cursor="text"/>
            </div>
          </div>

          <div className="field" style={{marginTop: 32}}>
            <label>Tell us more;</label>
            <textarea rows="4" placeholder="Project, budget, timing." value={form.message} onChange={e=>setForm(f=>({...f, message:e.target.value}))} data-cursor="text" style={{resize:"vertical"}}/>
          </div>

          <div style={{marginTop: 72, display:"flex", justifyContent:"flex-end"}}>
            <button type="submit" className="link-action" data-cursor="hover" data-cursor-label="SUBMIT">
              Submit Inquiry <span className="glyph">↗</span>
            </button>
          </div>
        </section>
      </form>
      )}
    </div>
  );
}

/* ---------- Join the Roster ---------- */
function JoinPage({ navigate }) {
  const [form, setForm] = React.useState({
    name:"", email:"", instagram:"", tiktok:"",
    location:"", category:"", audienceSize:"", website:"", message:""
  });
  const [sent, setSent] = React.useState(false);

  return (
    <div className="page" data-screen-label="05 Join">
      <section style={{padding:"140px var(--pad-x) 60px"}}>
        <div className="eyebrow" style={{marginBottom: 24}}>— 212 Talent</div>
        <h1 style={{
          fontFamily:"var(--display)",
          fontSize:"clamp(60px, 12vw, 220px)",
          lineHeight: 0.88,
          letterSpacing:"-0.03em",
          fontWeight: 300
        }}>
          Apply to 212 <em style={{fontStyle:"italic"}}>Talent.</em>
        </h1>
      </section>

      {sent ? (
        <section className="section" style={{paddingTop: 40}}>
          <SuccessBlock text="Received."/>
        </section>
      ) : (
      <form onSubmit={(e)=>{e.preventDefault(); setSent(true);}}>
        <section className="section" style={{paddingTop: 40}}>
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: 24}}>
            {[
              ["Name", "name", "text", true, "Your name"],
              ["Email", "email", "email", true, "you@email.com"],
              ["Instagram", "instagram", "text", false, "@yourinsta"],
              ["TikTok", "tiktok", "text", false, "@yourtiktok"],
              ["Location", "location", "text", true, "City, Country"],
              ["Category", "category", "text", false, "Director, Photographer…"],
              ["Audience Size", "audienceSize", "text", false, "120K"],
              ["Website", "website", "url", false, "https://"]
            ].map(([lab, key, type, req, ph]) => (
              <div key={key} className="field">
                <label>{lab}</label>
                <input
                  type={type} required={req}
                  placeholder={ph}
                  value={form[key]}
                  onChange={e=>setForm(f=>({...f, [key]:e.target.value}))}
                  data-cursor="text"
                />
              </div>
            ))}
          </div>

          <div className="field" style={{marginTop: 32}}>
            <label>Tell us more;</label>
            <textarea required rows="4"
              placeholder="Your work, your audience, your goals."
              value={form.message}
              onChange={e=>setForm(f=>({...f, message:e.target.value}))}
              data-cursor="text"
              style={{resize:"vertical"}}
            />
          </div>

          <div style={{marginTop: 72, display:"flex", justifyContent:"flex-end"}}>
            <button type="submit" className="link-action" data-cursor="hover" data-cursor-label="SUBMIT">
              Submit Inquiry <span className="glyph">↗</span>
            </button>
          </div>
        </section>
      </form>
      )}
    </div>
  );
}

Object.assign(window, { TalentPage, ContactPage, JoinPage });