/* ============================================================
   components-extra.jsx — Logos/sectors strip, Newsletter, Podcast
   ============================================================ */

/* ---------------- LOGOS / SECTORS STRIP ----------------
   Most client work is under NDA, so this is an honest sector/surface
   wall rather than invented brand marks. Public-credited lanes named. */
const SECTORS = [
  "Fintech", "Civic & Tourism", "Camera & Production", "B2B Software",
  "Luxury & Lifestyle", "Consumer Ventures", "Naturopathy & Wellness",
  "Music & Talent", "Real Estate", "AI Ad Systems",
];

function Logos() {
  return (
    <section className="logos">
      <div className="wrap">
        <div className="eyebrow">01 · Where the receipts come from</div>
        <p className="logos-lede">Ten years across sectors most operators never touch — <em>from stage rooms to founder rooms.</em></p>
        <div className="logos-grid">
          {SECTORS.map((s, i) => (
            <div className="lg" key={i}><span>{s}</span></div>
          ))}
        </div>
        <p className="logos-note">■ Public numbers are pulled from the 2026 portfolio; client names stay private unless already cleared.</p>
      </div>
    </section>
  );
}

/* ---------------- shared email-capture hook ----------------
   Captures locally (persists to localStorage) until NEWSLETTER_ACTION
   is wired to a real Substack/Beehiiv endpoint. */
function useEmailCapture(storeKey) {
  const [email, setEmail] = React.useState("");
  const [done, setDone] = React.useState(false);
  const [err, setErr] = React.useState("");
  const submit = (e) => {
    e.preventDefault();
    const v = email.trim();
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(v)) { setErr("Drop a real email — that's how Hyperthoughts lands."); return; }
    setErr("");
    if (NEWSLETTER_ACTION) { window.open(NEWSLETTER_ACTION, "_blank", "noopener"); }
    try {
      const k = storeKey || "ths_newsletter";
      const list = JSON.parse(localStorage.getItem(k) || "[]");
      list.push({ email: v, at: new Date().toISOString() });
      localStorage.setItem(k, JSON.stringify(list));
    } catch (_) {}
    setDone(true);
  };
  return { email, setEmail, done, err, submit };
}

/* ---------------- NEWSLETTER ---------------- */
function Newsletter() {
  const { email, setEmail, done, err, submit } = useEmailCapture("ths_newsletter");
  return (
    <section className="news" id="newsletter">
      <div className="wrap news-inner">
        <div className="eyebrow">Newsletter · Hyperthoughts</div>
        {!done ? (
          <React.Fragment>
            <h2 className="news-loud"><em>Hyperthoughts</em></h2>
            <p className="news-sub">Short notes on culture, AI, craft, and the work — real thinking, not content. If it's worth writing, it's worth your inbox.</p>
            <form className="news-form" onSubmit={submit} noValidate>
              <input
                type="email" value={email} onChange={(e)=>setEmail(e.target.value)}
                placeholder="you@company.com" aria-label="Email address"
                aria-invalid={!!err}
              />
              <button className="btn btn-saffron" type="submit">Get Hyperthoughts <Arrow/></button>
            </form>
            <p className="news-note">{err ? err : "Roughly weekly. Your email goes nowhere — not to lists, not to tools, not to anyone."}</p>
          </React.Fragment>
        ) : (
          <div className="news-ok">
            <div className="h">You're on the list. <b>SARDAR RUNS THE ROOM.</b></div>
            <div className="p">First issue lands next cycle. Watch for <b style={{color:"var(--bone)"}}>hi@thathyperactivesardar.com</b> — drag it to your primary so it doesn't get killed by a filter.</div>
          </div>
        )}
      </div>
    </section>
  );
}

/* ---------------- PODCAST (in production) ---------------- */
function Podcast() {
  const { email, setEmail, done, err, submit } = useEmailCapture("ths_podcast");
  return (
    <section className="podcast" id="podcast">
      <div className="wrap">
        <div className="eyebrow">In production · 2026</div>
        <div className="podcast-grid">
          <div className="podcast-tile">
            <img className="ths-watermark" src="assets/monogram-ths-bone.svg" alt="" aria-hidden="true" />
            <div className="ptop">
              <span className="ep">Ep. 01 · coming soon</span>
              <span className="live">In studio</span>
            </div>
            <div className="pname">FLUENT<br/><em>INTERNET</em></div>
          </div>
          <div>
            <h2>A show about culture, comedy, and what actually converts.</h2>
            <p>Operators, kalakars, and founders on the record. How a reel becomes revenue, why taste outlasts the algorithm, and the hisaab nobody publishes. Recorded in Dubai, exported to the GCC.</p>
            <ul className="plist">
              <li>Long-form conversations, no clickbait edits</li>
              <li>The build behind the receipts — fintech to film sets</li>
              <li>On every platform, in Hyperthoughts, first</li>
            </ul>
            {!done ? (
              <form className="news-form" style={{margin:0, maxWidth:"520px"}} onSubmit={submit} noValidate>
                <input
                  type="email" value={email} onChange={(e)=>setEmail(e.target.value)}
                  placeholder="Email me when Ep. 01 drops"
                  aria-label="Email for podcast launch" aria-invalid={!!err}
                  style={{background:"var(--bone)", borderColor:"var(--oxblood-15)", color:"var(--ink)"}}
                />
                <button className="btn btn-oxblood" type="submit">Notify me <Arrow/></button>
              </form>
            ) : (
              <p style={{fontFamily:"var(--serif)", fontStyle:"italic", fontSize:"20px", color:"var(--oxblood)", margin:"8px 0 0"}}>
                Locked in. You'll hear it first.
              </p>
            )}
            {err && !done && <p style={{fontSize:"12px", color:"var(--oxblood)", margin:"10px 0 0"}}>{err}</p>}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Logos, Newsletter, Podcast, useEmailCapture, SECTORS });