// site.jsx — shared MomentKeep marketing components (CTAs point at the live app/dashboard)

const APP = "https://app.momentkeep.com";

/* ---- logo mark: aperture petal ---- */
function LogoMark({ size = 34 }) {
  return (
    <svg className="logo-mark" width={size} height={size} viewBox="0 0 40 40" aria-hidden="true">
      <circle cx="20" cy="20" r="18.5" fill="var(--accent-soft)" />
      {[0, 60, 120, 180, 240, 300].map((d, i) => (
        <ellipse key={i} cx="20" cy="11.5" rx="4.4" ry="7.2" fill="var(--accent)"
          opacity={0.62 + (i % 2) * 0.3} transform={`rotate(${d} 20 20)`} />
      ))}
      <circle cx="20" cy="20" r="4.1" fill="#fff" />
      <circle cx="20" cy="20" r="1.8" fill="var(--accent-deep)" />
    </svg>
  );
}

function Logo() {
  return (
    <a className="logo" href="/">
      <LogoMark />
      <span className="mk">Moment<b>Keep</b></span>
    </a>
  );
}

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-in">
        <Logo />
        <nav className="nav-links">
          <a href="MomentKeep.html#how">How it works</a>
          <a href="MomentKeep.html#features">Features</a>
          <a href="Pricing.html">Pricing</a>
          <a href="FAQ.html">FAQ</a>
        </nav>
        <div className="nav-cta">
          <a className="login" href={APP}>Log in</a>
          <a className="btn primary sm" href={APP}><Icon name="qr" size={17} stroke={1.8} />Get your QR</a>
        </div>
        <button className="nav-burger" aria-label="Menu"
          onClick={() => document.querySelector(".nav-links").scrollIntoView()}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
        </button>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div>
            <Logo />
            <p className="footer-blurb">Every photo from every guest, in one beautiful album. No app. No chasing. No missed moments.</p>
            <div className="trust-stars" style={{ color: "var(--gold)" }}>★★★★★ <span style={{ color: "rgba(255,255,255,0.6)", fontSize: 13, marginLeft: 6 }}>Loved by 12,000+ hosts</span></div>
          </div>
          <div className="footer-col">
            <h4>Product</h4>
            <a href="MomentKeep.html#how">How it works</a>
            <a href="MomentKeep.html#features">Features</a>
            <a href="Pricing.html">Pricing</a>
            <a href="FAQ.html">FAQ</a>
          </div>
          <div className="footer-col">
            <h4>Events</h4>
            <a href="MomentKeep.html#features">Weddings</a>
            <a href="MomentKeep.html#features">Birthdays</a>
            <a href="MomentKeep.html#features">Reunions</a>
            <a href="MomentKeep.html#features">Parties</a>
          </div>
          <div className="footer-col">
            <h4>Company</h4>
            <a href="FAQ.html">FAQ</a>
            <a href="mailto:hello@momentkeep.com">Contact</a>
            <a href={APP}>Host login</a>
            <a href={APP}>Get started</a>
          </div>
        </div>
        <div className="footer-bot">
          <span>© 2026 MomentKeep · momentkeep.com</span>
          <div className="fb-links">
            <a href="#">Privacy</a><a href="#">Terms</a><a href="#">Security</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ---- reveal-on-scroll hook ---- */
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

/* ---- floating petals (hero/cta decoration) ---- */
function Petal({ x, y, s, c, d }) {
  return (
    <svg style={{ left: x, top: y, animationDelay: d + "s" }} width={s} height={s} viewBox="0 0 24 24" aria-hidden="true">
      {[0, 72, 144, 216, 288].map((a, i) => (
        <ellipse key={i} cx="12" cy="7" rx="3.2" ry="5" fill={c} opacity="0.9" transform={`rotate(${a} 12 12)`} />
      ))}
      <circle cx="12" cy="12" r="2" fill="#fff" />
    </svg>
  );
}
function HeroPetals() {
  const ps = [
    ["6%", "12%", 30, "#ec8fbe", 0], ["88%", "8%", 24, "#f7bcd8", 1.2],
    ["80%", "62%", 34, "#de5fa3", 0.6], ["12%", "70%", 22, "#f0a6cb", 1.8],
    ["46%", "4%", 18, "#b8c79f", 2.4], ["94%", "40%", 20, "#d99a3c", 0.9],
  ];
  return <div className="hero-petals">{ps.map((p, i) => <Petal key={i} x={p[0]} y={p[1]} s={p[2]} c={p[3]} d={p[4]} />)}</div>;
}

/* ============ PHONE MOCK SCREENS ============ */
function Status({ label = "9:41" }) {
  return (
    <div className="pm-status">
      <span>{label}</span>
      <span className="pm-sig"><i /><i /><i style={{ opacity: .5 }} /></span>
    </div>
  );
}

function MockHome() {
  const recents = [612, 488, 333, 720];
  return (
    <div className="pm" style={{ background: "var(--cream)" }}>
      <Status />
      <div className="pm-body">
        <FloralSpray variant="topBorder" density="lush" width={260} height={54} seed={11} className="pm-garland" />
        <div className="pm-eyebrow">The Celebration Of</div>
        <div className="pm-script" style={{ fontSize: 30, margin: "2px 0 3px" }}>Maya <span className="pm-accent">&amp;</span> Jordan</div>
        <div className="pm-eyebrow" style={{ letterSpacing: "0.2em" }}>Aug 15 · 2026</div>
        <div className="pm-bignum" style={{ marginTop: 12 }}>1,248</div>
        <div className="pm-eyebrow" style={{ marginBottom: 10 }}>Memories &amp; counting</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          <div className="pm-card"><span className="pm-ic t-rose"><Icon name="upload" size={16} /></span><div className="pm-ctext"><div className="pm-ctitle">Add your photos</div><div className="pm-cdesc">No app, no account</div></div></div>
          <div className="pm-card"><span className="pm-ic t-blue"><Icon name="face" size={16} /></span><div className="pm-ctext"><div className="pm-ctitle">Find photos of you</div><div className="pm-cdesc">One selfie does it</div></div></div>
        </div>
        <div className="pm-tiles" style={{ gridTemplateColumns: "1fr 1fr 1fr 1fr", marginTop: 8 }}>
          {recents.map((s) => <div key={s} className="pm-tile" style={{ aspectRatio: "3/4", ...washFor(s) }}><div className="pm-grain" /></div>)}
        </div>
      </div>
    </div>
  );
}

const MOCK_MOMENTS = [
  ["Arrivals", 64], ["The Toast", 84], ["First Dance", 110], ["Cake", 67], ["Golden Hour", 61], ["Dance Floor", 203],
];
function MockMoments() {
  return (
    <div className="pm" style={{ background: "var(--cream)" }}>
      <Status />
      <div className="pm-body">
        <div className="pm-eyebrow" style={{ marginTop: 6 }}>The Album</div>
        <div className="pm-script" style={{ fontSize: 30, color: "var(--accent)", margin: "1px 0 8px" }}>Moments</div>
        <div className="pm-pill" style={{ marginBottom: 9 }}><Icon name="search" size={13} />Show me the first dance…</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          {MOCK_MOMENTS.map(([n, c], i) => (
            <div className="pm-row" key={n}>
              <div className="pm-rcover" style={washFor(c + i)}><div className="pm-grain" /><div className="pm-vig" /></div>
              <div style={{ flex: 1 }}><div className="pm-rname">{n}</div><div className="pm-rcount">{c} photos</div></div>
              <Icon name="chevron" size={13} style={{ color: "var(--ink-faint)" }} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function MockFindMe() {
  const tiles = [500, 503, 506, 509, 512, 515, 518, 521, 524];
  return (
    <div className="pm" style={{ background: "var(--cream)" }}>
      <Status />
      <div className="pm-body">
        <div className="pm-script" style={{ fontSize: 28, color: "var(--accent)", marginTop: 8 }}>Found you</div>
        <div className="pm-eyebrow" style={{ marginBottom: 10 }}><b style={{ color: "var(--ink)" }}>23 photos</b> of you so far</div>
        <div className="pm-tiles" style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
          {tiles.map((s, i) => (
            <div key={s} className="pm-tile" style={{ aspectRatio: "1/1", ...washFor(s) }}>
              <div className="pm-grain" /><div className="pm-vig" />
              {i % 4 === 0 && <span style={{ position: "absolute", top: 3, right: 4, color: "#fff", fontSize: 8 }}>♥</span>}
            </div>
          ))}
        </div>
        <div className="pm-cta-btn" style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 6 }}>
          <Icon name="download" size={13} stroke={1.9} />Save all 23
        </div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 6, marginTop: 9 }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--sage)" }} />
          <span className="pm-eyebrow" style={{ fontSize: 7.5, color: "var(--ink-soft)" }}>Live · more matches arriving</span>
        </div>
      </div>
    </div>
  );
}

function PhoneMock({ screen }) {
  const Screen = { home: MockHome, moments: MockMoments, findme: MockFindMe }[screen] || MockHome;
  return (
    <div className="phone">
      <div className="phone-screen"><Screen /></div>
    </div>
  );
}

Object.assign(window, { APP, LogoMark, Logo, Nav, Footer, useReveal, HeroPetals, PhoneMock, MockHome, MockMoments, MockFindMe });