// landing.jsx — Actova marketing page. Light + dark mode, Bold theme tokens.
// Reuses the same brand & screen components from the app for visual coherence.

// ── Theme context ──────────────────────────────────────────────
const ColorsContext = React.createContext(null);
const useColors = () => React.useContext(ColorsContext);

// ── Viewport hook — drives mobile-specific scale + nav. ────────
function useViewport() {
  const [w, setW] = React.useState(() =>
    typeof window !== 'undefined' ? window.innerWidth : 1200
  );
  React.useEffect(() => {
    const onResize = () => setW(window.innerWidth);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return { width: w, isMobile: w < 760, isNarrow: w < 960 };
}

function palette(dark) {
  return dark ? {
    bg:        '#0a0a08',
    bgAlt:     '#13140f',
    bgInk:     '#000',
    bgInkAlt:  '#13140f',
    fg:        '#fafaf6',
    fgOnInk:   '#fafaf6',
    muted:     'rgba(250,250,246,0.58)',
    mutedOnInk:'rgba(250,250,246,0.6)',
    surface:   'rgba(255,255,255,0.04)',
    surfaceAlt:'rgba(255,255,255,0.03)',
    stroke:    'rgba(250,250,246,0.10)',
    strokeStrong: 'rgba(250,250,246,0.18)',
    strokeOnInk: 'rgba(250,250,246,0.14)',
    accent:     'oklch(0.85 0.18 130)',
    accentDeep: 'oklch(0.78 0.18 130)',
    accentSoft: 'oklch(0.32 0.08 130)',
    accentHalo: 'oklch(0.82 0.18 130 / 0.32)',
    dark: true,
  } : {
    bg:        '#fafaf6',
    bgAlt:     '#f1f1e8',
    bgInk:     '#0a0a08',
    bgInkAlt:  '#13140f',
    fg:        '#0a0a08',
    fgOnInk:   '#fafaf6',
    muted:     'rgba(10,10,8,0.55)',
    mutedOnInk:'rgba(250,250,246,0.6)',
    surface:   '#fff',
    surfaceAlt:'#f6f6ef',
    stroke:    'rgba(10,10,8,0.10)',
    strokeStrong: 'rgba(10,10,8,0.18)',
    strokeOnInk: 'rgba(250,250,246,0.14)',
    accent:     'oklch(0.85 0.18 130)',
    accentDeep: 'oklch(0.55 0.16 130)',
    accentSoft: 'oklch(0.94 0.08 130)',
    accentHalo: 'oklch(0.92 0.16 130 / 0.55)',
    dark: false,
  };
}

// ── Primitives ─────────────────────────────────────────────────
const PHONE_W = 390, PHONE_H = 844;

function Container({ children, style = {} }) {
  return (
    <div className="cb-container" style={{ maxWidth: 1280, margin: '0 auto', ...style }}>
      {children}
    </div>
  );
}

function Eyebrow({ children, onInk, dot = true }) {
  const c = useColors();
  return (
    <div style={{
      fontFamily: 'var(--cb-mono)',
      fontSize: 11.5, letterSpacing: 1.6, textTransform: 'uppercase',
      color: onInk ? c.mutedOnInk : c.muted,
      display: 'inline-flex', alignItems: 'center', gap: 8, whiteSpace: 'nowrap',
    }}>
      {dot && <span style={{
        width: 7, height: 7, borderRadius: 999,
        background: 'oklch(0.78 0.20 130)', flexShrink: 0,
      }}/>}
      <span>{children}</span>
    </div>
  );
}

function PrimaryBtn({ children, href = '#', large = false, target }) {
  return (
    <a href={href} target={target} rel={target === '_blank' ? 'noopener noreferrer' : undefined} style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: large ? '16px 24px' : '12px 18px',
      borderRadius: 10,
      background: 'oklch(0.85 0.20 130)', color: '#0a0a08',
      fontWeight: 600, fontSize: large ? 16 : 14.5,
      textDecoration: 'none', letterSpacing: -0.1,
      border: `1px solid oklch(0.55 0.18 130)`,
      boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.45)',
    }}>{children}</a>
  );
}

function GhostBtn({ children, href = '#', large = false, onInk = false }) {
  const c = useColors();
  return (
    <a href={href} style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: large ? '16px 24px' : '12px 18px',
      borderRadius: 10,
      background: 'transparent',
      color: onInk ? c.fgOnInk : c.fg,
      fontWeight: 500, fontSize: large ? 16 : 14.5,
      textDecoration: 'none', letterSpacing: -0.1,
      border: `1px solid ${onInk ? c.strokeOnInk : c.strokeStrong}`,
    }}>{children}</a>
  );
}

function NavLink({ children, href }) {
  const c = useColors();
  return (
    <a href={href} style={{
      color: c.fg, textDecoration: 'none', fontWeight: 500, fontSize: 14,
      letterSpacing: -0.05,
    }}>{children}</a>
  );
}

function ThemeToggle({ dark, onToggle }) {
  const c = useColors();
  return (
    <button
      onClick={onToggle}
      aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'}
      style={{
        appearance: 'none', cursor: 'pointer',
        width: 36, height: 36, borderRadius: 999,
        background: 'transparent',
        border: `1px solid ${c.strokeStrong}`,
        color: c.fg,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
      {dark ? (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="4"/>
          <path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M5 19l1.5-1.5M17.5 6.5L19 5"/>
        </svg>
      ) : (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z"/>
        </svg>
      )}
    </button>
  );
}

// ── Phone wrapper ──────────────────────────────────────────────
function LandingPhone({ scale = 1, dark = false, navTab = null, children }) {
  return (
    <div style={{
      width: PHONE_W * scale, height: PHONE_H * scale,
      position: 'relative',
    }}>
      <div style={{
        transform: `scale(${scale})`, transformOrigin: 'top left',
        position: 'absolute', top: 0, left: 0,
      }}>
        <IOSDevice width={PHONE_W} height={PHONE_H} dark={dark}>
          <div style={{
            width: '100%', height: '100%',
            background: dark ? '#0a0a08' : '#fafaf6',
            color: dark ? '#fafaf6' : '#0a0a08',
            fontFamily: 'var(--cb-ui)',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
              {children}
            </div>
            {navTab && (
              <BottomNav tab={navTab} setTab={() => {}} dark={dark}/>
            )}
          </div>
        </IOSDevice>
      </div>
    </div>
  );
}

// ── Sections ───────────────────────────────────────────────────

function Nav({ dark, onToggleTheme }) {
  const c = useColors();
  const [open, setOpen] = React.useState(false);
  const links = [
    { href: '#fresh',     label: "What's new" },
    { href: '#community', label: 'Community' },
  ];
  React.useEffect(() => {
    const onResize = () => { if (window.innerWidth >= 760) setOpen(false); };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: dark ? 'rgba(10,10,8,0.78)' : 'rgba(250,250,246,0.85)',
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      borderBottom: `0.5px solid ${c.stroke}`,
    }}>
      <Container style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 64 }}>
        <a href="#top" style={{ textDecoration: 'none' }} onClick={() => setOpen(false)}>
          <ActovaLockup size={18} dark={dark}/>
        </a>

        {/* Desktop nav */}
        <nav className="nav-desktop" style={{ alignItems: 'center', gap: 28 }}>
          {links.map(l => <NavLink key={l.href} href={l.href}>{l.label}</NavLink>)}
          <ThemeToggle dark={dark} onToggle={onToggleTheme}/>
          <PrimaryBtn href="https://app.actova.ai" target="_blank">Open App →</PrimaryBtn>
        </nav>

        {/* Mobile compact controls */}
        <div className="nav-mobile" style={{ alignItems: 'center', gap: 10 }}>
          <ThemeToggle dark={dark} onToggle={onToggleTheme}/>
          <button onClick={() => setOpen(o => !o)}
            aria-label={open ? 'Close menu' : 'Open menu'}
            aria-expanded={open}
            style={{
              appearance: 'none', cursor: 'pointer',
              width: 36, height: 36, borderRadius: 999,
              background: 'transparent',
              border: `1px solid ${c.strokeStrong}`,
              color: c.fg,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>
            {open ? (
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                <path d="M6 6l12 12"/><path d="M6 18L18 6"/>
              </svg>
            ) : (
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                <path d="M3 7h18"/><path d="M3 12h18"/><path d="M3 17h18"/>
              </svg>
            )}
          </button>
        </div>
      </Container>

      {/* Mobile drawer */}
      <div className="nav-drawer" data-open={open ? '1' : '0'}
        style={{
          background: dark ? 'rgba(10,10,8,0.96)' : 'rgba(250,250,246,0.96)',
          backdropFilter: 'blur(12px)',
          WebkitBackdropFilter: 'blur(12px)',
          borderBottom: `0.5px solid ${c.stroke}`,
        }}>
        <Container style={{ padding: '8px 24px 24px' }}>
          {links.map(l => (
            <a key={l.href} href={l.href} onClick={() => setOpen(false)}
              style={{
                display: 'block', color: c.fg, textDecoration: 'none',
                padding: '16px 0', borderBottom: `0.5px solid ${c.stroke}`,
                fontSize: 18, fontWeight: 500, letterSpacing: -0.1,
              }}>{l.label}</a>
          ))}
          <div style={{ marginTop: 20 }}>
            <PrimaryBtn large href="https://app.actova.ai" target="_blank">Open App →</PrimaryBtn>
          </div>
        </Container>
      </div>
    </header>
  );
}

function Hero({ dark }) {
  const c = useColors();
  const { isMobile } = useViewport();
  return (
    <section id="top" style={{ padding: isMobile ? '36px 0 0 56px' : '64px 0 0 80px' }}>
      <Container>
        <div className="hero-grid">
          <div>
            <h1 style={{
              fontFamily: 'var(--cb-display)',
              fontSize: 'clamp(52px, 9.2vw, 132px)',
              fontWeight: 700, lineHeight: 0.95, letterSpacing: -0.04,
              margin: '18px 0 22px', textWrap: 'balance', color: c.fg,
            }}>
              Health is a{' '}
              <span style={{
                fontStyle: 'italic', fontWeight: 600,
                background: dark
                  ? `linear-gradient(180deg, transparent 60%, oklch(0.55 0.16 130) 60%)`
                  : `linear-gradient(180deg, transparent 60%, oklch(0.92 0.16 130) 60%)`,
                padding: '0 6px', boxDecorationBreak: 'clone',
                WebkitBoxDecorationBreak: 'clone',
              }}>verb.</span>
            </h1>
            <p style={{
              fontSize: 'clamp(16px, 1.6vw, 21px)',
              lineHeight: 1.45, color: c.muted, maxWidth: 520,
              margin: '0 0 28px', textWrap: 'pretty',
            }}>
              Actova turns the best wellness advice into small daily acts you can discover and actually follow.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
              <PrimaryBtn large target="_blank" href="https://app.actova.ai">Try it now →</PrimaryBtn>
              <GhostBtn large href="#how">Learn more</GhostBtn>
            </div>
            <div style={{
              marginTop: 22, fontFamily: 'var(--cb-mono)',
              fontSize: 11.5, color: c.muted,
              letterSpacing: 1.4, textTransform: 'uppercase',
            }}></div>
          </div>
          <div className="hero-phone" style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
            <div style={{
              position: 'absolute', inset: -40, zIndex: 0,
              background: `radial-gradient(ellipse 60% 70% at 70% 40%, ${c.accentHalo}, transparent 70%)`,
              pointerEvents: 'none',
            }}/>
            <img
              src="img/hero.png"
              alt="Actova app screenshot"
              style={{
                position: 'relative', zIndex: 1,
                width: '100%', maxWidth: 320,
                height: 'auto', display: 'block',
              }}
            />
          </div>
        </div>
      </Container>
    </section>
  );
}

function Manifesto() {
  const c = useColors();
  return (
    <section style={{ padding: '100px 0 80px', borderTop: `0.5px solid ${c.stroke}` }}>
      <Container>
        <div style={{ maxWidth: 980, margin: '0 auto', textAlign: 'left' }}>
          <Eyebrow>Why Actova</Eyebrow>
          <p style={{
            fontFamily: 'var(--cb-display)',
            fontSize: 'clamp(28px, 4vw, 52px)',
            fontWeight: 500, lineHeight: 1.12, letterSpacing: -0.02,
            margin: '20px 0 0', textWrap: 'balance', color: c.fg,
          }}>
            Health advice is everywhere. A clear next step is not.{" "}
            <span style={{ color: c.muted }}>
              Actova helps you act — small, daily, with the next thing always in view.
            </span>
          </p>
        </div>
      </Container>
    </section>
  );
}

function HowItWorks({ dark }) {
  const c = useColors();
  const { isMobile } = useViewport();
  const stepScale = isMobile ? 0.5 : 0.7;
  const mockSaved = {
    'morning-light': true, 'protein-breakfast': true, 'magnesium': true,
    'post-meal-walk': true, 'box-breath': true,
  };
  return (
    <section id="how" style={{ padding: isMobile ? '64px 0' : '100px 0', background: c.bgAlt }}>
      <Container>
        <div style={{ marginBottom: isMobile ? 36 : 56 }}>
          <Eyebrow>Three steps</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--cb-display)',
            fontSize: 'clamp(34px, 5vw, 64px)',
            fontWeight: 700, lineHeight: 1.0, letterSpacing: -0.03,
            margin: '14px 0 0', textWrap: 'balance', maxWidth: 760, color: c.fg,
          }}>Pick goals. Build a routine. Act daily.</h2>
        </div>
        <div className="three-col steps-grid">
          <Step
            n="01" title="Pick what matters."
            copy="Choose up to three goals. We curate the highest-leverage tips for you — no endless feed to wade through."
            phone={
              <LandingPhone scale={stepScale} dark={dark}>
                <OnboardScreen dark={dark} onDone={() => {}} defaultSelected={['sleep', 'energy', 'focus']}/>
              </LandingPhone>
            }
          />
          <Step
            n="02" title="Get a starter routine."
            copy="A small set of daily and weekly acts, tuned to your goals. Add, drop, reorder until it fits your life."
            phone={
              <LandingPhone scale={stepScale} dark={dark} navTab="routine">
                <RoutineScreen dark={dark} savedIds={mockSaved} toggleSave={() => {}} openTip={() => {}}/>
              </LandingPhone>
            }
          />
          <Step
            n="03" title="Tap. Repeat. Compound."
            copy="Check things off in one tap. Watch a streak emerge, and see which acts are doing the heavy lifting."
            phone={
              <LandingPhone scale={stepScale} dark={dark} navTab="progress">
                <ProgressScreen dark={dark}
                  routine={TIPS.filter(t => mockSaved[t.id])}
                  history={genMockHistory()}/>
              </LandingPhone>
            }
          />
        </div>
      </Container>
    </section>
  );
}

function genMockHistory() {
  const map = {};
  const days = 28;
  const t0 = new Date(); t0.setHours(0,0,0,0);
  for (let i = 0; i < days; i++) {
    const d = new Date(t0); d.setDate(d.getDate() - (days - 1 - i));
    const key = d.toISOString().slice(0, 10);
    const s = ((d.getDate() * 131 + d.getMonth() * 17) % 100) / 100;
    map[key] = i === days - 1 ? 0.5 : s * 0.85 + 0.1;
  }
  return map;
}

function Step({ n, title, copy, phone }) {
  const c = useColors();
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 28 }}>
      <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>{phone}</div>
      <div>
        <div style={{
          fontFamily: 'var(--cb-mono)',
          fontSize: 11.5, letterSpacing: 1.6, textTransform: 'uppercase',
          color: c.muted, marginBottom: 8,
        }}>Step {n}</div>
        <h3 style={{
          fontFamily: 'var(--cb-display)',
          fontSize: 28, fontWeight: 700, lineHeight: 1.1, letterSpacing: -0.02,
          margin: '0 0 10px', textWrap: 'balance', color: c.fg,
        }}>{title}</h3>
        <p style={{
          fontSize: 16, lineHeight: 1.5, color: c.muted, margin: 0, maxWidth: 380, textWrap: 'pretty',
        }}>{copy}</p>
      </div>
    </div>
  );
}

function FreshWeekly() {
  const c = useColors();
  const drops = [
    {
      when: 'This week',
      tag: 'NEW',
      tipTitle: 'Slow-carb dinners on training days',
      cat: 'nutrition',
      source: 'From a 2026 metabolic-health roundup',
      kind: 'food',
    },
    {
      when: 'This week',
      tag: 'NEW',
      tipTitle: '90-second cold finish for morning alertness',
      cat: 'longevity',
      source: 'From a Stanford neuroscience lecture',
      kind: 'environment',
    },
    {
      when: 'Last week',
      tag: 'Updated',
      tipTitle: 'Vitamin D3 + K2 — new dosing guidance',
      cat: 'supps',
      source: 'Updated after recent meta-analysis',
      kind: 'supplement',
    },
    {
      when: 'Last week',
      tag: 'NEW',
      tipTitle: 'A walking phone call instead of a sit-down meeting',
      cat: 'exercise',
      source: 'From a workplace-health podcast',
      kind: 'behavior',
    },
    {
      when: 'Coming soon',
      tag: 'Soon',
      tipTitle: 'A 7-day reset for poor sleep weeks',
      cat: 'sleep',
      source: 'In review with our sleep advisor',
      kind: 'behavior',
    },
    {
      when: 'Coming soon',
      tag: 'Soon',
      tipTitle: 'Strength snacks: a 4-minute home circuit',
      cat: 'exercise',
      source: 'Drafted with a physiotherapist',
      kind: 'exercise',
    },
  ];

  const badgeStyle = (tag) => {
    if (tag === 'NEW') return {
      bg: 'oklch(0.85 0.20 130)', fg: '#0a0a08',
    };
    if (tag === 'Updated') return {
      bg: c.dark ? 'rgba(250,250,246,0.10)' : 'rgba(10,10,8,0.06)',
      fg: c.fg,
    };
    return {
      bg: 'transparent', fg: c.muted,
      border: `1px dashed ${c.strokeStrong}`,
    };
  };

  return (
    <section id="fresh" style={{ padding: '120px 0', background: c.bg }}>
      <Container>
        <div className="fresh-grid">
          <div style={{ position: 'sticky', top: 100, alignSelf: 'flex-start' }}>
            <Eyebrow>What's new</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--cb-display)',
              fontSize: 'clamp(36px, 5vw, 64px)',
              fontWeight: 700, lineHeight: 1.0, letterSpacing: -0.03,
              margin: '14px 0 22px', textWrap: 'balance', color: c.fg,
            }}>
              Fresh ideas every week.{' '}
              <span style={{ color: c.muted }}>So you don't have to keep up.</span>
            </h2>
            <p style={{
              fontSize: 17, lineHeight: 1.55, color: c.muted, margin: '0 0 18px',
              maxWidth: 480, textWrap: 'pretty',
            }}>
              We read the latest research, listen to the best health podcasts, and talk to doctors and coaches — then turn the highlights into one small thing you can try this week.
            </p>
            <p style={{
              fontSize: 17, lineHeight: 1.55, color: c.muted, margin: '0 0 28px',
              maxWidth: 480, textWrap: 'pretty',
            }}>
              Every tip is reviewed by our team before it lands in your feed. No bro-science. No fads. Just things that work for normal people.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              <Pill icon="✶">Curated by our team</Pill>
              <Pill icon="✓">Vetted by experts</Pill>
              <Pill icon="↻">Updated weekly</Pill>
            </div>
          </div>

          <div>
            <ol style={{
              listStyle: 'none', margin: 0, padding: 0,
              position: 'relative',
            }}>
              {drops.map((d, i) => {
                const b = badgeStyle(d.tag);
                const prev = drops[i - 1];
                const showWhen = !prev || prev.when !== d.when;
                return (
                  <React.Fragment key={i}>
                    {showWhen && (
                      <li style={{
                        fontFamily: 'var(--cb-mono)', fontSize: 11.5,
                        letterSpacing: 1.4, textTransform: 'uppercase',
                        color: c.muted,
                        padding: '20px 0 12px', display: 'flex', alignItems: 'center', gap: 12,
                      }}>
                        <span>{d.when}</span>
                        <span style={{ flex: 1, height: 1, background: c.stroke }}/>
                      </li>
                    )}
                    <li style={{
                      background: c.surface,
                      borderRadius: 14,
                      padding: '20px 22px',
                      marginBottom: 10,
                      border: `0.5px solid ${c.stroke}`,
                      display: 'flex', alignItems: 'flex-start', gap: 16,
                    }}>
                      <div style={{
                        width: 40, height: 40, borderRadius: 10, flexShrink: 0,
                        background: `oklch(${c.dark ? 0.28 : 0.93} 0.06 ${CatHue(d.cat)})`,
                        color: `oklch(${c.dark ? 0.85 : 0.32} 0.13 ${CatHue(d.cat)})`,
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                      }}>
                        <KindGlyph kind={d.kind} size={20} color="currentColor"/>
                      </div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{
                          display: 'flex', alignItems: 'center', gap: 8,
                          marginBottom: 6, flexWrap: 'wrap',
                        }}>
                          <span style={{
                            fontFamily: 'var(--cb-mono)',
                            fontSize: 10, letterSpacing: 1, textTransform: 'uppercase',
                            padding: '3px 8px', borderRadius: 999,
                            background: b.bg, color: b.fg,
                            border: b.border,
                            fontWeight: 600,
                          }}>{d.tag}</span>
                          <span style={{
                            fontSize: 11.5, color: c.muted,
                            letterSpacing: 0.3, textTransform: 'uppercase',
                            fontFamily: 'var(--cb-mono)',
                          }}>
                            {CatLabel(d.cat)}
                          </span>
                        </div>
                        <div style={{
                          fontFamily: 'var(--cb-display)',
                          fontSize: 22, fontWeight: 700, lineHeight: 1.18,
                          letterSpacing: -0.01, color: c.fg, textWrap: 'pretty',
                        }}>{d.tipTitle}</div>
                        <div style={{
                          fontSize: 13.5, color: c.muted, marginTop: 6,
                          lineHeight: 1.4, textWrap: 'pretty',
                        }}>{d.source}</div>
                      </div>
                    </li>
                  </React.Fragment>
                );
              })}
            </ol>
          </div>
        </div>
      </Container>
    </section>
  );
}

function Pill({ icon, children }) {
  const c = useColors();
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '8px 14px', borderRadius: 999,
      background: c.surface,
      border: `0.5px solid ${c.stroke}`,
      color: c.fg, fontSize: 13, fontWeight: 500,
    }}>
      <span style={{ color: 'oklch(0.62 0.18 130)', fontWeight: 700 }}>{icon}</span>
      {children}
    </span>
  );
}

function CommunityRated() {
  const c = useColors();
  const acts = [
    { title: 'Morning sunlight within 30 min of waking', cat: 'mindset', kind: 'behavior', score: 94, votes: '12.4k', trend: 'up', trendLabel: '+8% this month' },
    { title: '10-min post-meal walk', cat: 'exercise', kind: 'exercise', score: 91, votes: '9.1k', trend: 'up', trendLabel: '+12% this month' },
    { title: 'No phone for first hour of the day', cat: 'mindset', kind: 'behavior', score: 88, votes: '8.7k', trend: 'up', trendLabel: 'Trending' },
    { title: 'Magnesium glycinate before bed', cat: 'supps', kind: 'supplement', score: 85, votes: '7.2k', trend: 'stable', trendLabel: 'Steady' },
    { title: 'Protein-first plate at every meal', cat: 'nutrition', kind: 'food', score: 82, votes: '6.8k', trend: 'up', trendLabel: '+5% this month' },
    { title: 'Cold finish on your morning shower', cat: 'longevity', kind: 'environment', score: 78, votes: '5.9k', trend: 'down', trendLabel: 'Cooling off' },
  ];

  const trendColor = (trend) =>
    trend === 'up' ? 'oklch(0.62 0.18 130)' :
    trend === 'down' ? c.muted : c.muted;

  const trendIcon = (trend) =>
    trend === 'up' ? '↑' : trend === 'down' ? '↓' : '→';

  return (
    <section id="community" style={{ padding: '120px 0', background: c.bgAlt }}>
      <Container>
        <div className="fresh-grid">
          <div style={{ position: 'sticky', top: 100, alignSelf: 'flex-start' }}>
            <Eyebrow>Community rated</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--cb-display)',
              fontSize: 'clamp(36px, 5vw, 64px)',
              fontWeight: 700, lineHeight: 1.0, letterSpacing: -0.03,
              margin: '14px 0 22px', textWrap: 'balance', color: c.fg,
            }}>
              Filtered by people{' '}
              <span style={{ color: c.muted }}>who actually did it.</span>
            </h2>
            <p style={{
              fontSize: 17, lineHeight: 1.55, color: c.muted, margin: '0 0 18px',
              maxWidth: 480, textWrap: 'pretty',
            }}>
              Every act is rated by the Actova community — not for how impressive it sounds, but for how much difference it made. The signal rises. The noise doesn't.
            </p>
            <p style={{
              fontSize: 17, lineHeight: 1.55, color: c.muted, margin: '0 0 28px',
              maxWidth: 480, textWrap: 'pretty',
            }}>
              Watch trends in real time: what's gaining traction, what's fading, and what consistently delivers across thousands of people.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              <Pill icon="★">Rated by real users</Pill>
              <Pill icon="↑">Live trends</Pill>
              <Pill icon="✗">Noise filtered out</Pill>
            </div>
          </div>

          <div>
            <ol style={{ listStyle: 'none', margin: 0, padding: 0 }}>
              {acts.map((a, i) => (
                <li key={i} style={{
                  background: c.surface,
                  borderRadius: 14,
                  padding: '20px 22px',
                  marginBottom: 10,
                  border: `0.5px solid ${c.stroke}`,
                  display: 'flex', alignItems: 'flex-start', gap: 16,
                }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: 10, flexShrink: 0,
                    background: `oklch(${c.dark ? 0.28 : 0.93} 0.06 ${CatHue(a.cat)})`,
                    color: `oklch(${c.dark ? 0.85 : 0.32} 0.13 ${CatHue(a.cat)})`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <KindGlyph kind={a.kind} size={20} color="currentColor"/>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{
                      fontFamily: 'var(--cb-display)',
                      fontSize: 18, fontWeight: 700, lineHeight: 1.2,
                      letterSpacing: -0.01, color: c.fg, textWrap: 'pretty',
                      marginBottom: 10,
                    }}>{a.title}</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                      <div style={{
                        flex: 1, height: 5, borderRadius: 999,
                        background: c.dark ? 'rgba(255,255,255,0.08)' : 'rgba(10,10,8,0.07)',
                        overflow: 'hidden',
                      }}>
                        <div style={{
                          width: `${a.score}%`, height: '100%', borderRadius: 999,
                          background: `oklch(0.85 0.20 130)`,
                        }}/>
                      </div>
                      <span style={{
                        fontFamily: 'var(--cb-mono)', fontSize: 13,
                        fontWeight: 600, color: c.fg, flexShrink: 0,
                      }}>{a.score}%</span>
                    </div>
                    <div style={{
                      display: 'flex', alignItems: 'center', gap: 12,
                      fontFamily: 'var(--cb-mono)', fontSize: 11.5,
                      letterSpacing: 0.5,
                    }}>
                      <span style={{ color: c.muted }}>{a.votes} ratings</span>
                      <span style={{ color: trendColor(a.trend), fontWeight: 600 }}>
                        {trendIcon(a.trend)} {a.trendLabel}
                      </span>
                    </div>
                  </div>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </Container>
    </section>
  );
}

function FinalCTA() {
  return (
    <section id="cta" style={{
      padding: '120px 0', background: '#0a0a08', color: '#fafaf6',
    }}>
      <Container>
        <div style={{ maxWidth: 760 }}>
          <h2 style={{
            fontFamily: 'var(--cb-display)',
            fontSize: 'clamp(40px, 6vw, 88px)',
            fontWeight: 700, lineHeight: 0.96, letterSpacing: -0.03,
            margin: '20px 0 26px', textWrap: 'balance',
          }}>
            Health is a verb.{' '}
            <span style={{ color: 'oklch(0.85 0.18 130)' }}>Conjugate yours.</span>
          </h2>
          <p style={{
            fontSize: 18, lineHeight: 1.5, color: 'rgba(250,250,246,0.65)',
            margin: '0 0 32px', maxWidth: 560, textWrap: 'pretty',
          }}>
            Actova is free. Try it now to make the change with an act.
          </p>
              <PrimaryBtn large target="_blank" href="https://app.actova.ai">Try it now →</PrimaryBtn>
          <div style={{
            marginTop: 18, fontFamily: 'var(--cb-mono)',
            fontSize: 11.5, color: 'rgba(250,250,246,0.6)',
            letterSpacing: 1.4, textTransform: 'uppercase',
          }}>~30 seconds to set up · No credit card</div>
        </div>
      </Container>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{
      padding: '40px 0 56px', background: '#0a0a08', color: '#fafaf6',
      borderTop: '0.5px solid rgba(250,250,246,0.14)',
    }}>
      <Container style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
        <ActovaLockup size={16} dark/>
        <div style={{
          display: 'flex', gap: 24, fontSize: 13, color: 'rgba(250,250,246,0.6)',
        }}>
          <a style={{ color: 'inherit', textDecoration: 'none' }} href="#">Privacy</a>
          <a style={{ color: 'inherit', textDecoration: 'none' }} href="#">Terms</a>
          <a style={{ color: 'inherit', textDecoration: 'none' }} href="Actova.html">Open the app</a>
        </div>
        <div style={{
          fontFamily: 'var(--cb-mono)', fontSize: 11, color: 'rgba(250,250,246,0.6)',
          letterSpacing: 1.4, textTransform: 'uppercase',
        }}>© 2026 Actova</div>
      </Container>
    </footer>
  );
}

// ── App ────────────────────────────────────────────────────────
function LandingApp() {
  const [dark, setDark] = React.useState(() => {
    try {
      const stored = localStorage.getItem('actova.landingDark');
      if (stored === '1') return true;
      if (stored === '0') return false;
      return window.matchMedia?.('(prefers-color-scheme: dark)').matches || false;
    } catch (e) { return false; }
  });
  const toggleTheme = () => setDark((d) => {
    try { localStorage.setItem('actova.landingDark', d ? '0' : '1'); } catch (e) {}
    return !d;
  });

  const c = palette(dark);

  React.useEffect(() => {
    document.body.style.background = c.bg;
  }, [c.bg]);

  return (
    <ColorsContext.Provider value={c}>
      <div style={{
        '--cb-display': '"Bricolage Grotesque", ui-sans-serif, system-ui',
        '--cb-ui': '"Geist", ui-sans-serif, system-ui, -apple-system, sans-serif',
        '--cb-mono': '"JetBrains Mono", ui-monospace, monospace',
        '--cb-accent-hue': 130,
        background: c.bg,
        color: c.fg,
        fontFamily: 'var(--cb-ui)',
        minHeight: '100vh',
        WebkitFontSmoothing: 'antialiased',
      }}>
        <Nav dark={dark} onToggleTheme={toggleTheme}/>
        <Hero dark={dark}/>
        <Manifesto/>
        {/* <HowItWorks dark={dark}/> */}
        <FreshWeekly/>
        <CommunityRated/>
        <FinalCTA/>
        <Footer/>
      </div>
    </ColorsContext.Provider>
  );
}

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