// Teaser.jsx — "what's coming" beat, sher moment, final dark CTA, hairline footer.

/* ---------- What's coming — three quiet lines, no cards ---------- */
const COMING = [
  { hi: "रोज़ एक कविता", en: "one poem, chosen for every morning" },
  { hi: "कवियों का संग्रह", en: "from Ghalib and Mir to Gulzar and Dinkar" },
  { hi: "आपकी अपनी डायरी", en: "keep the lines you love, close" },
];

function Coming() {
  return (
    <section data-screen-label="What's coming" className="section" style={{ background: "var(--aohp-paper-section, #F5F5E0)" }}>
      <div className="container" style={{ textAlign: "center" }}>
        <Reveal>
          <div className="eyebrow" lang="hi">ऐप में क्या होगा</div>
        </Reveal>
        <div style={{ marginTop: 44, display: "flex", flexDirection: "column", gap: 36 }}>
          {COMING.map((c, i) => (
            <Reveal key={c.hi} delay={i * 110}>
              <div lang="hi" style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(26px, 3.6vw, 40px)", lineHeight: 1.4, color: "var(--aohp-ink)" }}>
                {c.hi}
              </div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "var(--fg3)", marginTop: 8 }}>
                {c.en}
              </div>
              {i < COMING.length - 1 && (
                <div style={{ marginTop: 36, display: "flex", justifyContent: "center" }}>
                  <Ornament width={36} />
                </div>
              )}
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- One sher — the emotional pause ---------- */
function SherMoment() {
  return (
    <section data-screen-label="Sher moment" className="section">
      <div className="container" style={{ display: "flex", justifyContent: "center" }}>
        <Reveal>
          <figure className="card sher-card" style={{
            maxWidth: 620, margin: 0, padding: "clamp(34px, 5vw, 56px)",
            transform: "rotate(-1.6deg)", textAlign: "center", position: "relative",
          }}>
            <img src="assets/quote-mark.svg" alt="" width="34" style={{ margin: "0 auto 20px", opacity: 0.7 }} />
            <blockquote lang="hi" style={{
              margin: 0, fontFamily: "var(--font-display)", fontWeight: 400,
              fontSize: "clamp(22px, 3vw, 30px)", lineHeight: 1.9, color: "var(--fg1)",
            }}>
              न था कुछ तो ख़ुदा था, कुछ न होता तो ख़ुदा होता<br />
              डुबोया मुझ को होने ने, न होता मैं तो क्या होता
            </blockquote>
            <figcaption style={{
              marginTop: 24, fontFamily: "var(--font-body)", fontSize: 12.5, fontWeight: 600,
              letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--accent-strong)",
            }}>— Mirza Ghalib</figcaption>
          </figure>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Follow the journey — social handles ---------- */
const SOCIALS = [
  { name: "Instagram", href: "https://instagram.com/artofhindipoets",
    icon: (c) => (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.7" strokeLinecap="round" aria-hidden="true">
        <rect x="3" y="3" width="18" height="18" rx="5"></rect>
        <circle cx="12" cy="12" r="4"></circle>
        <circle cx="17.2" cy="6.8" r="1" fill={c} stroke="none"></circle>
      </svg>
    ) },
  { name: "YouTube", href: "https://youtube.com/@artofhindipoets",
    icon: (c) => (
      <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.7" strokeLinejoin="round" aria-hidden="true">
        <rect x="2.5" y="5.5" width="19" height="13" rx="4"></rect>
        <path d="M10.2 9.4v5.2l4.6-2.6z" fill={c} stroke="none"></path>
      </svg>
    ) },
  { name: "Facebook", href: "https://facebook.com/artofhindipoets",
    icon: (c) => (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M14.5 8.5V7a1.5 1.5 0 0 1 1.5-1.5h1.5V2.8h-2.3c-2.3 0-3.7 1.6-3.7 3.9v1.8H9v3h2.5V21h3v-9.5H17l.5-3z"></path>
      </svg>
    ) },
  { name: "X", href: "https://x.com/artofhindipoets",
    icon: (c) => (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.9" strokeLinecap="round" aria-hidden="true">
        <path d="M4 4l16 16"></path>
        <path d="M20 4L4 20"></path>
      </svg>
    ) },
];

function SocialFollow() {
  return (
    <section data-screen-label="Follow us" className="section" style={{ paddingTop: 0 }}>
      <div className="container" style={{ textAlign: "center" }}>
        <Reveal>
          <div className="eyebrow" lang="hi">तब तक, यहीं मिलते रहिए</div>
          <p lang="hi" style={{ fontFamily: "var(--font-hi-body)", fontSize: 16, lineHeight: 1.8, color: "var(--fg3)", maxWidth: 460, margin: "16px auto 0" }}>
            ऐप बनने तक नज़्में रुकेंगी नहीं। हर रोज़, <strong style={{ fontWeight: 600, color: "var(--accent-strong)" }}>@artofhindipoets</strong> पर।
          </p>
        </Reveal>
        <Reveal style={{ marginTop: 32 }}>
          <div className="social-row" style={{ display: "flex", justifyContent: "center", flexWrap: "wrap", gap: 14 }}>
            {SOCIALS.map((s) => (
              <a key={s.name} href={s.href} target="_blank" rel="noreferrer" className="social-pill"
                 aria-label={`${s.name} — @artofhindipoets`}
                 style={{
                   display: "inline-flex", alignItems: "center", gap: 10, padding: "13px 24px",
                   background: "var(--bg-surface)", border: "1px solid var(--border)", borderRadius: 9999,
                   textDecoration: "none", boxShadow: "0 1px 2px rgba(0,0,0,0.05)",
                   transition: "transform .25s ease, box-shadow .25s ease, border-color .25s ease",
                 }}>
                <span className="social-pill-icon" style={{ display: "inline-flex", color: "var(--accent-strong)" }}>{s.icon("currentColor")}</span>
                <span style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 1 }}>
                  <span style={{ font: "600 13.5px/1.2 var(--font-body)", color: "var(--fg1)" }}>{s.name}</span>
                  <span style={{ font: "400 11.5px/1.2 var(--font-body)", color: "var(--aohp-ink-grey)" }}>@artofhindipoets</span>
                </span>
              </a>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Final CTA — the only dark band ---------- */
function FinalCTA({ followers, launchDate }) {
  return (
    <section id="join" data-screen-label="Final CTA" className="section" style={{
      background: "var(--aohp-ink)", color: "var(--fg-inverse)",
      backgroundImage: "radial-gradient(ellipse 70% 50% at 50% 0%, rgba(207,150,71,0.16), transparent 60%)",
      position: "relative", overflow: "hidden",
    }}>
      <span lang="hi" aria-hidden="true" style={{ position: "absolute", right: "4%", top: "14%", fontFamily: "var(--font-display)", fontSize: 130, color: "rgba(207,150,71,0.06)", userSelect: "none", pointerEvents: "none" }}>इंतज़ार</span>

      <div className="container" style={{ position: "relative", textAlign: "center" }}>
        <Reveal>
          <div className="eyebrow" lang="hi" style={{ color: "var(--accent)" }}>सबसे पहले आप</div>
          <h2 lang="hi" className="sec-title" style={{ color: "var(--fg-inverse)", lineHeight: 1.4 }}>
            बस, थोड़ा और इंतज़ार
          </h2>
          <p className="sec-sub" lang="hi" style={{ color: "rgba(255,255,234,0.72)", marginInline: "auto", fontFamily: "var(--font-hi-body)", lineHeight: 1.8 }}>
            इंस्टाग्राम, यूट्यूब और बाक़ी जगहों पर <strong style={{ color: "var(--accent)", fontWeight: 600 }}>{followers}</strong> लोग पहले से इस सफ़र में हैं। आप भी जुड़िए। वेटलिस्ट वालों को सबसे पहले मिलेगा।
          </p>
        </Reveal>

        <Reveal style={{ marginTop: 40 }}>
          <Countdown dateStr={launchDate} light />
        </Reveal>

        <Reveal style={{ marginTop: 44 }}>
          <WaitlistForm dark />
        </Reveal>

        <Reveal style={{ marginTop: 40 }}>
          <StoreBadges dark />
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Hairline footer ---------- */
function Footer() {
  const links = [
    { label: "Instagram", href: "https://instagram.com/artofhindipoets" },
    { label: "YouTube", href: "https://youtube.com/@artofhindipoets" },
    { label: "Facebook", href: "https://facebook.com/artofhindipoets" },
    { label: "X", href: "https://x.com/artofhindipoets" },
    { label: "contact@artofhindipoets.com", href: "mailto:contact@artofhindipoets.com" },
  ];
  return (
    <footer data-screen-label="Footer" style={{ background: "var(--aohp-ink)", borderTop: "1px solid rgba(207,150,71,0.25)" }}>
      <div className="container-wide footer-row" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 18,
        flexWrap: "wrap", padding: "26px 24px",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <img src="assets/logo-gold-transparent.png" alt="" width="30" height="30" />
          <span style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "rgba(255,250,240,0.5)" }}>
            © 2026 Art of Hindi Poets · Celebriting poetry.
          </span>
        </div>
        <nav style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
          {links.map((l) => (
            <a key={l.label} href={l.href} target={l.href.startsWith("http") ? "_blank" : undefined} rel="noreferrer"
               style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "rgba(255,250,240,0.65)", textDecoration: "none" }}>
              {l.label}
            </a>
          ))}
        </nav>
      </div>
    </footer>
  );
}

Object.assign(window, { Coming, SherMoment, SocialFollow, FinalCTA, Footer });
