/* ============================================================
   TRYONME Landing — Social proof, FAQ, BigCTA, Footer
   ============================================================ */

function Social() {
  const reviews = [
    { handle: "@maya.bee", body: "i no longer order 3 sizes \"to compare\". insane time-save.", stars: 5, color: "var(--pink)" },
    { handle: "@kerimk", body: "Triple-tap on a vintage flickr photo from 2009 just to see — 10/10.", stars: 5, color: "var(--yellow)" },
    { handle: "@nora.x", body: "Returned 0 things this month. Genuinely thought I'd hate the AI but it nailed the drape.", stars: 5, color: "var(--blue)" },
    { handle: "@dee.mp4", body: "the chrome thing for depop is unfair. my wardrobe is doomed.", stars: 5, color: "var(--pink)" },
    { handle: "@sasha.97", body: "ngl, I just keep trying on outfits I'll never buy. it's content now.", stars: 5, color: "var(--yellow)" },
    { handle: "@theowears", body: "no studio, no lighting, no friend with a camera. just me & a screenshot.", stars: 5, color: "var(--blue)" },
  ];
  return (
    <section className="section social">
      <div className="container">
        <div className="section__head reveal">
          <span className="num">§</span>
          <Eyebrow>WORD ON THE FEED</Eyebrow>
          <hr style={{ flex: 1, border: "none", height: 2, background: "var(--blue)" }}/>
          <Eyebrow color="var(--blue)">↓ 14K REVIEWS</Eyebrow>
        </div>
        <h2 className="display reveal" style={{ fontSize: "clamp(42px, 6.5vw, 92px)", maxWidth: 1000, marginBottom: 40 }}>
          <Misreg text="THEY TRIED IT." color="pink" />
          <br />
          THEY <em style={{ fontStyle: "normal", textDecoration: "underline wavy var(--yellow)" }}>WORE IT.</em>
        </h2>
        <div className="reviews">
          {reviews.map((r, i) => (
            <div key={i} className="review reveal" style={{ transitionDelay: `${(i % 3) * 100}ms` }}>
              <div className="review__avatar" style={{ background: r.color }} />
              <div className="review__handle">{r.handle}</div>
              <div className="review__stars">{"★".repeat(r.stars)}</div>
              <div className="review__body">"{r.body}"</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: "Is the AI any good?", a: "It's good at common shapes — tees, hoodies, dresses, jackets, denim. Heavy patterns, sequins and complex layering still throw it. We tell you which model is running and you can flag bad results." },
    { q: "Where do my photos go?", a: "On your phone. Try-ons run on-device for the screenshot crop, and the actual fit-on-you generation is a one-shot send to the AI — no training, no archive." },
    { q: "How much does it cost?", a: "5 free credits on sign-up. After that, credit packs from $1.99. The Chrome extension is free — it just hands fits over to the iOS app." },
    { q: "Do I need to be on iOS?", a: "Right now, yes. The full try-on lives in the iOS app. The Chrome extension lets desktop folks send fits to their phone." },
    { q: "Can I use a friend's photo?", a: "Please get their consent first. We don't moderate face uploads, but the App Store does — and revenge fits is gross." },
    { q: "Will my screenshot end up on TikTok?", a: "Only if you put it there. We never share or post anything; the share sheet is the only way out." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section__head reveal">
          <span className="num">§</span>
          <Eyebrow>STILL ASKING</Eyebrow>
          <hr style={{ flex: 1, border: "none", height: 2, background: "var(--blue)" }}/>
          <Eyebrow color="var(--blue)">FAQ</Eyebrow>
        </div>
        <h2 className="display reveal" style={{ fontSize: "clamp(42px, 6.5vw, 88px)", maxWidth: 900, marginBottom: 40 }}>
          THINGS PEOPLE
          <br/>
          <span className="hand" style={{ color: "var(--pink)", fontSize: "0.9em" }}>actually ask.</span>
        </h2>
        <div className="faq">
          {items.map((it, i) => (
            <div key={i} className={`faq__item reveal ${open === i ? "is-open" : ""}`} style={{ transitionDelay: `${i * 60}ms` }}>
              <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="faq__num display">{String(i + 1).padStart(2, "0")}</span>
                <span className="faq__text display">{it.q}</span>
                <span className="faq__plus">{open === i ? "—" : "+"}</span>
              </button>
              <div className="faq__a">
                <p>{it.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BigCTA() {
  return (
    <section className="section bigcta" id="download">
      <div className="container bigcta__inner">
        <div className="bigcta__bg" aria-hidden="true">
          <Stamp text="TRYONME" size="clamp(120px, 22vw, 320px)" rotate={-2} />
        </div>
        <div className="bigcta__content reveal">
          <Eyebrow color="var(--blue)">SCREENSHOT, TRIPLE-TAP, DONE</Eyebrow>
          <h2 className="display" style={{ fontSize: "clamp(48px, 8vw, 124px)", margin: "12px 0 24px" }}>
            STOP GUESSING.
            <br/>
            <span style={{ color: "var(--pink)" }}>START WEARING.</span>
          </h2>
          <p style={{ fontSize: 19, maxWidth: 600, marginInline: "auto" }}>
            Free download. 5 fits on the house. The next return-free month is one tap away.
          </p>
          <div className="bigcta__btns">
            <a className="btn" href="#">
              <svg className="icon" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 1c.7 1.6.5 3.2-.5 4.4-1 1.2-2.6 1.9-4 1.7-.2-1.5.5-3 1.4-4.1A5.6 5.6 0 0 1 16.5 1zm4 17.6c-.5 1.2-1.1 2.3-1.9 3.4-1 1.5-2.5 3.4-4.4 3.4-1.6 0-2-.9-4.1-.9-2 0-2.6.9-4 .9-1.9 0-3.4-1.7-4.4-3.2-2.7-4-3-8.7-1.3-11.2 1.2-1.7 3-2.7 4.9-2.7 1.7 0 2.7.8 4 .8 1.3 0 2.1-.9 4.1-.9 1.6 0 3.2.8 4.4 2.2-3.8 2-3.2 7.4 1.7 8.2z"/></svg>
              DOWNLOAD FOR iOS
            </a>
            <a className="btn btn--blue" href="#extension">
              <svg className="icon" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeWidth="2"/><circle cx="12" cy="12" r="4" fill="currentColor"/></svg>
              ADD CHROME EXT
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container footer__grid">
        <div>
          <div className="display" style={{ fontSize: 44 }}>
            <Misreg text="TRYONME" />
          </div>
          <p style={{ marginTop: 14, maxWidth: 320 }}>Virtual try-on for the screenshot generation. Made with too much risograph and not enough sleep.</p>
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>PRODUCT</div>
          <ul><li>iOS App</li><li>Chrome Extension</li><li>Credits</li><li>Roadmap</li></ul>
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>COMPANY</div>
          <ul><li>About</li><li>Press</li><li>Contact</li><li>Careers</li></ul>
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>LEGAL</div>
          <ul><li>Privacy</li><li>Terms</li><li>App Store</li><li>Cookies</li></ul>
        </div>
      </div>
      <div className="container footer__bottom">
        <span>© 2026 TRYONME LABS · ISTANBUL / NYC</span>
        <span>v 1.5 · DEMO MODE — REAL AI COMING SOON</span>
      </div>
    </footer>
  );
}

window.Social = Social;
window.FAQ = FAQ;
window.BigCTA = BigCTA;
window.Footer = Footer;