// landing.jsx — MomentKeep landing page

function Hero() {
  return (
    <section className="hero">
      <HeroPetals />
      <div className="wrap hero-grid">
        <div className="reveal in">
          <span className="hero-badge"><span className="dot" /><b>No app required</b> · guests just scan &amp; snap</span>
          <h1>Everybody's photos.<br />One <span className="scr">gorgeous</span> <em>album.</em></h1>
          <p className="hero-sub">MomentKeep turns your guests into your photographers. Pop up a QR and every candid, happy-blurry, once-in-a-lifetime shot lands in one beautiful shared album — sorted for you, automatically.</p>
          <div className="hero-cta" id="start">
            <a className="btn primary lg" href={APP}><Icon name="qr" size={19} stroke={1.8} />Get your QR free</a>
            <a className="btn ghost lg" href="#how">See how it works</a>
          </div>
          <div className="hero-trust">
            <div className="trust-faces">
              {[201, 214, 233, 240, 255].map((s) => (
                <span key={s} className="tf" style={washFor(s)}><span className="pm-grain" /></span>
              ))}
            </div>
            <div className="trust-text">
              <span className="trust-stars">★★★★★</span><br />
              <b>12,000+ events</b> captured every angle
            </div>
          </div>
        </div>
        <div className="hero-phones reveal in">
          <div className="hp-left"><PhoneMock screen="moments" /></div>
          <div className="hp-right"><PhoneMock screen="findme" /></div>
          <div className="hp-main"><PhoneMock screen="home" /></div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const items = [
    ["Weddings", "heart"], ["Birthdays", "sparkle"], ["Reunions", "users"], ["Showers", "heart"],
    ["Graduations", "star"], ["Anniversaries", "sparkle"], ["Corporate parties", "grid"], ["Holidays", "heart"],
  ];
  const row = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {row.map(([t, ic], i) => (
          <span className="marquee-item" key={i}>
            <Icon name={ic} size={20} />{t}
          </span>
        ))}
      </div>
    </div>
  );
}

function Steps() {
  const steps = [
    { ic: "qr", t: "Pop up your QR", d: "Print it, screen it, or drop it on every table. Guests scan with their phone camera — that's the whole setup." },
    { ic: "upload", t: "Everyone snaps & shares", d: "One tap to upload from any phone. No app to download, no account to make. Grandma can do it." },
    { ic: "sparkle", t: "The album makes itself", d: "AI sorts every photo into moments. Faces, search and full-res downloads — all automatic, all yours." },
  ];
  return (
    <section className="section" id="how">
      <div className="wrap">
        <div className="sec-center reveal">
          <span className="eyebrow">How it works</span>
          <h2 className="sec-title" style={{ marginTop: 14 }}>Live in <em>two minutes.</em><br />Magic all night.</h2>
          <p className="sec-lead">No hardware, no photographer wrangling, no “send me your pics” group text the next morning.</p>
        </div>
        <div className="steps">
          {steps.map((s, i) => (
            <div className="step reveal" key={i} style={{ transitionDelay: i * 0.08 + "s" }}>
              <div className="step-n">{i + 1}</div>
              <span className="step-ic"><Icon name={s.ic} size={40} stroke={1.3} /></span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              {i < 2 && <Icon name="chevron" size={24} className="step-line" />}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Showcase() {
  const shots = [
    { screen: "home", b: "The welcome", c: "Your event, beautifully branded the moment guests scan in." },
    { screen: "moments", b: "Auto-sorted moments", c: "Every photo filed into the night as it happened — no tagging." },
    { screen: "findme", b: "Find photos of you", c: "One selfie surfaces every shot a guest appears in." },
  ];
  return (
    <section className="section showcase">
      <div className="wrap">
        <div className="sec-center reveal">
          <span className="eyebrow">A peek inside</span>
          <h2 className="sec-title" style={{ marginTop: 14 }}>The app your guests will <em>actually love</em></h2>
          <p className="sec-lead">Gorgeous, effortless, and familiar from the very first tap.</p>
        </div>
        <div className="showcase-row">
          {shots.map((s, i) => (
            <div className="showcase-phone reveal" key={i} style={{ transitionDelay: i * 0.1 + "s" }}>
              <PhoneMock screen={s.screen} />
              <div className="showcase-cap"><b>{s.b}</b>{s.c}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Features() {
  const feats = [
    { ic: "qr", t: "t-rose", h: "No app, ever", p: "Guests scan and upload straight from their camera. Nothing to download — works on every phone." },
    { ic: "sparkle", t: "t-plum", h: "AI moments", p: "Photos organize themselves into the ceremony, the toasts, the dance floor — instantly." },
    { ic: "face", t: "t-blue", h: "Find photos of you", p: "A single selfie matches every photo a guest is in, all night long." },
    { ic: "search", t: "t-gold", h: "Just-ask search", p: "“Show me the cake.” Natural-language search finds the moment in seconds." },
    { ic: "shield", t: "t-sage", h: "Private & moderated", p: "You approve what's shown, control the link, and keep the album yours." },
    { ic: "download", t: "t-rose", h: "Full-quality downloads", p: "Everyone saves their favourites — or the whole album — in original resolution." },
  ];
  return (
    <section className="section" id="features">
      <div className="wrap">
        <div className="sec-center reveal">
          <span className="eyebrow">Everything included</span>
          <h2 className="sec-title" style={{ marginTop: 14 }}>One QR. <em>A whole lot</em> of magic.</h2>
        </div>
        <div className="feat-grid">
          {feats.map((f, i) => (
            <div className="feat reveal" key={i} style={{ transitionDelay: (i % 3) * 0.08 + "s" }}>
              <span className={"feat-ic " + f.t}><Icon name={f.ic} size={26} stroke={1.6} /></span>
              <h3>{f.h}</h3>
              <p>{f.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const stats = [["4,200", "Photos per event, on average"], ["87", "Guests contributing"], ["0", "Group texts the next day"]];
  const quotes = [
    { q: "We got 1,400 photos we'd never have seen otherwise. Angles from every table, every dance, every happy tear.", n: "Maya & Jordan", r: "Married Aug 2026", s: 240 },
    { q: "Set it up in the morning, forgot about it, and woke up to the most beautiful album of my mom's 60th.", n: "Daniel R.", r: "Birthday host", s: 233 },
    { q: "Our guests were obsessed with finding photos of themselves. It became part of the party.", n: "Priya & Sam", r: "Reunion 2026", s: 255 },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="testi-wrap reveal">
          <FloralSpray variant="cornerTL" density="lush" width={180} height={180} seed={5} className="testi-fl" style={{ top: -10, left: -10, width: 200 }} />
          <FloralSpray variant="cornerTR" density="lush" width={180} height={180} seed={9} className="testi-fl" style={{ top: -10, right: -10, width: 200 }} />
          <div className="testi-stats">
            {stats.map((s, i) => (
              <div className="tstat" key={i}><strong>{s[0] === "0" ? <em>0</em> : s[0]}</strong><span>{s[1]}</span></div>
            ))}
          </div>
          <div className="testi-grid">
            {quotes.map((qt, i) => (
              <div className="quote" key={i}>
                <div className="quote-stars">★★★★★</div>
                <p>“{qt.q}”</p>
                <div className="quote-by">
                  <span className="quote-av" style={washFor(qt.s)}><span className="pm-grain" /></span>
                  <div><div className="quote-name">{qt.n}</div><div className="quote-role">{qt.r}</div></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function PricingPreview() {
  const tiers = [
    { n: "Free", p: "Free", per: "pay per event", b: "For a single celebration.", f: ["1 GB storage", "Unlimited guests", "Face matching", "Add-ons à la carte"], feat: false },
    { n: "Gatherings", p: "$60", per: "/ year", b: "For the regular host.", f: ["2 GB storage", "Unlimited events", "All add-ons included", "AI moments & search"], feat: true },
    { n: "Milestones", p: "$160", per: "/ year", b: "For all of life's milestones.", f: ["1 TB storage", "Add-ons included", "Per-event base waived", "Priority support"], feat: false },
  ];
  return (
    <section className="section" id="pricing">
      <div className="wrap">
        <div className="sec-center reveal">
          <span className="eyebrow">Pricing</span>
          <h2 className="sec-title" style={{ marginTop: 14 }}>Pay <em>per event.</em> Never per guest.</h2>
          <p className="sec-lead">A small one-time base cost per album that shrinks with every event you create — free from your 6th. Yearly memberships add storage and bundle every add-on.</p>
        </div>
        <div className="price-grid">
          {tiers.map((t, i) => (
            <div className={"price-card reveal" + (t.feat ? " feat" : "")} key={i} style={{ transitionDelay: i * 0.08 + "s" }}>
              {t.feat && <span className="price-pop">Most loved</span>}
              <div className="price-name">{t.n}</div>
              <div className="price-amt"><strong>{t.p}</strong><span>{t.per}</span></div>
              <p className="price-blurb">{t.b}</p>
              <ul className="price-feats">
                {t.f.map((ft, j) => <li key={j}><Icon name="check" size={16} stroke={2.2} />{ft}</li>)}
              </ul>
              <a className={"btn " + (t.feat ? "primary" : "ghost") + " lg"} href={APP} style={{ justifyContent: "center" }}>
                {t.p === "Free" ? "Start free" : "Choose " + t.n}
              </a>
            </div>
          ))}
        </div>
        <p className="price-note">See per-event base costs &amp; add-ons on the <a href="Pricing.html" style={{ color: "var(--accent)", fontWeight: 600 }}>full pricing page →</a></p>
      </div>
    </section>
  );
}

function FaqPreview() {
  const items = [
    ["Do my guests need to download an app?", "Never. Guests scan your QR with their phone camera and upload straight from the browser. It works on any iPhone or Android — no account, no install."],
    ["How do guests find photos of themselves?", "They take one selfie. MomentKeep matches their face across every photo guests upload, all night, and keeps adding new matches as they arrive."],
    ["Is the album private?", "Yes. You control the shareable link, approve uploads if you like, and can hide anything. The album is yours and only visible to people you invite."],
    ["What kinds of events does it work for?", "Anything with people and phones — weddings, birthdays, reunions, showers, graduations, corporate parties. If guests are taking photos, MomentKeep collects them."],
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section tight">
      <div className="wrap">
        <div className="sec-center reveal">
          <span className="eyebrow">Good questions</span>
          <h2 className="sec-title" style={{ marginTop: 14 }}>Everything you're <em>wondering</em></h2>
        </div>
        <div className="faq-list">
          {items.map(([q, a], i) => (
            <div className={"faq-item reveal" + (open === i ? " open" : "")} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {q}<span className="qic"><Icon name="plus" size={16} stroke={2} /></span>
              </button>
              <div className="faq-a" style={{ maxHeight: open === i ? 240 : 0 }}>
                <div className="faq-a-in">{a}</div>
              </div>
            </div>
          ))}
        </div>
        <p className="price-note">More answers on the <a href="FAQ.html" style={{ color: "var(--accent)", fontWeight: 600 }}>full FAQ →</a></p>
      </div>
    </section>
  );
}

function ClosingCTA() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="cta-band reveal">
          <FloralSpray variant="cornerTL" density="lush" width={200} height={200} seed={3} className="cta-fl" style={{ top: -20, left: -20, width: 220 }} />
          <FloralSpray variant="cornerTR" density="lush" width={200} height={200} seed={21} className="cta-fl" style={{ bottom: -30, right: -20, width: 220 }} />
          <span className="eyebrow">Your next event</span>
          <h2>Deserves <span className="scr">every</span> photo.</h2>
          <p>Set up your album in two minutes. Free to start, magical by the first scan.</p>
          <div className="hero-cta">
            <a className="btn light lg" href={APP}><Icon name="qr" size={19} stroke={1.8} />Get your QR free</a>
            <a className="btn light lg" href="Pricing.html">See pricing</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function LandingPage() {
  useReveal();
  return (
    <>
      <Nav active="home" />
      <Hero />
      <Marquee />
      <Steps />
      <Showcase />
      <Features />
      <Testimonials />
      <PricingPreview />
      <FaqPreview />
      <ClosingCTA />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<LandingPage />);