/* App — composes the page and owns shared waitlist state + scroll reveal */
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA, useCallback: useCallbackA } = React;
const { useTweaks, TweaksPanel, TweakSection, TweakSelect } = window;

/* Font presets — applied to :root CSS variables, swap live via Tweaks */
const PP_FONT_PRESETS = {
  cormorant:  { label: 'Cormorant + Geist',   serif: "'Cormorant Garamond', 'Times New Roman', serif", sans: "'Geist', ui-sans-serif, system-ui, sans-serif",       mono: "'Geist Mono', ui-monospace, monospace",     w: 500 },
  instrument: { label: 'Instrument + DM Sans', serif: "'Instrument Serif', 'Times New Roman', serif",    sans: "'DM Sans', ui-sans-serif, system-ui, sans-serif",     mono: "'DM Mono', ui-monospace, monospace",         w: 400 },
  bodoni:     { label: 'Bodoni + Manrope',     serif: "'Bodoni Moda', 'Times New Roman', serif",         sans: "'Manrope', ui-sans-serif, system-ui, sans-serif",     mono: "'JetBrains Mono', ui-monospace, monospace",  w: 500 },
  newsreader: { label: 'Newsreader + Be Viet', serif: "'Newsreader', 'Times New Roman', serif",          sans: "'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif", mono: "'IBM Plex Mono', ui-monospace, monospace",  w: 500 },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "fontPreset": "bodoni"
}/*EDITMODE-END*/;

/* ---------- Global CSS for hover effects, keyframes, scroll reveal ---------- */
function GlobalCSS() {
  return (
    <style>{`
      /* Floating hero mockup */
      @keyframes pp-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
      .pp-float { animation: pp-float 7s ease-in-out infinite; }

      /* Pulse dot */
      @keyframes pp-pulse {
        0%   { box-shadow: 0 0 0 0 rgba(31,138,91,0.55); }
        70%  { box-shadow: 0 0 0 8px rgba(31,138,91,0); }
        100% { box-shadow: 0 0 0 0 rgba(31,138,91,0); }
      }
      .pp-dot { animation: pp-pulse 1.8s ease-out infinite; }

      /* Hero mockup ring on pulse card */
      @keyframes pp-ring {
        0% { transform: scale(0.6); opacity: 0.8; }
        100% { transform: scale(1.4); opacity: 0; }
      }
      .pp-ring { animation: pp-ring 2.4s ease-out infinite; }

      /* Buttons */
      .pp-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(229,83,60,0.8); }
      .pp-btn-ghost:hover  { background: rgba(14,14,12,0.06); border-color: rgba(14,14,12,0.18); }

      /* Nav links */
      .pp-nav-link:hover { color: #0E0E0C !important; }

      /* Footer links */
      .pp-foot-link:hover { color: rgba(14,14,12,0.78); }

      /* Form focus */
      .pp-form-shell:focus-within { border-color: rgba(229,83,60,0.55) !important; background: rgba(229,83,60,0.04) !important; }

      /* Feature cards */
      .pp-feature:hover {
        transform: translateY(-3px);
        border-color: rgba(229,83,60,0.28);
        background: rgba(14,14,12,0.07);
      }
      .pp-feature:hover .pp-feature-edge { opacity: 1; }

      /* Stat cards */
      .pp-card { transition: transform .25s ease, border-color .25s ease; }
      .pp-card:hover { border-color: rgba(229,83,60,0.22); }

      /* Scroll reveal */
      [data-reveal] {
        opacity: 0; transform: translateY(28px);
        transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1);
      }
      [data-reveal].pp-in { opacity: 1; transform: translateY(0); }

      /* Hide marquee scrollbar */
      .pp-marquee::-webkit-scrollbar { display: none; }
      @media (prefers-reduced-motion: reduce) {
        .pp-float, .pp-dot, .pp-ring { animation: none !important; }
        [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
      }

      /* ── MOBILE: tablet & phone ── */
      @media (max-width: 768px) {
        /* Sections: reduce vertical padding */
        section[data-reveal] {
          padding-left: 20px !important;
          padding-right: 20px !important;
          padding-top: 64px !important;
          padding-bottom: 64px !important;
        }
        /* Nav: reduce horizontal padding */
        nav > div { padding-left: 16px !important; padding-right: 16px !important; }
        nav > div > div { grid-template-columns: 1fr !important; }
        .pp-nav-links { display: none !important; }
        .pp-nav-join { display: none !important; }

        /* Hero */
        header[id="top"] {
          padding-top: 80px !important;
          padding-bottom: 50px !important;
        }
        header[id="top"] > div { padding-left: 20px !important; padding-right: 20px !important; gap: 32px !important; }
        header[id="top"] h1 { font-size: clamp(30px, 9vw, 44px) !important; }
        header[id="top"] > div > p { font-size: 15px !important; }

        /* HeroMockup: collapse columns */
        .pp-float { border-radius: 10px !important; }
        .pp-float > div:last-child { grid-template-columns: 1fr !important; }
        .pp-float > div:last-child > div:first-child { padding: 18px 16px 20px !important; border-right: 0 !important; border-bottom: 1px solid rgba(14,14,12,0.06); }
        .pp-float > div:last-child > div:last-child { padding: 18px 16px !important; }
        .pp-float h3 { font-size: 20px !important; }
        .pp-float .pp-marquee { gap: 16px !important; }
        /* Collapse mockup stat grid */
        .pp-float > div:last-child > div:first-child > div:nth-child(3) { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
        .pp-float > div:last-child > div:first-child > div:nth-child(3) > div { padding: 8px 8px !important; }
        .pp-float > div:last-child > div:first-child > div:nth-child(3) > div > div:last-child { font-size: 18px !important; }

        /* Section headers */
        section[data-reveal] > header { gap: 24px !important; margin-bottom: 36px !important; }
        section[data-reveal] > header h2 { font-size: clamp(26px, 7vw, 34px) !important; }
        section[data-reveal] > header p { font-size: 15px !important; }

        /* Problem stats */
        section[id="problem"] > div:nth-of-type(2) { grid-template-columns: 1fr !important; }

        /* Features: reduce card padding */
        article.pp-feature { padding: 22px 20px 24px !important; }
        article.pp-feature h3 { font-size: 22px !important; }

        /* BeforeAfter: reduce card padding */
        .pp-ba-card { padding: 24px 22px 24px !important; }
        .pp-ba-card p { font-size: 11.5px !important; padding-left: 10px !important; }

        /* InsidePlatform: stack grid */
        .pp-platform-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
        .pp-platform-grid > div:last-child { order: -1; }
        .pp-platform-mock { overflow-x: auto !important; }

        /* DocumentUpload: stack grid */
        .pp-upload-grid { grid-template-columns: 1fr !important; }

        /* Pricing: reduce padding */
        section[id="pricing"] article { padding: 24px 20px 26px !important; }
        section[id="pricing"] article > div:first-of-type > div:nth-child(2) span:first-child { font-size: 36px !important; }

        /* FAQ: reduce padding */
        section[id="faq"] button { padding: 16px 18px !important; font-size: 14px !important; }
        section[id="faq"] button + div > div { padding: 0 18px 18px !important; font-size: 13.5px !important; }

        /* FinalCTA */
        section[id="waitlist"] { padding-top: 80px !important; padding-bottom: 80px !important; }
        section[id="waitlist"] > div { padding-left: 20px !important; padding-right: 20px !important; }
        section[id="waitlist"] h2 { font-size: clamp(28px, 8vw, 38px) !important; }
        section[id="waitlist"] p { font-size: 15px !important; }

        /* Footer: collapse to single column centered */
        footer > div {
          grid-template-columns: 1fr !important;
          text-align: center !important;
        }
        footer > div > div:first-child { margin: 0 auto !important; }
        footer > div > div:first-child div:last-child { max-width: none !important; }
        footer > div > div:last-child { justify-self: center !important; justify-content: center !important; }
        footer > div > div:nth-child(2) { padding: 8px 0 !important; }

        /* Waitlist form: full width */
        .pp-waitlist-form { max-width: 100% !important; }
        .pp-success-card { max-width: 100% !important; padding: 16px 18px !important; gap: 10px !important; }
        .pp-form-shell { flex-direction: column !important; border-radius: 10px !important; padding: 6px !important; }
        .pp-form-shell input { text-align: center !important; padding: 12px 12px !important; }
        .pp-form-shell button { width: 100% !important; justify-content: center !important; padding: 12px 18px !important; }

        /* Stat cards in Problem */
        div[class*="pp-card"] { padding: 22px 20px !important; }
        div[class*="pp-card"] > div:nth-child(2) { font-size: 40px !important; }

        /* Before/After section header */
        section[id="before-after"] > header h2 { font-size: clamp(24px, 6.5vw, 32px) !important; }

        /* Inside Platform tab bar */
        div[role="tablist"] { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
        div[role="tablist"] button { padding: 12px 16px 14px !important; font-size: 13px !important; }
      }

      /* ── SMALL PHONES (≤480px) ── */
      @media (max-width: 480px) {
        section[data-reveal] { padding-top: 48px !important; padding-bottom: 48px !important; }
        header[id="top"] { padding-top: 64px !important; }
        header[id="top"] h1 { font-size: clamp(26px, 10vw, 36px) !important; }
        header[id="top"] > div { gap: 24px !important; }

        .pp-float > div:first-child { padding: 8px 12px !important; }
        .pp-float > div:first-child > div:nth-child(2) { font-size: 9px !important; padding: 3px 10px !important; }
        .pp-float > div:first-child > div:nth-child(3) { display: none !important; }

        .pp-float h3 { font-size: 18px !important; letter-spacing: -0.3px !important; }
        .pp-float > div:last-child > div:first-child { padding: 14px 12px 16px !important; }
        .pp-float > div:last-child > div:last-child { padding: 14px 12px !important; }

        .pp-feature-edge { display: none !important; }

        /* Feature card columns */
        section[id="features"] > div:last-of-type { grid-template-columns: 1fr !important; }
        /* Before/After columns */
        section[id="before-after"] > div:last-of-type { grid-template-columns: 1fr !important; }
        /* Pricing columns */
        section[id="pricing"] > div:nth-of-type(2) { grid-template-columns: 1fr !important; }
        /* Problem paragraph columns */
        section[id="problem"] > div:first-of-type { grid-template-columns: 1fr !important; }

        /* Social proof */
        div[data-reveal="social"] { padding: 14px 16px !important; }
        div[data-reveal="social"] > div { gap: 14px !important; }

        /* Hero pulse pill */
        div[class*="PulsePill"] { padding: 5px 10px 5px 8px !important; font-size: 10px !important; }

        footer { padding: 28px 16px 32px !important; }
      }
    `}</style>
  );
}

/* ----------------------------------------------------------- App ---------- */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [shared, setShared] = useStateA({ count: 247, success: false });

  // Apply font preset to :root
  useEffectA(() => {
    const preset = PP_FONT_PRESETS[t.fontPreset] || PP_FONT_PRESETS.cormorant;
    const r = document.documentElement.style;
    r.setProperty('--pp-serif', preset.serif);
    r.setProperty('--pp-sans',  preset.sans);
    r.setProperty('--pp-mono',  preset.mono);
    r.setProperty('--pp-serif-weight', String(preset.w));
  }, [t.fontPreset]);

  // Initial count load
  useEffectA(() => {
    let alive = true;
    (async () => {
      try {
        const c = await window.ppGetCount();
        if (alive) setShared(s => ({ ...s, count: c }));
      } catch {}
    })();
    return () => { alive = false; };
  }, []);

  const onJoined = useCallbackA((nextCount) => {
    setShared({ count: nextCount, success: true });
    setTimeout(() => {
      const el = document.getElementById('waitlist');
      if (el) {
        const top = el.getBoundingClientRect().top + window.scrollY - 80;
        window.scrollTo({ top, behavior: 'smooth' });
      }
    }, 300);
  }, []);

  // Scroll reveal
  useEffectA(() => {
    const seen = new Set();
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !seen.has(e.target)) {
          seen.add(e.target);
          e.target.classList.add('pp-in');
        }
      });
    }, { threshold: 0.12 });
    const t = setTimeout(() => {
      document.querySelectorAll('[data-reveal]').forEach(el => obs.observe(el));
    }, 80);
    return () => { clearTimeout(t); obs.disconnect(); };
  }, []);

  const scrollToWaitlist = () => {
    const el = document.getElementById('waitlist');
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 60;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  return (
    <div>
      <GlobalCSS />
      <Nav onJoin={scrollToWaitlist} />
      <main>
        <Hero shared={shared} onJoined={onJoined} />
        <SocialProof />
        <Problem />
        <BeforeAfter />
        <Features />
        <HowItWorks />
        <InsidePlatform />
        <DocumentUpload />
        <Comparison />
        <Results />
        <Testimonials />
        <Industries />
        <FAQ />
        <FinalCTA shared={shared} onJoined={onJoined} />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Typography" />
        <TweakSelect
          label="Font pairing"
          value={t.fontPreset}
          options={Object.keys(PP_FONT_PRESETS).map(k => ({ value: k, label: PP_FONT_PRESETS[k].label }))}
          onChange={(v) => setTweak('fontPreset', v)}
        />
        <div style={{
          marginTop: 4, fontFamily: 'var(--pp-serif)', fontStyle: 'italic',
          fontWeight: 'var(--pp-serif-weight, 500)', fontSize: 26, lineHeight: 1.05,
          color: '#29261b', letterSpacing: '-0.5px',
        }}>
          to be seen.
        </div>
        <div style={{
          fontFamily: 'var(--pp-sans)', fontSize: 12, color: 'rgba(41,38,27,0.6)', lineHeight: 1.5,
        }}>
          The quick brown fox jumps over the lazy dog.
        </div>
        <div style={{
          fontFamily: 'var(--pp-mono)', fontSize: 10, letterSpacing: '1.4px',
          textTransform: 'uppercase', color: 'rgba(41,38,27,0.45)',
        }}>
          NOW · ACCEPTING · EARLY ACCESS
        </div>
      </TweaksPanel>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);