// Sections

const { useState, useEffect, useRef } = React;

// ───────────────────────────────────────────────────────────────
// Problem + Before/After Split (stable height)
// ───────────────────────────────────────────────────────────────
function ProblemSection() {
  const [mode, setMode] = useState('off');
  const [toolCalls, setToolCalls] = useState(0);
  const [filesRead, setFilesRead] = useState(0);
  const [tokens, setTokens] = useState(0);

  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const io = new IntersectionObserver(([e]) => e.isIntersecting && setVisible(true), { threshold: 0.3 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  useEffect(() => {
    if (!visible) return;
    const target = mode === 'off'
      ? { calls: 15, files: 10, tokens: 36 }
      : { calls: 3, files: 1, tokens: 4.5 };
    let f = 0;
    const total = 24;
    const id = setInterval(() => {
      f += 1;
      const p = Math.min(1, f / total);
      const ease = 1 - Math.pow(1 - p, 3);
      setToolCalls(Math.round(target.calls * ease));
      setFilesRead(Math.round(target.files * ease));
      setTokens(+(target.tokens * ease).toFixed(1));
      if (p >= 1) clearInterval(id);
    }, 28);
    return () => clearInterval(id);
  }, [mode, visible]);

  useEffect(() => {
    if (!visible) return;
    const id = setInterval(() => setMode(m => m === 'off' ? 'on' : 'off'), 4200);
    return () => clearInterval(id);
  }, [visible]);

  return (
    <section id="problem" ref={ref} className="section-pad" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="reveal">
          <div className="eyebrow">the problem</div>
          <h2 className="section">Every session starts from zero.</h2>
          <p className="lede">
            AI coding tools forget everything the moment a session ends. Your team's hard won knowledge,
            schema gotchas, past incidents, the field that's secretly a no op, stays in heads and scattered docs.
            The assistant burns tokens rediscovering, or worse, confidently ships the wrong answer.
          </p>
        </div>

        <div className="reveal" style={{
          marginTop: 48,
          background: 'var(--card)',
          border: '1px solid var(--border)',
          borderRadius: 14,
          overflow: 'hidden',
          boxShadow: 'var(--shadow-sm)',
        }}>
          <div className="problem-toolbar" style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '12px 16px',
            borderBottom: '1px solid var(--border)',
            fontFamily: 'var(--font-mono)', fontSize: 12,
            color: 'var(--muted-foreground)',
          }}>
            <span>same intent · "what can we do with the checkout module?"</span>
            <div className="toggle" style={{ marginLeft: 'auto', display: 'flex', gap: 4, padding: 3, background: 'var(--muted)', borderRadius: 8 }}>
              <button onClick={() => setMode('off')} style={toggleBtn(mode === 'off', false)}>pathrule off</button>
              <button onClick={() => setMode('on')} style={toggleBtn(mode === 'on', true)}>pathrule on</button>
            </div>
          </div>

          <div className="problem-stats" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', padding: 28, gap: 24 }}>
            <StatBox label="tool calls" value={toolCalls} suffix="" trend={mode === 'on' ? 'good' : 'bad'} />
            <StatBox label="files read" value={filesRead} suffix="" trend={mode === 'on' ? 'good' : 'bad'} />
            <StatBox label="input tokens" value={tokens} suffix="k" trend={mode === 'on' ? 'good' : 'bad'} />
          </div>

          {/* stable-height transcript */}
          <div translate="no" className="problem-transcript" style={{
            borderTop: '1px solid var(--border)',
            background: 'var(--background-subtle)',
            fontFamily: 'var(--font-mono)',
            fontSize: 12.5,
            lineHeight: 1.7,
            padding: '20px 24px',
            color: 'var(--muted-foreground)',
            height: 200,
            boxSizing: 'border-box',
            overflow: 'hidden',
          }}>
            {mode === 'off' ? (
              <>
                <div>→ reading apps/web/checkout/index.tsx</div>
                <div>→ reading apps/web/checkout/schema.ts</div>
                <div>→ reading apps/web/checkout/payment.tsx</div>
                <div>→ reading apps/web/components/button.tsx</div>
                <div>→ reading apps/web/assets/icons.ts <span style={{ color: 'var(--destructive)' }}>// still guessing</span></div>
                <div style={{ color: 'var(--destructive)' }}>✗ wrong: placed coupon under total (legacy field, unused)</div>
              </>
            ) : (
              <>
                <div>→ hook matched /apps/web/checkout</div>
                <div style={{ color: 'var(--success)' }}>✓ inlined memory: "Checkout Field Map" (2.1 KB)</div>
                <div style={{ color: 'var(--success)' }}>✓ rule applied: coupons live on lineItem, never total</div>
                <div>→ one read: apps/web/checkout/index.tsx</div>
                <div style={{ color: 'var(--success)' }}>✓ correct on first try, no extra lookups</div>
                <div style={{ opacity: 0.4 }}>&nbsp;</div>
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function toggleBtn(active, isGreen) {
  return {
    fontFamily: 'var(--font-mono)',
    fontSize: 11,
    padding: '5px 10px',
    borderRadius: 5,
    border: 0,
    cursor: 'pointer',
    background: active ? (isGreen ? 'hsl(212 92% 58% / 0.18)' : 'var(--popover)') : 'transparent',
    color: active ? (isGreen ? 'hsl(212 92% 58%)' : 'var(--foreground)') : 'var(--muted-foreground)',
    transition: 'all .15s',
  };
}

function StatBox({ label, value, suffix, trend }) {
  return (
    <div>
      <div className="mono stat-label" style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--muted-foreground)' }}>
        {label}
      </div>
      <div className="stat-value" style={{
        fontSize: 40, fontWeight: 600, letterSpacing: '-0.03em',
        marginTop: 8,
        color: trend === 'good' ? 'hsl(152 60% 55%)' : 'var(--foreground)',
        fontVariantNumeric: 'tabular-nums',
        transition: 'color .3s',
      }}>
        {value}{suffix}
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
// Features (expanded)
// ───────────────────────────────────────────────────────────────
function Features() {
  const features = [
    {
      title: 'Path scoped context',
      body: 'Knowledge is tied to paths in your repo, not a global dump. Editing a file in /apps/web only pulls what matters there. Narrower the path, higher the signal.',
      demo: <PathDemo />,
    },
    {
      title: 'Memory, rules, skills',
      body: 'Three shapes for three needs. Memories capture facts. Rules guard invariants. Skills encode repeatable procedures. Each one routed to the moment it is useful.',
      demo: <KindsDemo />,
    },
    {
      title: 'Works with your AI tools',
      body: 'One MCP server. Claude Code, Cursor, Codex, Windsurf, all read from the same team knowledge, with the same permissions. No per tool configuration drift.',
      demo: <ToolsDemo />,
    },
    {
      title: 'Smaller bills, faster answers',
      body: 'Deliver only what the task needs. In real sessions, teams see around 85% fewer input tokens and 5 to 8 times shorter wall clock time on knowledge heavy tasks.',
      demo: <TokenDemo />,
    },
    {
      title: 'Just in time delivery',
      body: 'Context is injected before the first tool call, not asked for mid flight. No round trips, no "let me search". The model sees what the team knows, exactly when it matters.',
      demo: <TimingDemo />,
    },
    {
      title: 'Zero config auto detection',
      body: 'Pathrule matches the current task to the narrowest relevant path automatically. No tagging, no manual prompts, no "did you remember to reference the doc?"',
      demo: <AutoDemo />,
    },
  ];

  return (
    <section id="features" className="section-pad features-section" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="reveal" style={{ maxWidth: 720, marginBottom: 56 }}>
          <div className="eyebrow">features</div>
          <h2 className="section">Built for developer teams, not demos.</h2>
          <p className="lede">
            Pathrule treats context as a first class routing problem. Every design choice
            trades bloat for precision, and global for scoped.
          </p>
        </div>

        <div className="grid-3">
          {features.map((f, i) => (
            <div key={i} className="card reveal" style={{ padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
              <div style={{ height: 200, background: 'var(--background-subtle)', borderBottom: '1px solid var(--border)', padding: 20, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
                {f.demo}
              </div>
              <div style={{ padding: 22 }}>
                <h3 className="card-title">{f.title}</h3>
                <p>{f.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PathDemo() {
  const paths = ['/', '/apps', '/apps/web', '/apps/web/checkout', '/apps/web/checkout/payment'];
  const [active, setActive] = useState(3);
  useEffect(() => {
    const id = setInterval(() => setActive(a => (a + 1) % paths.length), 1400);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, width: '100%' }}>
      {paths.map((p, i) => (
        <div key={p} style={{
          padding: '5px 8px',
          marginLeft: i * 8,
          color: i === active ? 'var(--foreground)' : 'var(--muted-foreground)',
          background: i === active ? 'hsl(212 92% 58% / 0.10)' : 'transparent',
          borderLeft: i === active ? '2px solid hsl(212 92% 58%)' : '2px solid transparent',
          transition: 'all .4s',
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        }}>
          {p}
        </div>
      ))}
    </div>
  );
}

function KindsDemo() {
  const kinds = [
    { k: 'memory', label: 'Checkout Field Map', color: 'hsl(212 92% 58%)' },
    { k: 'rule', label: 'coupons on lineItem only', color: 'hsl(35 92% 58%)' },
    { k: 'skill', label: 'migration workflow', color: 'hsl(280 60% 65%)' },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, width: '100%' }}>
      {kinds.map(k => (
        <div key={k.k} style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '9px 11px',
          background: 'var(--card)',
          border: '1px solid var(--border)',
          borderRadius: 6,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 1, background: k.color }} />
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, textTransform: 'uppercase', color: 'var(--muted-foreground)', letterSpacing: '0.1em', width: 46 }}>
            {k.k}
          </span>
          <span style={{ fontSize: 12, color: 'var(--foreground)' }}>{k.label}</span>
        </div>
      ))}
    </div>
  );
}

function ToolsDemo() {
  const tools = ['claude code', 'cursor', 'codex', 'windsurf'];
  const [active, setActive] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setActive(a => (a + 1) % tools.length), 1100);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8, width: '100%' }}>
      {tools.map((t, i) => (
        <div key={t} style={{
          padding: '12px 14px',
          background: 'var(--card)',
          border: '1px solid',
          borderColor: i === active ? 'hsl(212 92% 58% / 0.5)' : 'var(--border)',
          borderRadius: 6,
          fontFamily: 'var(--font-mono)',
          fontSize: 11.5,
          color: i === active ? 'var(--foreground)' : 'var(--muted-foreground)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          transition: 'all .3s',
        }}>
          <span>{t}</span>
          <span style={{
            width: 6, height: 6, borderRadius: 3,
            background: i === active ? 'hsl(212 92% 58%)' : 'hsl(0 0% 24%)',
            transition: 'all .3s',
          }} />
        </div>
      ))}
    </div>
  );
}

// stable-height bar chart, static heights (no flicker)
function TokenDemo() {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 20, width: '100%', height: 140, padding: '22px 10px 0' }}>
      <Bar label="off" height={100} color="hsl(0 0% 40%)" value="36k" />
      <Bar label="on" height={14} color="hsl(212 92% 58%)" value="4.5k" />
    </div>
  );
}

function Bar({ label, height, color, value }) {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, height: '100%' }}>
      <div style={{ flex: 1, width: '100%', display: 'flex', alignItems: 'flex-end' }}>
        <div style={{
          width: '100%',
          height: `${height}%`,
          background: color,
          borderRadius: '4px 4px 0 0',
          position: 'relative',
        }}>
          <div style={{
            position: 'absolute', top: -20, left: 0, right: 0, textAlign: 'center',
            fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--foreground)',
          }}>{value}</div>
        </div>
      </div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--muted-foreground)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
        pathrule {label}
      </div>
    </div>
  );
}

function TimingDemo() {
  const [step, setStep] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setStep(s => (s + 1) % 4), 900);
    return () => clearInterval(id);
  }, []);
  const rows = [
    'prompt received',
    'match path scope',
    'inline context',
    'tool call fires',
  ];
  return (
    <div style={{ width: '100%', fontFamily: 'var(--font-mono)', fontSize: 11.5 }}>
      {rows.map((r, i) => (
        <div key={r} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '5px 0' }}>
          <span style={{
            width: 8, height: 8, borderRadius: 2,
            background: i <= step ? 'hsl(212 92% 58%)' : 'hsl(0 0% 20%)',
            transition: 'background .3s',
          }} />
          <span style={{ color: i <= step ? 'var(--foreground)' : 'var(--muted-foreground)' }}>
            {r}
          </span>
          <span style={{ marginLeft: 'auto', color: 'var(--muted-foreground)' }}>
            {i === 3 ? '< 2ms' : `+${i * 1}ms`}
          </span>
        </div>
      ))}
    </div>
  );
}

function AutoDemo() {
  return (
    <div style={{ width: '100%', fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--muted-foreground)' }}>
      <div style={{ marginBottom: 6, color: 'var(--foreground)' }}>→ intent detected</div>
      <div style={{ paddingLeft: 14 }}>scope: <span style={{ color: 'hsl(212 92% 62%)' }}>/apps/web/checkout</span></div>
      <div style={{ paddingLeft: 14 }}>depth: 3</div>
      <div style={{ paddingLeft: 14 }}>match: 2 memories · 1 rule</div>
      <div style={{ marginTop: 8, color: 'hsl(212 92% 62%)' }}>✓ no manual tagging required</div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
// Self-healing / Suggestions spotlight
// ───────────────────────────────────────────────────────────────
function SelfHealing() {
  const pillars = [
    {
      title: 'Eight detectors, always on',
      body: 'Dead paths. Shipped milestones. Drifted packages. Expired dates. Zero usage. Empty nodes. Conflicting titles. Untouched entries. Each on its own cadence, each tuned to a kind of staleness we have actually seen in the wild.',
      color: 'hsl(212 92% 58%)',
      icon: (
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="9" /><path d="M12 3v18" /><path d="M3 12h18" />
        </svg>
      ),
    },
    {
      title: 'One click, AI repair',
      body: 'When a suggestion fires, hand it to Claude Code, Cursor, Codex or Windsurf right from the card. The assistant opens the file, makes the edit, writes back. You review the diff.',
      color: 'hsl(280 60% 65%)',
      icon: (
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M11 2 L13 8 L19 10 L13 12 L11 18 L9 12 L3 10 L9 8 Z" />
          <path d="M18 3v3M21 4.5h-3" />
        </svg>
      ),
    },
    {
      title: 'Seven day undo',
      body: 'Archive is a soft delete. Everything you remove sits quietly for a week, with a chip at the bottom of the tab to bring it back the instant you change your mind.',
      color: 'hsl(35 92% 58%)',
      icon: (
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 12a9 9 0 1 0 3-6.7" /><path d="M3 4v5h5" />
        </svg>
      ),
    },
    {
      title: 'Self tuning signal',
      body: 'We watch what you keep and what you archive. When a detector fires noisy, its confidence drops on its own. You never wade through junk to find the real issues.',
      color: 'hsl(152 60% 55%)',
      icon: (
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3" />
          <path d="M1 14h6M9 8h6M17 16h6" />
        </svg>
      ),
    },
  ];

  return (
    <section id="selfhealing" className="section-pad" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="reveal" style={{ maxWidth: 760, marginBottom: 48 }}>
          <div className="eyebrow">self healing</div>
          <h2 className="section">Memory that keeps itself honest.</h2>
          <p className="lede">
            Paths get renamed. Milestones ship. Rules drift. Pathrule sweeps every memory
            and rule around the clock, flags what has gone stale, and hands the fix to
            your AI. One click. Done. The team's knowledge stays sharp without anyone babysitting it.
          </p>
        </div>

        <div className="reveal">
          <SuggestionsShowcase />
        </div>

        <div className="reveal grid-4 selfheal-pillars" style={{ marginTop: 28 }}>
          {pillars.map((p) => (
            <div key={p.title} className="card selfheal-pillar" style={{ padding: 22 }}>
              <div style={{
                width: 32, height: 32, borderRadius: 8,
                background: p.color.replace(')', ' / 0.12)'),
                border: `1px solid ${p.color.replace(')', ' / 0.28)')}`,
                color: p.color,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 14,
              }}>
                {p.icon}
              </div>
              <div style={{ fontSize: 14.5, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 6 }}>
                {p.title}
              </div>
              <div style={{ fontSize: 13, color: 'var(--muted-foreground)', lineHeight: 1.55 }}>
                {p.body}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SuggestionsShowcase() {
  const focused = {
    kind: 'Memory',
    title: 'Shared Package — Source of Truth',
    reason: 'Mentions 3 file paths that no longer exist in the repo.',
    detector: 'dead path ref',
    severity: 'CRITICAL',
    kindColor: 'hsl(212 92% 68%)',
  };

  return (
    <div className="suggestions-mock" style={{
      position: 'relative',
      borderRadius: 14, overflow: 'hidden',
      border: '1px solid var(--border)',
      background: 'hsl(0 0% 6%)',
      boxShadow: '0 40px 80px -20px rgb(0 0 0 / 0.55), 0 0 0 1px hsl(0 0% 14%)',
      textAlign: 'left',
      padding: '26px 26px 22px',
    }}>
      {/* header — just the essentials */}
      <div className="sug-header" style={{
        display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap',
        marginBottom: 20,
      }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontSize: 14, fontWeight: 500, letterSpacing: '-0.01em' }}>Suggestions</span>
          <span style={{
            fontSize: 10.5, fontWeight: 600, letterSpacing: '0.02em',
            padding: '2px 8px', borderRadius: 999,
            background: 'hsl(358 70% 55% / 0.14)',
            color: 'hsl(358 70% 68%)',
            border: '1px solid hsl(358 70% 55% / 0.32)',
          }}>23</span>
        </div>

        <span className="sug-resolve-btn" style={{
          marginLeft: 'auto',
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '7px 14px 7px 10px', borderRadius: 8,
          background: 'linear-gradient(180deg, hsl(212 92% 60%), hsl(212 92% 50%))',
          border: '1px solid hsl(212 92% 44%)',
          color: 'white', fontSize: 12.5, fontWeight: 500, letterSpacing: '-0.01em',
          boxShadow: '0 0 0 3px hsl(212 92% 58% / 0.15)',
        }}>
          <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
          Let AI resolve all
        </span>
        <span className="sug-via" style={{ fontSize: 11.5, color: 'hsl(0 0% 50%)' }}>
          via <span style={{ color: 'var(--foreground)' }}>Claude Code</span>
        </span>
      </div>

      {/* one focused card (real content) */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div className="sug-focused" style={{
          padding: '16px 18px', borderRadius: 10,
          background: 'hsl(0 0% 7.5%)',
          border: '1px solid hsl(358 70% 55% / 0.3)',
          animation: 'stagger .5s ease both, sugGlow 3s ease-in-out .8s infinite',
        }}>
          {/* chips */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10, flexWrap: 'wrap' }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '2px 8px', borderRadius: 4,
              background: 'hsl(0 0% 10%)', border: '1px solid hsl(0 0% 15%)',
              color: focused.kindColor, fontSize: 10.5, fontFamily: 'var(--font-mono)', letterSpacing: '0.04em',
            }}>
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>
              </svg>
              {focused.kind}
            </span>
            <span style={{
              padding: '2px 8px', borderRadius: 4,
              background: 'hsl(358 70% 55% / 0.14)',
              color: 'hsl(358 70% 68%)',
              border: '1px solid hsl(358 70% 55% / 0.32)',
              fontSize: 9.5, fontFamily: 'var(--font-mono)', fontWeight: 600,
              letterSpacing: '0.08em',
            }}>{focused.severity}</span>
            <span className="mono" style={{ fontSize: 10.5, color: 'hsl(0 0% 42%)', letterSpacing: '0.04em' }}>
              detector: <span style={{ color: 'hsl(0 0% 62%)' }}>{focused.detector}</span>
            </span>
          </div>

          <div style={{ fontSize: 14.5, fontWeight: 500, color: 'var(--foreground)', letterSpacing: '-0.01em', marginBottom: 6 }}>
            {focused.title}
          </div>
          <div style={{ fontSize: 13, color: 'hsl(0 0% 70%)', lineHeight: 1.55, marginBottom: 14 }}>
            {focused.reason}
          </div>

          {/* single Fix with AI pill — focal action */}
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '7px 14px', borderRadius: 6,
            background: 'hsl(212 92% 58% / 0.14)',
            border: '1px solid hsl(212 92% 58% / 0.4)',
            color: 'hsl(212 92% 72%)', fontSize: 12.5, fontWeight: 500,
          }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
              <path d="M11 2 L13 8 L19 10 L13 12 L11 18 L9 12 L3 10 L9 8 Z"/>
              <path d="M18 3v3M21 4.5h-3"/>
            </svg>
            Fix with AI
          </span>
        </div>

        {/* skeleton placeholders */}
        {[0, 1].map((i) => (
          <div key={i} className="sug-skeleton" style={{
            padding: '16px 18px', borderRadius: 10,
            background: 'hsl(0 0% 6.5%)',
            border: '1px solid hsl(0 0% 11%)',
            opacity: 0.55,
            animation: `stagger .55s ease ${0.18 + i * 0.1}s both`,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <div style={{ height: 15, width: 58, background: 'hsl(0 0% 12%)', borderRadius: 4 }} />
              <div style={{ height: 15, width: 48, background: `hsl(${i === 0 ? '358 70% 55%' : '35 92% 58%'} / 0.12)`, border: `1px solid hsl(${i === 0 ? '358 70% 55%' : '35 92% 58%'} / 0.28)`, borderRadius: 4 }} />
              <div style={{ height: 8, width: 100, background: 'hsl(0 0% 11%)', borderRadius: 3, marginLeft: 'auto' }} />
            </div>
            <div style={{ height: 11, width: `${[62, 54][i]}%`, background: 'hsl(0 0% 14%)', borderRadius: 3, marginBottom: 8 }} />
            <div style={{ height: 7, width: '90%', background: 'hsl(0 0% 10%)', borderRadius: 3, marginBottom: 5 }} />
            <div style={{ height: 7, width: `${[72, 68][i]}%`, background: 'hsl(0 0% 10%)', borderRadius: 3 }} />
          </div>
        ))}
      </div>

      <style>{`
        @keyframes sugGlow {
          0%, 100% { box-shadow: 0 0 0 3px hsl(358 70% 55% / 0.06); }
          50%      { box-shadow: 0 0 0 6px hsl(358 70% 55% / 0.10); }
        }
      `}</style>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
// Organization Presence (live collaborators, conflict detection)
// ───────────────────────────────────────────────────────────────
function Organization() {
  const members = [
    { name: 'Alex',    tool: 'Claude Code', node: '/apps/web/checkout', color: 'hsl(212 92% 58%)', conflict: false },
    { name: 'Jordan',  tool: 'Cursor',     node: '/apps/web/checkout/payment', color: 'hsl(35 92% 58%)', conflict: true },
    { name: 'Morgan',  tool: 'Codex',      node: '/services/api/orders', color: 'hsl(152 60% 52%)', conflict: false },
    { name: 'Riley',   tool: 'Claude Code', node: '/packages/ui/button', color: 'hsl(280 60% 65%)', conflict: false },
  ];

  return (
    <section id="organization" className="section-pad" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="reveal" style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">organization</div>
          <h2 className="section">See who's working where, in real time.</h2>
          <p className="lede">
            Invite teammates into a shared workspace. Pathrule tracks who is active with which AI tool on which
            area of the project, so two agents editing the same node don't silently clobber each other.
          </p>
        </div>

        <div className="reveal card" style={{ padding: 0, overflow: 'hidden' }}>
          <div className="org-header" style={{
            padding: '14px 18px',
            borderBottom: '1px solid var(--border)',
            display: 'flex', alignItems: 'center', gap: 12,
            fontFamily: 'var(--font-mono)', fontSize: 12,
            color: 'var(--muted-foreground)',
          }}>
            <span>active collaborators</span>
            <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: 'hsl(212 92% 58%)' }} />
              4 online
            </span>
          </div>
          {members.map((m, i) => (
            <div key={m.name} className="org-row" style={{
              display: 'grid',
              gridTemplateColumns: '200px 140px 1fr auto',
              gap: 20,
              padding: '14px 18px',
              borderTop: i === 0 ? 'none' : '1px solid var(--border)',
              alignItems: 'center',
            }}>
              <div className="org-who" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{
                  width: 28, height: 28, borderRadius: 14,
                  background: m.color,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 11, color: 'var(--primary-foreground)', fontWeight: 600,
                }}>{m.name[0]}</span>
                <span style={{ fontSize: 13.5 }}>{m.name}</span>
              </div>
              <span className="mono org-tool" style={{ fontSize: 12, color: 'var(--muted-foreground)' }}>{m.tool}</span>
              <span className="mono org-node" style={{ fontSize: 12, color: 'var(--foreground)', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.node}</span>
              {m.conflict ? (
                <span className="badge org-badge" style={{ background: 'hsl(35 92% 58% / 0.12)', color: 'hsl(35 92% 58%)', borderColor: 'hsl(35 92% 58% / 0.28)' }}>
                  overlap warning
                </span>
              ) : (
                <span className="badge badge-success org-badge">clear</span>
              )}
            </div>
          ))}
        </div>

        <div className="reveal org-alert" style={{
          marginTop: 20,
          padding: '16px 20px',
          background: 'hsl(35 92% 58% / 0.06)',
          border: '1px solid hsl(35 92% 58% / 0.22)',
          borderRadius: 10,
          fontSize: 13.5,
          color: 'var(--foreground)',
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: 'hsl(35 92% 58%)', flexShrink: 0 }} />
          <span>
            <strong>Overlap detected.</strong> <span style={{ color: 'var(--muted-foreground)' }}>
              Jordan and Alex are both editing the checkout area with different AI tools.
              Pathrule surfaces this before conflicting writes reach the repo.
            </span>
          </span>
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────
// Permissions
// ───────────────────────────────────────────────────────────────
function Permissions() {
  const matrix = [
    { role: 'Owner',  read: true, write: true, manage: true, settings: true },
    { role: 'Admin',  read: true, write: true, manage: true, settings: true },
    { role: 'Member', read: true, write: true, manage: false, settings: false },
    { role: 'Viewer', read: true, write: false, manage: false, settings: false },
  ];
  const Cell = ({ on }) => (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: 20, height: 20, borderRadius: 4,
      background: on ? 'hsl(212 92% 58% / 0.14)' : 'var(--muted)',
      color: on ? 'hsl(212 92% 62%)' : 'hsl(0 0% 30%)',
      fontFamily: 'var(--font-mono)', fontSize: 12,
    }}>{on ? '✓' : '—'}</span>
  );
  return (
    <section id="permissions" className="section-pad" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="reveal" style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">permissions</div>
          <h2 className="section">You decide who writes the team's memory.</h2>
          <p className="lede">
            Four built in roles, plus per node overrides. Lock down sensitive areas so only senior engineers
            can publish rules, while everyone can still read and contribute memories where appropriate.
          </p>
        </div>

        <div className="perm-grid" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 24 }}>
          <div className="reveal card" style={{ padding: 0, overflow: 'hidden' }}>
            <div className="perm-matrix-header" style={{
              display: 'grid',
              gridTemplateColumns: '1.4fr repeat(4, 1fr)',
              padding: '14px 18px',
              borderBottom: '1px solid var(--border)',
              fontFamily: 'var(--font-mono)', fontSize: 11,
              color: 'var(--muted-foreground)', textTransform: 'uppercase', letterSpacing: '0.08em',
            }}>
              <span>Role</span>
              <span>Read</span>
              <span>Write</span>
              <span>Manage</span>
              <span>Settings</span>
            </div>
            {matrix.map((r, i) => (
              <div key={r.role} className="perm-matrix-row" style={{
                display: 'grid',
                gridTemplateColumns: '1.4fr repeat(4, 1fr)',
                padding: '14px 18px',
                borderTop: i === 0 ? 'none' : '1px solid var(--border)',
                alignItems: 'center',
                fontSize: 13.5,
              }}>
                <span style={{ fontWeight: 500 }}>{r.role}</span>
                <Cell on={r.read} />
                <Cell on={r.write} />
                <Cell on={r.manage} />
                <Cell on={r.settings} />
              </div>
            ))}
          </div>

          <div className="reveal card">
            <h3 className="card-title">Per node overrides</h3>
            <p style={{ marginBottom: 16 }}>
              Walk the tree and grant or revoke permissions for any folder or file. Overrides cascade to
              children by default, with opt out per node.
            </p>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--muted-foreground)', lineHeight: 2 }}>
              <div>/services/billing · <span style={{ color: 'hsl(212 92% 62%)' }}>admins only write</span></div>
              <div>/docs/onboarding · <span style={{ color: 'hsl(152 60% 55%)' }}>everyone writes</span></div>
              <div>/infra · <span style={{ color: 'hsl(35 92% 58%)' }}>viewer for juniors</span></div>
              <div>/packages/ui · <span style={{ color: 'hsl(280 60% 65%)' }}>inherits from root</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────
// Analytics / Impact Summary (matches attached screenshot)
// ───────────────────────────────────────────────────────────────
function Analytics() {
  // lucide icons (inline)
  const LIcon = ({ children, color, size = 16 }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24"
         fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      {children}
    </svg>
  );
  const IconScale = (p) => <LIcon {...p}><path d="M13 5h8"/><path d="M13 12h8"/><path d="M13 19h8"/><path d="m3 17 2 2 4-4"/><path d="m3 7 2 2 4-4"/></LIcon>;
  const IconBookOpen = (p) => <LIcon {...p}><path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></LIcon>;
  const IconFileText = (p) => <LIcon {...p}><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></LIcon>;
  const IconTarget = (p) => <LIcon {...p}><path d="M10.5 22H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v6"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="m14 20 2 2 4-4"/></LIcon>;

  // gentle seeded PRNG so patterns are stable across reloads but look random
  const seeded = (seed) => {
    let s = seed;
    return () => {
      s = (s * 9301 + 49297) % 233280;
      return s / 233280;
    };
  };

  // build a natural-looking series — tight ±10% band around baseline
  const natural = (seed, baseline, drift, volatility, spikeChance, n = 40) => {
    const rand = seeded(seed);
    const out = [];
    let v = baseline;
    const floor = baseline * 0.9;
    const ceil = baseline * 1.1;
    // dampen volatility so it fits inside the tight band
    const vol = volatility * 0.35;
    for (let i = 0; i < n; i++) {
      // strong mean-reversion keeps us close to baseline
      const pull = (baseline - v) * 0.35;
      v += pull + (Math.sin(i * drift) * 0.4 + (rand() - 0.5)) * vol;
      // very occasional gentle uptick
      if (rand() < spikeChance * 0.5) v += rand() * vol * 1.5;
      v = Math.min(ceil, Math.max(floor, v));
      out.push(+v.toFixed(2));
    }
    return out;
  };

  const tiles = [
    {
      val: '1,338', label: 'Rule reminded', sub: 'times your rules were hit',
      color: 'hsl(212 92% 58%)',
      Icon: IconScale,
      pts: natural(7, 10, 0.7, 2.2, 0.12),
    },
    {
      val: '225', label: 'Memory shown', sub: 'times your memories fired',
      color: 'hsl(152 60% 52%)',
      Icon: IconBookOpen,
      pts: natural(41, 5, 0.4, 1.4, 0.22),
    },
    {
      val: '69%', label: 'File scoped info', sub: '132 / 191 files covered',
      color: 'hsl(35 92% 58%)',
      Icon: IconFileText,
      pts: natural(113, 8, 1.1, 2.6, 0.14),
    },
    {
      val: '64%', label: 'Got it right first try', sub: '122 files, 69 revisits',
      color: 'hsl(280 60% 65%)',
      Icon: IconTarget,
      pts: natural(257, 12, 0.55, 3.2, 0.1),
    },
  ];

  // sparkline — locked to upper band, small amplitude = calm, high line
  const Sparkline = ({ color, pts }) => {
    const mean = pts.reduce((a, b) => a + b, 0) / pts.length;
    const w = 200, h = 44;
    // line lives between y=6 (top) and y=22 (~middle); small wiggle room
    const topY = 6, bottomY = 22;
    const maxDev = Math.max(...pts.map(p => Math.abs(p - mean))) || 1;
    const coords = pts.map((p, i) => {
      const x = (i / (pts.length - 1)) * w;
      // normalize deviation to [-1, 1], then map to [topY..bottomY]
      const norm = (p - mean) / maxDev; // [-1..1]
      const y = topY + ((norm + 1) / 2) * (bottomY - topY);
      return [x, y];
    });
    // smooth curve via catmull-rom → bezier
    const d = coords.reduce((acc, [x, y], i, arr) => {
      if (i === 0) return `M${x.toFixed(2)} ${y.toFixed(2)}`;
      const [px, py] = arr[i - 1];
      const [ppx, ppy] = arr[i - 2] || arr[i - 1];
      const [nx, ny] = arr[i + 1] || arr[i];
      const t = 0.22;
      const c1x = px + (x - ppx) * t;
      const c1y = py + (y - ppy) * t;
      const c2x = x - (nx - px) * t;
      const c2y = y - (ny - py) * t;
      return `${acc} C${c1x.toFixed(2)} ${c1y.toFixed(2)}, ${c2x.toFixed(2)} ${c2y.toFixed(2)}, ${x.toFixed(2)} ${y.toFixed(2)}`;
    }, '');
    const area = `${d} L${w} ${h} L0 ${h} Z`;
    const [ex, ey] = coords[coords.length - 1];
    const gid = `sg-${color.replace(/[^a-z0-9]/gi, '')}`;
    return (
      <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ width: '100%', height: 44, display: 'block', marginTop: 14 }}>
        <defs>
          <linearGradient id={gid} x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor={color} stopOpacity="0.28" />
            <stop offset="100%" stopColor={color} stopOpacity="0" />
          </linearGradient>
        </defs>
        <path d={area} fill={`url(#${gid})`} />
        <path d={d} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        <circle cx={ex} cy={ey} r="2.4" fill={color} />
        <circle cx={ex} cy={ey} r="5" fill={color} opacity="0.18" />
      </svg>
    );
  };

  return (
    <section id="analytics" className="section-pad" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="reveal" style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">analytics</div>
          <h2 className="section">Measure the impact of every reminder.</h2>
          <p className="lede">
            Pathrule reports back on itself. See which rules fire most, which memories are actually being
            used, and how much of your workspace is covered by team knowledge.
          </p>
        </div>

        {/* hero summary card */}
        <div className="reveal card analytics-hero" style={{
          padding: 28,
          marginBottom: 20,
          background: 'linear-gradient(180deg, var(--card), var(--background-subtle))',
          position: 'relative',
          overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', inset: 0,
            background: 'radial-gradient(ellipse 600px 300px at 100% 0%, hsl(212 92% 58% / 0.05), transparent 60%)',
            pointerEvents: 'none',
          }} />
          <div style={{ position: 'relative' }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--muted-foreground)', marginBottom: 14 }}>
              ● pathrule · impact summary
            </div>
            <div className="impact-number" style={{ fontSize: 64, fontWeight: 600, letterSpacing: '-0.04em', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
              1,563
            </div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--muted-foreground)', marginTop: 12 }}>
              reminders delivered · last 30 days
            </div>
            <p style={{ fontSize: 14, color: 'var(--muted-foreground)', marginTop: 16, maxWidth: 560, lineHeight: 1.6 }}>
              In the last 30 days, Pathrule reminded the AI <span style={{ color: 'var(--foreground)' }}>1,338 times</span> of your rules and
              shared your memories <span style={{ color: 'var(--foreground)' }}>225 times</span>.
            </p>

            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 20 }}>
              <StatPill color="hsl(212 92% 58%)" label="225 memory reminders" />
              <StatPill color="hsl(152 60% 52%)" label="1,338 rule reminders" />
              <StatPill color="hsl(35 92% 58%)" label="69% files covered" />
              <StatPill color="hsl(280 60% 65%)" label="67% workspace coverage" />
            </div>
          </div>
        </div>

        {/* added-this-month strip */}
        <div className="reveal analytics-strip" style={{
          padding: '14px 22px',
          background: 'var(--card)',
          border: '1px solid var(--border)',
          borderRadius: 999,
          marginBottom: 20,
          display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap',
        }}>
          <span className="mono" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--muted-foreground)' }}>
            ↑ added this month
          </span>
          <span style={{ fontSize: 13.5 }}>
            <span style={{ color: 'hsl(212 92% 58%)' }}>●</span>&nbsp;
            <strong>32</strong> <span className="muted">new memory</span>
          </span>
          <span style={{ fontSize: 13.5 }}>
            <span style={{ color: 'hsl(152 60% 52%)' }}>●</span>&nbsp;
            <strong>12</strong> <span className="muted">new rule</span>
          </span>
          <span style={{ fontSize: 13.5 }}>
            <span style={{ color: 'hsl(280 60% 65%)' }}>●</span>&nbsp;
            <strong>5</strong> <span className="muted">new skill</span>
          </span>
        </div>

        {/* metric tiles */}
        <div className="grid-4 reveal">
          {tiles.map(t => (
            <div key={t.label} className="card analytics-tile" style={{ padding: 20 }}>
              <div style={{
                width: 32, height: 32, borderRadius: 6,
                background: `${t.color.replace(')', ' / 0.14)')}`,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 16,
              }}>
                <t.Icon color={t.color} size={16} />
              </div>
              <div className="tile-val" style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.03em', fontVariantNumeric: 'tabular-nums' }}>
                {t.val}
              </div>
              <div style={{ fontSize: 13, marginTop: 6, color: 'var(--foreground)' }}>{t.label}</div>
              <div style={{ fontSize: 12, marginTop: 2, color: 'var(--muted-foreground)' }}>{t.sub}</div>
              <Sparkline color={t.color} pts={t.pts} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StatPill({ color, label }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '6px 11px',
      borderRadius: 999,
      background: `${color.replace(')', ' / 0.10)')}`,
      border: `1px solid ${color.replace(')', ' / 0.22)')}`,
      fontSize: 12,
      color: 'var(--foreground)',
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 3, background: color }} />
      {label}
    </span>
  );
}

// ───────────────────────────────────────────────────────────────
// How it works
// ───────────────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    {
      num: '01',
      title: 'Capture',
      body: 'Your team writes memories, rules and skills once, inside the Pathrule desktop app. Each one gets attached to a path in your repo (file or folder).',
      code: `pathrule_write_memory({
  node_path: "/apps/web/checkout",
  title: "Checkout Field Map",
  body: "Coupons live on lineItem..."
})`
    },
    {
      num: '02',
      title: 'Route',
      body: 'When an AI tool starts a session, Pathrule matches the current task to the narrowest path that applies. A small router picks what belongs in context.',
      code: `→ user: "edit the checkout flow"
→ match:  /apps/web/checkout  (depth 3)
→ route:  1 memory · 1 rule
→ budget: 2.1 KB · inlined`
    },
    {
      num: '03',
      title: 'Deliver',
      body: 'Context is injected at exactly the right moment, before the first tool call. No extra round trips, no "wait, let me search". The model sees what the team knows.',
      code: `SYSTEM (injected):
📌 Checkout Field Map
   "Coupons live on lineItem,
    never on total. Legacy
    total.coupon is a no op..."`
    },
  ];

  return (
    <section id="how" className="section-pad" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="reveal" style={{ maxWidth: 720, marginBottom: 56 }}>
          <div className="eyebrow">how it works</div>
          <h2 className="section">Three steps. No tagging, no prompts.</h2>
          <p className="lede">
            Team knowledge is captured once, routed by path, and delivered just in time.
            No one has to remember to @ mention a doc.
          </p>
        </div>

        <div style={{ display: 'grid', gap: 20 }}>
          {steps.map((s, i) => (
            <div key={i} className="reveal how-row" style={{
              display: 'grid',
              gridTemplateColumns: '80px 1fr 1.2fr',
              gap: 32,
              padding: '28px 0',
              borderTop: i === 0 ? 'none' : '1px solid var(--border)',
              alignItems: 'start',
            }}>
              <div className="mono step-num" style={{ fontSize: 12, color: 'var(--muted-foreground)', letterSpacing: '0.1em' }}>
                step {s.num}
              </div>
              <div className="step-body-wrap">
                <h3 style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', margin: '0 0 10px' }}>{s.title}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--muted-foreground)', margin: 0, maxWidth: 420 }}>{s.body}</p>
              </div>
              <div className="code-wrap" style={{ minWidth: 0 }}>
                <CodeBlock code={s.code} />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CodeBlock({ code }) {
  return (
    <div style={{
      background: 'var(--background-subtle)',
      border: '1px solid var(--border)',
      borderRadius: 8,
      padding: '16px 18px',
      fontFamily: 'var(--font-mono)',
      fontSize: 12.5,
      lineHeight: 1.7,
      color: 'var(--muted-foreground)',
      whiteSpace: 'pre-wrap',
      overflowX: 'auto',
    }}>
      {code.split('\n').map((line, i) => (
        <div key={i}>
          <span style={{ color: 'hsl(0 0% 30%)', marginRight: 14, userSelect: 'none' }}>{String(i+1).padStart(2, ' ')}</span>
          <span>{line}</span>
        </div>
      ))}
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
// Proof / Results
// ───────────────────────────────────────────────────────────────
function Proof() {
  const metrics = [
    { val: '5×', label: 'fewer tool calls', sub: 'agent stops thrashing' },
    { val: '10×', label: 'fewer files read', sub: 'goes to the right file' },
    { val: '85%', label: 'fewer input tokens', sub: 'context without bloat' },
    { val: '5–8×', label: 'faster wall clock', sub: 'one shot, not explore' },
  ];
  return (
    <section id="proof" className="section-pad" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="reveal" style={{ maxWidth: 720, marginBottom: 56 }}>
          <div className="eyebrow">results</div>
          <h2 className="section">Measured in real sessions, not lab benchmarks.</h2>
          <p className="lede">
            Numbers from a reference task replayed with and without Pathrule on a production repo.
            Every metric held below baseline is a ship gate.
          </p>
        </div>

        <div className="grid-4 reveal proof-grid">
          {metrics.map((m, i) => (
            <div key={i} className="proof-card" style={{
              padding: '28px 24px',
              background: 'var(--card)',
              border: '1px solid var(--border)',
              borderRadius: 10,
            }}>
              <div className="proof-val" style={{ fontSize: 44, fontWeight: 600, letterSpacing: '-0.04em', color: 'hsl(212 92% 62%)', fontVariantNumeric: 'tabular-nums' }}>
                {m.val}
              </div>
              <div style={{ fontSize: 13, marginTop: 10, color: 'var(--foreground)' }}>{m.label}</div>
              <div style={{ fontSize: 12, marginTop: 4, color: 'var(--muted-foreground)' }}>{m.sub}</div>
            </div>
          ))}
        </div>

        <div className="reveal proof-cost" style={{
          marginTop: 32,
          padding: '20px 24px',
          background: 'var(--card)',
          border: '1px solid var(--border)',
          borderRadius: 10,
          display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap',
        }}>
          <div style={{ flex: 1, minWidth: 280 }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--muted-foreground)', marginBottom: 6 }}>
              cost per reference task
            </div>
            <div className="cost-val" style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums' }}>
              <span style={{ color: 'var(--muted-foreground)', textDecoration: 'line-through' }}>$0.71</span>
              <span style={{ margin: '0 10px', color: 'var(--muted-foreground)' }}>→</span>
              <span style={{ color: 'hsl(152 60% 55%)' }}>$0.14</span>
            </div>
          </div>
          <div style={{ flex: 2, minWidth: 280, fontSize: 13, color: 'var(--muted-foreground)', lineHeight: 1.6 }}>
            Around 80% cost reduction on knowledge heavy edits. Same model, same task, same correctness target,
            just fewer round trips and tighter payloads.
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────
// Supported tools
// ───────────────────────────────────────────────────────────────
function Tools() {
  const tools = [
    { name: 'Claude Code', sub: 'Anthropic', status: 'Supported' },
    { name: 'Cursor', sub: 'Anysphere', status: 'Supported' },
    { name: 'Codex CLI', sub: 'OpenAI', status: 'Supported' },
    { name: 'Windsurf', sub: 'Codeium', status: 'Beta' },
  ];
  return (
    <section className="section-pad-sm tools-section" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="reveal" style={{ marginBottom: 32 }}>
          <div className="eyebrow">one server, every tool</div>
          <h2 className="section" style={{ fontSize: 32 }}>MCP native. No per tool drift.</h2>
        </div>
        <div className="grid-4 reveal">
          {tools.map(t => (
            <div key={t.name} className="tool-card" style={{
              padding: 20,
              background: 'var(--card)',
              border: '1px solid var(--border)',
              borderRadius: 10,
            }}>
              <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.015em' }}>{t.name}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted-foreground)', marginTop: 4 }}>{t.sub}</div>
              <div style={{ marginTop: 14 }}>
                <span className={t.status === 'Beta' ? 'badge badge-info' : 'badge badge-success'}>{t.status}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────
// Security
// ───────────────────────────────────────────────────────────────
function Security() {
  const points = [
    { title: 'Your code never leaves your machine', body: 'Pathrule does not read, scan or upload repository source. Only the memories, rules and skills your team explicitly writes are stored.' },
    { title: 'Not processed on our servers', body: 'Team knowledge sits in an encrypted cloud store with row level security. It is delivered to your AI tool locally at hook time, with zero network calls in the hot path.' },
    { title: 'Session tokens, not service keys', body: 'Every API call runs on your user JWT. Permissions are enforced at the database level. A compromised client cannot escalate.' },
    { title: 'You own the data', body: 'Export to markdown, delete a workspace, move to another org, full control, no lock in. Memories are just content.' },
  ];
  return (
    <section id="security" className="section-pad" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="reveal" style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">security & privacy</div>
          <h2 className="section">We never see your source code.</h2>
          <p className="lede">
            Pathrule is not a code scanner. We don't index your repo, we don't upload your files,
            and we don't send your source to any LLM. Only what your team consciously writes down.
          </p>
        </div>
        <div className="grid-2">
          {points.map((p, i) => (
            <div key={i} className="card reveal">
              <h3 className="card-title">{p.title}</h3>
              <p>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────
// Roadmap
// ───────────────────────────────────────────────────────────────
function Roadmap() {
  const items = [
    { phase: 'Shipped', color: 'hsl(212 92% 58%)', title: 'Hook based injection', body: 'Path scoped memory, rule and skill delivery into Claude Code.' },
    { phase: 'Shipped', color: 'hsl(212 92% 58%)', title: 'Multi tool MCP', body: 'Cursor, Codex, Windsurf on the same server.' },
    { phase: 'Shipped', color: 'hsl(212 92% 58%)', title: 'Team workspaces', body: 'Org wide knowledge with per node permissions.' },
    { phase: 'Now', color: 'hsl(212 92% 58%)', title: 'Closed beta', body: 'Weekly invites. We ship, we measure, we tune.' },
    { phase: 'Next', color: 'hsl(0 0% 45%)', title: 'Semantic relevance', body: 'Beyond lexical matches. Catch conceptual intents without filenames.' },
    { phase: 'Next', color: 'hsl(0 0% 45%)', title: 'Cross workspace knowledge', body: 'Shared memory layer across teams in the same org.' },
  ];
  return (
    <section id="roadmap" className="section-pad" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="reveal" style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">roadmap</div>
          <h2 className="section">What's live, what's coming.</h2>
        </div>
        <div style={{ display: 'grid', gap: 0 }}>
          {items.map((it, i) => (
            <div key={i} className="reveal roadmap-row" style={{
              display: 'grid',
              gridTemplateColumns: '120px 200px 1fr',
              gap: 24,
              padding: '20px 0',
              borderTop: '1px solid var(--border)',
              alignItems: 'center',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 6, height: 6, borderRadius: 3, background: it.color }} />
                <span className="mono" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--muted-foreground)' }}>{it.phase}</span>
              </div>
              <div className="roadmap-title" style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.015em' }}>{it.title}</div>
              <div className="roadmap-body" style={{ fontSize: 13.5, color: 'var(--muted-foreground)', lineHeight: 1.6 }}>{it.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────
// Founder note
// ───────────────────────────────────────────────────────────────
function Founder() {
  return (
    <section className="section-pad" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container" style={{ maxWidth: 780 }}>
        <div className="reveal">
          <div className="eyebrow">a note from the team</div>
          <blockquote className="founder-quote" style={{
            fontSize: 22,
            lineHeight: 1.5,
            letterSpacing: '-0.015em',
            margin: '0 0 28px',
            color: 'var(--foreground)',
            fontWeight: 500,
          }}>
            "We built Pathrule because we were tired of being the bottleneck.
            Every time a teammate used an AI tool and got the wrong answer,
            we found ourselves saying 'oh yeah, that field is a no op, we should have
            told you.' Pathrule is that 'should have', automated, for the whole team."
          </blockquote>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <img
              src="src/img/sertanhelvaci.png"
              alt="Sertan Helvacı, founder of Pathrule"
              width="48"
              height="48"
              loading="lazy"
              decoding="async"
              style={{
                width: 48, height: 48, borderRadius: 24,
                objectFit: 'cover',
                border: '1px solid var(--border)',
                boxShadow: 'var(--shadow-sm)',
              }}
            />
            <div>
              <div style={{ fontSize: 14, fontWeight: 500 }}>Sertan Helvacı</div>
              <div style={{ fontSize: 12.5, color: 'var(--muted-foreground)' }}>Founder, Pathrule</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────
// Changelog preview
// ───────────────────────────────────────────────────────────────
function Changelog() {
  const items = [
    { date: '2026-04-20', tag: 'ship', title: 'Hook filename inline', body: 'Prompts that reference a file now get the full memory body injected locally. Zero network, around 2ms.' },
    { date: '2026-04-20', tag: 'ship', title: 'Context response hygiene', body: 'Shape slimmed, inline top 1 hybrid, session ETag cache on warm reads.' },
    { date: '2026-04-12', tag: 'ship', title: 'Unified get_context', body: 'Router driven depth replaces the legacy understand tool. One tool, four modes.' },
    { date: '2026-03-28', tag: 'ship', title: 'Activity intelligence', body: 'Structured per task logs feed session digests back into context.' },
  ];
  return (
    <section id="changelog" className="section-pad-sm" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="reveal" style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', marginBottom: 32 }}>
          <div>
            <div className="eyebrow">changelog</div>
            <h2 className="section" style={{ fontSize: 32 }}>Shipped this month.</h2>
          </div>
        </div>
        <div style={{ display: 'grid', gap: 0 }}>
          {items.map((it, i) => (
            <div key={i} className="reveal changelog-row" style={{
              display: 'grid',
              gridTemplateColumns: '140px 1fr',
              gap: 24,
              padding: '18px 0',
              borderTop: '1px solid var(--border)',
              alignItems: 'start',
            }}>
              <div className="changelog-meta">
                <div className="mono" style={{ fontSize: 12, color: 'var(--muted-foreground)' }}>{it.date}</div>
                <span className="badge" style={{ marginTop: 6 }}>{it.tag}</span>
              </div>
              <div>
                <div className="changelog-title" style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.015em', marginBottom: 4 }}>{it.title}</div>
                <div className="changelog-body" style={{ fontSize: 13.5, color: 'var(--muted-foreground)', lineHeight: 1.6 }}>{it.body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────
// FAQ
// ───────────────────────────────────────────────────────────────
function FAQ() {
  const qs = [
    { q: 'Does Pathrule read my source code?', a: 'No. Pathrule never reads, scans or uploads repository source. Only memories, rules and skills your team explicitly writes are stored in the cloud. Your codebase stays on your machine.' },
    { q: 'Do you send my files to an LLM?', a: 'No. Pathrule delivers team knowledge into your AI tool. We are not the LLM provider. Your chosen tool (Claude Code, Cursor, Codex) handles its own model calls, on its own terms.' },
    { q: 'How is it different from just putting everything in CLAUDE.md?', a: 'CLAUDE.md loads everything, every session. Signal drops as content grows. Pathrule routes by path and only delivers what matches the task at hand. Smaller context, higher hit rate.' },
    { q: 'Which AI tools work with it today?', a: 'Claude Code, Cursor and Codex CLI are fully supported. Windsurf is in beta. Any MCP compatible client can connect.' },
    { q: 'What does a "memory" actually look like?', a: 'A short piece of markdown with a title, attached to a path in your repo. It could be a schema note, a gotcha, a past incident writeup. Anything your team would want the AI to know before editing that area.' },
    { q: 'How do I join the beta?', a: 'Join the waitlist with your work email. We invite teams in small batches so we can onboard each one carefully.' },
    { q: 'Is there a self hosted option?', a: 'Not yet. Self hosted is on the long term roadmap. For the closed beta, Pathrule runs on our managed cloud with row level security and encrypted storage.' },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="section-pad" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container faq-wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 64 }}>
        <div className="reveal">
          <div className="eyebrow">faq</div>
          <h2 className="section" style={{ fontSize: 36 }}>Frequently asked.</h2>
          <p className="lede" style={{ fontSize: 15 }}>
            Can't find what you're looking for? Drop us a line when you join the waitlist.
            We read everything.
          </p>
        </div>
        <div className="reveal">
          {qs.map((item, i) => (
            <div key={i} className="faq-item" style={{
              borderTop: i === 0 ? '1px solid var(--border)' : 'none',
              borderBottom: '1px solid var(--border)',
            }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', textAlign: 'left',
                padding: '18px 0',
                background: 'transparent', border: 0,
                color: 'var(--foreground)',
                cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                gap: 20,
              }}>
                <span style={{ fontSize: 15, fontWeight: 500, letterSpacing: '-0.01em' }}>{item.q}</span>
                <span style={{
                  width: 20, height: 20,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--muted-foreground)',
                  transition: 'transform .2s',
                  transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                  fontSize: 18, fontWeight: 300,
                }}>+</span>
              </button>
              <div style={{
                overflow: 'hidden',
                maxHeight: open === i ? 400 : 0,
                transition: 'max-height .3s ease-out',
              }}>
                <div style={{ padding: '0 0 20px 0', fontSize: 14, color: 'var(--muted-foreground)', lineHeight: 1.65, maxWidth: 620 }}>
                  {item.a}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────
// Waitlist CTA
// ───────────────────────────────────────────────────────────────
function Waitlist() {
  const [email, setEmail] = useState('');
  const [honey, setHoney] = useState('');
  const [status, setStatus] = useState('idle');
  const [errorMsg, setErrorMsg] = useState('');
  const submit = async (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setStatus('submitting');
    setErrorMsg('');
    try {
      const res = await fetch('https://formsubmit.co/ajax/hello@layrup.com', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          email,
          _honey: honey,
          _subject: `New waitlist signup: ${email}`,
          _template: 'table',
          _captcha: 'false',
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || data.success === 'false') {
        throw new Error(data.message || 'Submission failed');
      }
      setStatus('done');
    } catch (err) {
      setStatus('idle');
      setErrorMsg('Something went wrong. Please try again or email hello@layrup.com.');
    }
  };
  return (
    <section id="waitlist" className="section-pad" style={{ borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="reveal waitlist-card" style={{
          position: 'relative',
          background: 'var(--card)',
          border: '1px solid var(--border)',
          borderRadius: 14,
          padding: '64px 48px',
          textAlign: 'center',
          overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', inset: 0,
            background: 'radial-gradient(ellipse 600px 300px at 50% 0%, hsl(212 92% 58% / 0.06), transparent 60%)',
            pointerEvents: 'none',
          }} />
          <div style={{ position: 'relative' }}>
            <span className="badge badge-success" style={{ marginBottom: 20 }}>Closed Beta · invitations rolling</span>
            <h2 className="section" style={{ fontSize: 44, margin: '0 auto 16px', maxWidth: 640 }}>
              Get early access.
            </h2>
            <p className="lede" style={{ margin: '0 auto 32px', textAlign: 'center' }}>
              We're onboarding teams in small batches. Drop your work email and we'll be in touch
              when it's your turn.
            </p>
            {status === 'done' ? (
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                padding: '14px 24px',
                borderRadius: 10,
                background: 'hsl(212 92% 58% / 0.10)',
                border: '1px solid hsl(212 92% 58% / 0.3)',
                color: 'hsl(212 92% 62%)',
                fontSize: 14,
              }}>
                <span>✓</span> You're on the list. We'll reach out soon.
              </div>
            ) : (
              <>
                <form onSubmit={submit} style={{
                  display: 'inline-flex', gap: 8,
                  padding: 5,
                  background: 'var(--muted)',
                  border: '1px solid var(--border)',
                  borderRadius: 10,
                  maxWidth: 460, width: '100%',
                }}>
                  <input
                    type="email"
                    value={email}
                    onChange={e => setEmail(e.target.value)}
                    placeholder="you@work.com"
                    required
                    style={{
                      flex: 1,
                      background: 'transparent', border: 0, outline: 'none',
                      color: 'var(--foreground)',
                      fontSize: 14,
                      padding: '0 14px',
                      fontFamily: 'inherit',
                    }}
                  />
                  {/* honeypot — hidden from users, bots fill it */}
                  <input
                    type="text"
                    name="_honey"
                    value={honey}
                    onChange={e => setHoney(e.target.value)}
                    tabIndex={-1}
                    autoComplete="off"
                    aria-hidden="true"
                    style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }}
                  />
                  <button type="submit" className="btn btn-primary" disabled={status === 'submitting'}>
                    {status === 'submitting' ? 'Submitting…' : 'Request invite'}
                  </button>
                </form>
                {errorMsg && (
                  <div style={{
                    marginTop: 14,
                    fontSize: 13,
                    color: 'var(--destructive)',
                  }}>
                    {errorMsg}
                  </div>
                )}
              </>
            )}
            <div className="mono" style={{ marginTop: 20, fontSize: 11, color: 'var(--muted-foreground)', letterSpacing: '0.06em' }}>
              no credit card · no pricing during beta · we never see your code
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────
// Footer
// ───────────────────────────────────────────────────────────────
function Footer() {
  const [investorOpen, setInvestorOpen] = useState(false);
  const links = [
    { label: 'Changelog', href: '#changelog' },
    { label: 'Investor deck', href: '#', onClick: (e) => { e.preventDefault(); setInvestorOpen(true); } },
    { label: 'Contact', href: 'mailto:hello@layrup.com' },
  ];
  return (
    <footer>
      <div className="container footer-grid" style={{
        display: 'grid',
        gridTemplateColumns: '1.4fr 1fr',
        gap: 48,
        paddingBottom: 48,
        alignItems: 'start',
      }}>
        <div>
          <a href="#" className="wordmark"><span className="dot" /> pathrule</a>
          <p style={{ fontSize: 13, color: 'var(--muted-foreground)', marginTop: 14, lineHeight: 1.6, maxWidth: 360 }}>
            Team knowledge, delivered to every AI session.
          </p>
          <div style={{
            marginTop: 20,
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 10px',
            borderRadius: 999,
            background: 'hsl(152 60% 52% / 0.10)',
            border: '1px solid hsl(152 60% 52% / 0.22)',
            fontSize: 12,
            color: 'var(--success)',
            fontFamily: 'var(--font-mono)',
          }}>
            <span style={{
              width: 7, height: 7, borderRadius: 999,
              background: 'var(--success)',
              boxShadow: '0 0 0 3px hsl(152 60% 52% / 0.18)',
            }} />
            <span>All systems operational</span>
          </div>
        </div>

        <ul style={{
          listStyle: 'none', padding: 0, margin: 0,
          display: 'flex', flexDirection: 'column', gap: 12,
          justifySelf: 'end',
          minWidth: 180,
        }}>
          {links.map(l => (
            <li key={l.label}>
              <a
                href={l.href}
                onClick={l.onClick}
                style={{
                  fontSize: 13.5,
                  color: 'var(--foreground)',
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  transition: 'color .15s',
                  cursor: 'pointer',
                }}
                onMouseEnter={e => e.currentTarget.style.color = 'var(--brand)'}
                onMouseLeave={e => e.currentTarget.style.color = 'var(--foreground)'}
              >
                {l.label}
              </a>
            </li>
          ))}
        </ul>
      </div>
      <div className="container footer-bottom" style={{
        paddingTop: 24,
        borderTop: '1px solid var(--border)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontSize: 12, color: 'var(--muted-foreground)',
      }}>
        <div>© 2026 Pathrule · Closed Beta</div>
        <div className="mono" style={{ fontSize: 11 }}>v0.15 · last ship 2026-04-20</div>
      </div>
      {investorOpen && <InvestorModal onClose={() => setInvestorOpen(false)} />}
    </footer>
  );
}

// ───────────────────────────────────────────────────────────────
// Investor access modal
// ───────────────────────────────────────────────────────────────
function InvestorModal({ onClose }) {
  const [email, setEmail] = useState('');
  const [company, setCompany] = useState('');
  const [status, setStatus] = useState('idle');
  const [errorMsg, setErrorMsg] = useState('');

  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [onClose]);

  const submit = async (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setStatus('submitting');
    setErrorMsg('');
    try {
      const res = await fetch('https://formsubmit.co/ajax/hello@layrup.com', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          email,
          company,
          _subject: `Investor inquiry: ${email}`,
          _template: 'table',
          _captcha: 'false',
          form_type: 'investor_inquiry',
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || data.success === 'false') throw new Error(data.message || 'Submission failed');
      setStatus('done');
    } catch (err) {
      setStatus('idle');
      setErrorMsg('Something went wrong. Please try again or email hello@layrup.com directly.');
    }
  };

  return (
    <div className="investor-backdrop" onClick={onClose} role="dialog" aria-modal="true" aria-labelledby="investor-modal-title">
      <div className="investor-modal" onClick={(e) => e.stopPropagation()}>
        <button className="investor-modal-close" onClick={onClose} aria-label="Close">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M18 6 6 18M6 6l12 12" />
          </svg>
        </button>

        {status === 'done' ? (
          <div className="investor-modal-success">
            <div className="investor-modal-success-icon">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M20 6 9 17l-5-5" />
              </svg>
            </div>
            <h3 id="investor-modal-title" style={{ margin: 0 }}>Thanks — we'll be in touch.</h3>
            <p style={{ margin: 0 }}>
              Expect an email from us within one business day with deck access, recent metrics, and a link to book a call.
            </p>
          </div>
        ) : (
          <>
            <span className="badge badge-brand">Investors</span>
            <h3 id="investor-modal-title">Our deck is available on request.</h3>
            <p>
              We share the deck, recent metrics and traction notes directly with investors we're actively talking to.
              Leave your work email and we'll reach out shortly.
            </p>
            <form onSubmit={submit}>
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="you@fund.com"
                required
                autoFocus
              />
              <button
                type="submit"
                className="btn btn-primary"
                disabled={status === 'submitting'}
                style={{ height: 36 }}
              >
                {status === 'submitting' ? 'Sending…' : 'Request access'}
              </button>
            </form>
            <input
              type="text"
              value={company}
              onChange={(e) => setCompany(e.target.value)}
              tabIndex={-1}
              autoComplete="off"
              aria-hidden="true"
              style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }}
            />
            {errorMsg && <div className="investor-modal-error">{errorMsg}</div>}
            <div className="mono" style={{ marginTop: 14, fontSize: 11, color: 'var(--muted-foreground)', letterSpacing: '0.04em' }}>
              no spam · we only reach out about pathrule
            </div>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { ProblemSection, Features, HowItWorks, Proof, Tools, Security, Roadmap, Founder, Changelog, FAQ, Waitlist, Footer, Organization, Permissions, Analytics, SelfHealing });