// Reusable marketing section primitives + section components.

const Wordmark = ({ size = 'md' }) => {
  const px = size === 'lg' ? 22 : size === 'sm' ? 14 : 16;
  const sq = size === 'lg' ? 28 : size === 'sm' ? 18 : 22;
  return (
    <a href="#top" className="inline-flex items-center gap-2 group">
      <span
        className="grid place-items-center rounded-[6px] hairline overflow-hidden"
        style={{
          width: sq, height: sq,
          background: 'var(--ink)',
        }}
        aria-label="Kiroshi app icon"
      >
        <img
          src="uploads/kiroshi-icon.jpg"
          alt=""
          className="w-full h-full object-cover"
          loading="eager"
        />
      </span>
      <span className="font-display font-semibold tracking-tight ink" style={{ fontSize: px }}>
        Kiroshi
      </span>
    </a>
  );
};

const Eyebrow = ({ children }) => (
  <div className="inline-flex items-center gap-2 text-[11px] font-mono uppercase tracking-[0.14em] muted">
    <span className="inline-block w-3 h-px" style={{ background: 'var(--border-strong)' }}></span>
    {children}
  </div>
);

const DevelopmentBadge = ({ children = 'In development', dark = false }) => (
  <span
    className="inline-flex items-center rounded-full border px-2.5 py-1 text-[10.5px] font-mono uppercase leading-none"
    style={{
      color: dark ? 'oklch(0.86 0.004 260)' : 'var(--accent-ink)',
      background: dark ? 'oklch(1 0 0 / 0.06)' : 'var(--accent-soft)',
      borderColor: dark ? 'var(--dark-border)' : 'oklch(0.78 0.05 232)',
    }}
  >
    {children}
  </span>
);

const SectionHeader = ({ eyebrow, title, blurb, align = 'left' }) => (
  <div className={`max-w-2xl ${align === 'center' ? 'mx-auto text-center' : ''}`}>
    {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
    <h2 className={`font-display text-[34px] md:text-[44px] leading-[1.05] ink ${eyebrow ? 'mt-3' : 'mt-0'}`} style={{ textWrap: 'balance' }}>
      {title}
    </h2>
    {blurb && (
      <p className="mt-4 text-[16px] md:text-[17px] leading-relaxed ink-2" style={{ textWrap: 'pretty' }}>
        {blurb}
      </p>
    )}
  </div>
);

const Section = ({ children, className = '', id }) => (
  <section id={id} className={`px-6 md:px-10 ${className}`}>
    <div className="max-w-[1200px] mx-auto">{children}</div>
  </section>
);

// ─── HEADER ──────────────────────────────────────────────
const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header
      className="sticky top-0 z-50 transition-all"
      style={{
        background: scrolled ? 'oklch(0.985 0.002 80 / 0.78)' : 'transparent',
        backdropFilter: scrolled ? 'saturate(140%) blur(10px)' : 'none',
        WebkitBackdropFilter: scrolled ? 'saturate(140%) blur(10px)' : 'none',
        borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
      }}
    >
      <div className="max-w-[1200px] mx-auto px-6 md:px-10 h-16 flex items-center justify-between">
        <Wordmark />
        <nav className="hidden md:flex items-center gap-7 text-[13.5px] ink-2">
          {['Product', 'Privacy', 'Pricing', 'Roadmap'].map((label) => (
            <a key={label} href={`#${label.toLowerCase()}`} className="hover:ink transition-colors">
              {label}
            </a>
          ))}
        </nav>
        <div className="flex items-center gap-2">
          <a href="#download" className="btn btn-ghost hidden sm:inline-flex">Download</a>
        </div>
      </div>
    </header>
  );
};

// ─── HERO ────────────────────────────────────────────────
const HERO_THUMBS = [
  {
    bg: 'linear-gradient(135deg, oklch(0.22 0.01 260), oklch(0.13 0.006 260))',
    detail: 'linear-gradient(90deg, transparent 0 12%, oklch(0.60 0.04 245 / 0.28) 12% 13%, transparent 13% 100%)',
  },
  {
    bg: 'linear-gradient(135deg, oklch(0.28 0.03 245), oklch(0.15 0.01 260))',
    detail: 'repeating-linear-gradient(0deg, transparent 0 11px, oklch(0.72 0.05 245 / 0.14) 11px 12px)',
  },
  {
    bg: 'linear-gradient(135deg, oklch(0.24 0.02 170), oklch(0.14 0.008 260))',
    detail: 'radial-gradient(circle at 20% 28%, oklch(0.76 0.08 170 / 0.28), transparent 19%)',
  },
  {
    bg: 'linear-gradient(135deg, oklch(0.26 0.02 20), oklch(0.14 0.008 260))',
    detail: 'linear-gradient(135deg, transparent 0 45%, oklch(0.78 0.08 20 / 0.18) 45% 55%, transparent 55%)',
  },
  {
    bg: 'linear-gradient(135deg, oklch(0.27 0.02 80), oklch(0.15 0.008 260))',
    detail: 'repeating-linear-gradient(135deg, transparent 0 12px, oklch(0.78 0.06 80 / 0.13) 12px 14px)',
  },
];

const HeroAbstractThumb = ({ tone = 0, wide = false }) => {
  const style = HERO_THUMBS[tone % HERO_THUMBS.length];
  return (
    <div
      className={`relative h-[72px] md:h-[80px] rounded-[7px] overflow-hidden ${wide ? 'sm:col-span-2' : ''}`}
      style={{ background: style.bg, boxShadow: '0 0 0 1px oklch(1 0 0 / 0.06) inset' }}
    >
      <div className="absolute inset-0 opacity-[0.55]" style={{ backgroundImage: style.detail }} />
      <div
        className="absolute inset-0 pointer-events-none"
        style={{ background: 'linear-gradient(to bottom right, oklch(1 0 0 / 0.07), transparent 55%)' }}
      />
      <div
        className="absolute rounded-[4px]"
        style={{
          left: '22%',
          top: '28%',
          bottom: '32%',
          width: '42%',
          background: 'oklch(1 0 0 / 0.06)',
        }}
      />
      <div
        className="absolute rounded-[4px]"
        style={{
          right: '18%',
          top: '22%',
          height: '18%',
          width: '28%',
          background: 'oklch(1 0 0 / 0.05)',
        }}
      />
    </div>
  );
};

const HeroDateRow = ({ day, count, thumbs }) => (
  <div className="border-t" style={{ borderColor: 'oklch(1 0 0 / 0.09)' }}>
    <div className="flex items-center justify-between px-5 md:px-6 pt-4 pb-3">
      <h2 className="font-display text-[18px] md:text-[20px] font-semibold" style={{ color: 'oklch(0.94 0.004 260)' }}>
        {day}
      </h2>
      <span className="font-mono text-[12px]" style={{ color: 'oklch(0.62 0.006 260)' }}>{count}</span>
    </div>
    <div className="grid grid-cols-2 sm:grid-cols-6 lg:grid-cols-12 gap-3 px-5 md:px-6 pb-4">
      {thumbs.map((thumb, i) => (
        <HeroAbstractThumb key={i} {...thumb} />
      ))}
    </div>
  </div>
);

const HeroSidebarSection = ({ title, items = [], tags }) => (
  <div className="mt-5">
    <div className="px-4 text-[11px] font-mono uppercase tracking-[0.18em]" style={{ color: 'oklch(0.62 0.006 260)' }}>
      {title}
    </div>
    {items.length > 0 && (
      <div className="mt-2.5 space-y-0.5">
        {items.map((item, i) => {
          const label = typeof item === 'string' ? item : item.label;
          const active = typeof item === 'object' && item.active;
          const icon = typeof item === 'object' ? item.icon : null;
          const IconCmp =
            typeof item === 'string' ? I.Folder :
            icon === 'clock' ? I.Clock :
            icon === 'bug' ? I.Bug :
            icon === 'trash' ? I.Trash :
            I.Folder;
          return (
            <div
              key={`${title}-${label}-${i}`}
              className="flex items-center gap-3 rounded-full px-4 h-9 text-[13.5px]"
              style={{
                background: active ? 'oklch(0.34 0.006 260)' : 'transparent',
                color: active ? 'oklch(0.98 0.002 260)' : 'oklch(0.83 0.006 260)',
              }}
            >
              <IconCmp size={15} className={active ? '' : 'opacity-80'} />
              <span>{label}</span>
            </div>
          );
        })}
      </div>
    )}
    {tags && tags.length > 0 && (
      <div className={`space-y-0.5 ${items.length === 0 ? 'mt-2.5' : 'mt-5'}`}>
        {tags.map((tag) => (
          <div
            key={tag}
            className="flex items-center gap-3 rounded-full px-4 h-9 text-[13.5px]"
            style={{ color: 'oklch(0.83 0.006 260)' }}
          >
            <span className="font-mono text-[15px] opacity-55">#</span>
            <span>{tag}</span>
          </div>
        ))}
        <div className="mt-1 px-4 pt-0.5">
          <span className="text-[12.5px]" style={{ color: 'oklch(0.55 0.006 260)' }}>
            Browse all tags…
          </span>
        </div>
      </div>
    )}
  </div>
);

const HeroAppPreview = ({ compact = false }) => {
  const rows = [
    {
      day: 'Thursday, April 30, 2026',
      count: 12,
      thumbs: [{ tone: 0, wide: true }, { tone: 2, wide: true }, { tone: 4, wide: true }, { tone: 1, wide: true }, { tone: 3, wide: true }, { tone: 0, wide: true }],
    },
    {
      day: 'Tuesday, April 28, 2026',
      count: 8,
      thumbs: [{ tone: 1, wide: true }, { tone: 0, wide: true }, { tone: 3, wide: true }, { tone: 2, wide: true }, { tone: 4, wide: true }, { tone: 0, wide: true }],
    },
  ];

  const tagList = ['application', 'code', 'macos', 'terminal', 'cloud', 'error', 'library', 'login'];

  return (
    <div
      className="mx-auto flex flex-col overflow-hidden rounded-[24px] hero-shadow"
      style={{
        background: 'oklch(0.13 0.006 260)',
        border: '1px solid oklch(0.36 0.006 260)',
        height: compact ? 520 : 'min(680px, calc(100vh - 104px))',
        minHeight: compact ? 520 : 560,
      }}
    >
      <div className="flex items-center h-10 px-4 border-b" style={{ borderColor: 'oklch(1 0 0 / 0.08)', background: 'oklch(0.16 0.006 260)' }}>
        <div className="flex items-center gap-2">
          <span className="traffic r"></span>
          <span className="traffic y"></span>
          <span className="traffic g"></span>
        </div>
        <div className="ml-6 font-display font-semibold text-[15px]" style={{ color: 'oklch(0.73 0.004 260)' }}>
          Kiroshi
        </div>
      </div>
      <div className={`grid ${compact ? 'lg:grid-cols-[170px_minmax(0,1fr)]' : 'md:grid-cols-[220px_minmax(0,1fr)]'} flex-1 min-h-0`}>
        <aside className={`${compact ? 'hidden lg:flex' : 'hidden md:flex'} flex-col p-3 pb-4`} style={{ background: 'oklch(0.17 0.006 260)' }}>
          <div className="flex items-center gap-3 px-4 h-11 shrink-0" style={{ color: 'oklch(0.96 0.004 260)' }}>
            <I.Sidebar size={16} />
            <span className="font-medium text-[14px]">Kiroshi</span>
          </div>
          <div className="min-h-0 flex-1 overflow-y-auto scroll-y">
            <HeroSidebarSection title="Filters" items={[{ label: 'Library', active: true }]} />
            <HeroSidebarSection title="Library" items={[{ label: 'Recent', icon: 'clock' }, { label: 'Failed', icon: 'bug' }]} />
            <HeroSidebarSection title="Storage" items={[{ label: 'Trash', icon: 'trash' }]} />
            <HeroSidebarSection title="Tags" items={[]} tags={tagList} />
          </div>
          <div className="mt-auto flex items-center gap-3 px-4 h-11 shrink-0 border-t pt-2" style={{ borderColor: 'oklch(1 0 0 / 0.06)', color: 'oklch(0.88 0.004 260)' }}>
            <I.Settings size={16} />
            <span className="text-[14px]">Settings</span>
          </div>
        </aside>

        <main className="relative min-w-0 flex flex-col border-l min-h-0" style={{ borderColor: 'oklch(1 0 0 / 0.08)' }}>
          <div
            className="flex flex-wrap items-center gap-x-3 gap-y-2 px-4 md:px-5 py-3 border-b shrink-0"
            style={{ borderColor: 'oklch(1 0 0 / 0.09)', color: 'oklch(0.92 0.004 260)' }}
          >
            <div className="flex items-center gap-2 shrink-0">
              <I.Sidebar size={17} className="opacity-70" />
              <span className="font-display font-semibold text-[17px]">Library</span>
            </div>
            <div
              className="flex items-center gap-2.5 h-9 rounded-full px-3 min-w-0"
              style={{
                flex: '1 1 180px',
                maxWidth: compact ? 340 : 420,
                background: 'oklch(0.18 0.006 260)',
                border: '1px solid oklch(1 0 0 / 0.12)',
              }}
            >
              <I.Search size={15} style={{ color: 'oklch(0.52 0.006 260)', flexShrink: 0 }} />
              <span className="text-[14px] truncate select-none" style={{ color: 'oklch(0.52 0.006 260)' }}>
                Search screenshots…
              </span>
              <span
                className="ml-auto text-[10px] font-mono px-1.5 py-0.5 rounded-md shrink-0 hidden sm:inline-block"
                style={{ border: '1px solid oklch(1 0 0 / 0.12)', color: 'oklch(0.58 0.006 260)' }}
              >
                ⌘ + K
              </span>
            </div>
            <div className="flex flex-wrap items-center gap-2 ml-auto">
              <div
                className="inline-flex rounded-full border p-0.5 text-[12px]"
                style={{ borderColor: 'oklch(1 0 0 / 0.12)', color: 'oklch(0.62 0.006 260)' }}
              >
                <span className="px-2.5 py-1">Days</span>
                <span className="px-2.5 py-1 rounded-full" style={{ background: 'oklch(0.78 0.004 260)', color: 'oklch(0.22 0.006 260)' }}>
                  Grid
                </span>
                <span className="px-2.5 py-1">Months</span>
              </div>
              <a href="#download" className="font-display text-[14px] font-semibold px-1 no-underline hover:opacity-90" style={{ color: 'oklch(0.94 0.004 260)' }}>
                Import
              </a>
            </div>
          </div>
          <div className="flex-1 overflow-y-auto scroll-y min-h-0 pb-14">
            {rows.map((row) => (
              <HeroDateRow key={row.day} {...row} />
            ))}
          </div>
          <div
            className="pointer-events-none absolute bottom-3 right-3 left-3 sm:left-auto sm:min-w-[280px] max-w-md sm:max-w-none ml-auto"
            aria-hidden
          >
            <div
              className="pointer-events-auto flex flex-wrap items-center gap-x-3 gap-y-2 rounded-full px-3.5 py-2 border shadow-lg"
              style={{
                background: 'oklch(0.19 0.007 260)',
                borderColor: 'oklch(1 0 0 / 0.12)',
                boxShadow: '0 12px 40px oklch(0 0 0 / 0.45)',
              }}
            >
              <span className="text-[12px] leading-snug" style={{ color: 'oklch(0.82 0.006 260)' }}>
                Sign in to analyse with Kiroshi Cloud
              </span>
              <span
                className="text-[12px] font-semibold rounded-full px-2.5 py-1"
                style={{ background: 'oklch(0.94 0.004 260)', color: 'oklch(0.18 0.006 260)' }}
              >
                Sign in
              </span>
              <span className="text-[11px] font-mono uppercase tracking-wide" style={{ color: 'oklch(0.58 0.006 260)' }}>
                Ollama
              </span>
              <button
                type="button"
                className="ml-auto grid place-items-center rounded-full w-7 h-7 border-0 cursor-default bg-transparent"
                style={{ color: 'oklch(0.62 0.006 260)' }}
                tabIndex={-1}
              >
                <I.X size={14} strokeWidth={2} />
              </button>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
};

const HERO_PROOFS = [
  {
    label: 'Search memory',
    body: 'Ask for the error, checkout screen, quote, or layout you remember. Kiroshi searches text and visual context together.',
  },
  {
    label: 'Files untouched',
    body: 'Your screenshots stay where they are. Kiroshi builds a local library and opens the original when you need it.',
  },
  {
    label: 'AI visibility',
    body: 'Each capture shows whether analysis used Kiroshi Cloud or a local provider you configured.',
  },
];

const Hero = () => (
  <Section className="hero-bg pt-10 md:pt-16 pb-20 md:pb-28" id="top">
    <div className="grid lg:grid-cols-[minmax(0,520px)_minmax(0,1fr)] gap-10 lg:gap-14 items-center">
      <div>
        <h1 className="font-display font-semibold text-[46px] md:text-[58px] xl:text-[62px] leading-[0.98] ink" style={{ textWrap: 'balance' }}>
          Find screenshots before context fades.
        </h1>
        <p className="mt-5 text-[17px] md:text-[18px] leading-relaxed ink-2 max-w-[520px]" style={{ textWrap: 'pretty' }}>
          Kiroshi watches your screenshot folders, reads the text and visual context, and gives you
          one organized library you can search by memory, app, date, or meaning.
        </p>

        <div className="mt-8 flex flex-wrap items-center gap-2.5">
          <a href="#download" className="btn btn-primary">
            <I.Apple size={14} />
            Download beta for macOS
          </a>
          <a href="#download" className="btn btn-secondary">
            <I.Windows size={14} />
            Download beta for Windows
          </a>
        </div>

        <div className="mt-4 text-[13px] muted max-w-[480px]">
          Free during beta with 100 AI indexes per month. Local-first library. Cloud or local analysis.
        </div>

        <div className="mt-8 flex flex-wrap gap-x-5 gap-y-2 text-[12.5px] ink-2">
          <span className="inline-flex items-center gap-1.5"><I.Folder size={13} className="muted" /> Library stays on your machine</span>
          <span className="inline-flex items-center gap-1.5"><I.Eye size={13} className="muted" /> Provider always visible</span>
          <span className="inline-flex items-center gap-1.5"><I.Cpu size={13} className="muted" /> Local AI configurable</span>
        </div>
      </div>

      <div className="min-w-0">
        <HeroAppPreview compact />
      </div>
    </div>

    <div className="hero-proof-band mt-16 border-y border-soft py-6 md:py-7">
      <div className="grid gap-6 md:grid-cols-[1.25fr_repeat(3,1fr)] md:items-start">
        <div>
          <div className="inline-flex items-center gap-2 text-[11px] font-mono uppercase tracking-[0.16em] muted">
            Built for people who live in screenshots
          </div>
          <p className="mt-3 font-display text-[24px] md:text-[28px] leading-[1.08] ink" style={{ textWrap: 'balance' }}>
            Your screenshots become an organized record of decisions, references, errors, and work context.
          </p>
        </div>
        {HERO_PROOFS.map((proof) => (
          <div key={proof.label} className="md:border-l md:pl-6" style={{ borderColor: 'var(--border)' }}>
            <div className="font-mono text-[11px] uppercase tracking-[0.14em] muted">{proof.label}</div>
            <p className="mt-2 text-[14px] leading-relaxed ink-2" style={{ textWrap: 'pretty' }}>{proof.body}</p>
          </div>
        ))}
      </div>
    </div>
  </Section>
);

// ─── PROBLEM ─────────────────────────────────────────────
const Problem = () => {
  const examples = [
    'the error from last week',
    'the pricing table I compared',
    'the meeting link in that screenshot',
    'the UI reference from yesterday',
    'the order number I saved quickly',
    'the diagram from the all-hands',
  ];
  return (
    <Section className="py-24 md:py-32" id="problem">
      <SectionHeader
        title="Filenames don’t remember anything for you."
        blurb="Screenshots pile up faster than they get organized. By the time you need one, it lives somewhere between your Desktop, your Downloads folder, and a mystery date."
      />
      <div className="mt-12 grid md:grid-cols-2 gap-x-12 gap-y-3">
        <div className="space-y-2.5">
          {examples.map((q, i) => (
            <div
              key={i}
              className="flex items-center gap-3 px-4 py-3 rounded-lg hairline surface-2"
            >
              <I.Search size={14} className="muted" />
              <span className="text-[14.5px] ink-2">“{q}”</span>
              <span className="ml-auto font-mono text-[10.5px] muted-2">somewhere on disk</span>
            </div>
          ))}
        </div>
        <div className="surface rounded-xl card-shadow border border-soft p-6 md:p-7">
          <div className="text-[12px] font-mono uppercase tracking-wider muted mb-3">
            Your current folder
          </div>
          <div className="font-mono text-[12.5px] leading-relaxed ink-2 space-y-1">
            <div>Screenshot 2026-04-28 at 10.41.22.png</div>
            <div>Screenshot 2026-04-28 at 10.41.46.png</div>
            <div>Screenshot 2026-04-28 at 11.02.18.png</div>
            <div>CleanShot 2026-04-27 at 18.04.png</div>
            <div className="muted-2">… 12,843 more</div>
          </div>
          <div className="mt-6 rounded-lg surface-2 border border-soft p-4 md:p-5">
            <div className="inline-flex items-center text-[11px] font-mono uppercase tracking-[0.14em] muted">
              In Kiroshi
            </div>
            <div className="mt-2 text-[14.5px] ink leading-relaxed" style={{ textWrap: 'pretty' }}>
              Ask in plain language. Get the screenshot. Open the original file from where it has
              always lived.
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
};

// ─── PRODUCT SHOWCASE (alternating feature rows) ─────────
const FeatureRow = ({ eyebrow, title, body, bullets, art, reverse }) => (
  <div className={`grid lg:grid-cols-12 gap-10 lg:gap-14 items-center ${reverse ? 'lg:[&>*:first-child]:order-2' : ''}`}>
    <div className="lg:col-span-5">
      <Eyebrow>{eyebrow}</Eyebrow>
      <h3 className="font-display text-[28px] md:text-[34px] leading-[1.08] mt-3 ink" style={{ textWrap: 'balance' }}>
        {title}
      </h3>
      <p className="mt-4 text-[16px] leading-relaxed ink-2" style={{ textWrap: 'pretty' }}>{body}</p>
      {bullets && (
        <ul className="mt-6 space-y-2.5">
          {bullets.map((b) => (
            <li key={b} className="flex items-start gap-2.5 text-[14.5px] ink-2">
              <I.Check size={14} className="text-accent mt-1" strokeWidth={2} />
              <span>{b}</span>
            </li>
          ))}
        </ul>
      )}
    </div>
    <div className="lg:col-span-7">{art}</div>
  </div>
);

// art: ingestion stream
const IngestionArt = () => (
  <div className="rounded-xl border border-soft surface card-shadow p-5 md:p-6">
    <div className="flex items-center justify-between text-[11px] font-mono uppercase tracking-wider muted mb-4">
      <span>Watcher</span>
      <span className="flex items-center gap-1.5"><span className="inline-block w-1.5 h-1.5 rounded-full pulse-dot" style={{ background: 'oklch(0.65 0.15 145)' }}></span>Live</span>
    </div>
    {[
      { name: 'CleanShot 2026-04-28 at 10.41.png', stage: 'analyzed', ms: '1.4s', tint: 'thumb-tint-graphite' },
      { name: 'Screenshot 2026-04-28 at 10.39.png', stage: 'analyzing', ms: '0.8s', tint: 'thumb-tint-blue' },
      { name: 'Screenshot 2026-04-28 at 10.32.png', stage: 'queued', ms: '-', tint: 'thumb-tint-warm' },
      { name: 'Screenshot 2026-04-28 at 10.18.png', stage: 'queued', ms: '-', tint: 'thumb-stripes' },
    ].map((row, i) => (
      <div key={i} className="grid grid-cols-[40px_minmax(0,1fr)_104px] gap-3 py-3 pl-4 pr-3 border-t border-soft border first:border-t-0">
        <div className={`w-10 h-7 rounded ${row.tint} hairline mt-0.5`}></div>
        <div className="min-w-0 pr-1">
          <div className="font-mono text-[11.5px] leading-snug truncate ink-2">{row.name}</div>
          <div className="text-[11px] leading-snug muted mt-0.5">
            {row.stage === 'analyzed' && <span>OCR · summary · tags · embeddings ready</span>}
            {row.stage === 'analyzing' && <span>Extracting text and visual concepts</span>}
            {row.stage === 'queued' && <span>Waiting for available worker</span>}
          </div>
        </div>
        <div className="text-right self-center pl-2">
          <div className="text-[11px] font-mono whitespace-nowrap"
            style={{
              color:
                row.stage === 'analyzed' ? 'oklch(0.55 0.12 145)' :
                row.stage === 'analyzing' ? 'var(--accent)' : 'var(--muted)'
            }}>
            {row.stage}
          </div>
          <div className="text-[10px] font-mono muted-2 mt-0.5 whitespace-nowrap">{row.ms}</div>
        </div>
      </div>
    ))}
  </div>
);

// art: detail / OCR view
const OCRArt = () => (
  <div className="rounded-xl overflow-hidden hairline" style={{ background: 'var(--dark)', border: '1px solid var(--dark-border)' }}>
    <div className="flex items-center px-3 h-9 border-b" style={{ borderColor: 'var(--dark-border)' }}>
      <div className="flex items-center gap-1.5">
        <span className="traffic r"></span><span className="traffic y"></span><span className="traffic g"></span>
      </div>
      <span className="ml-3 text-[11px]" style={{ color: 'var(--dark-muted)' }}>Detail · CleanShot 2026-04-28 at 10.41.png</span>
    </div>
    <div className="grid grid-cols-2 gap-0">
      <div className="p-4">
        <div className="rounded-md hairline-dark thumb-tint-graphite aspect-[4/3] grid place-items-center">
          <span className="font-mono text-[10px]" style={{ color: 'oklch(0.45 0.005 260)' }}>stripe checkout - team plan</span>
        </div>
      </div>
      <div className="p-4 border-l" style={{ borderColor: 'var(--dark-border)' }}>
        <div className="text-[10px] font-mono uppercase tracking-wider mb-1.5" style={{ color: 'oklch(0.5 0.008 260)' }}>Summary</div>
        <p className="text-[12.5px] leading-relaxed" style={{ color: 'var(--dark-ink)' }}>
          Stripe checkout for the Team plan at $24 per user / month, with comparison to Pro and a SOC 2 trust banner.
        </p>
        <div className="text-[10px] font-mono uppercase tracking-wider mt-4 mb-1.5" style={{ color: 'oklch(0.5 0.008 260)' }}>Tags</div>
        <div className="flex flex-wrap gap-1">
          {['pricing', 'team plan', 'stripe', 'comparison'].map((t) => (
            <span key={t} className="px-1.5 py-0.5 rounded text-[10px] font-mono"
              style={{ background: 'oklch(0.23 0.008 260)', color: 'var(--dark-muted)' }}>{t}</span>
          ))}
        </div>
        <div className="text-[10px] font-mono uppercase tracking-wider mt-4 mb-1.5" style={{ color: 'oklch(0.5 0.008 260)' }}>OCR</div>
        <div className="font-mono text-[11px] leading-snug rounded p-2"
          style={{ background: 'oklch(0.21 0.007 260)', color: 'oklch(0.82 0.005 260)' }}>
          Team plan<br />
          $24 per user / month, billed annually<br />
          Includes 5 seats, advanced sharing, …
        </div>
      </div>
    </div>
  </div>
);

const Showcase = () => (
  <Section className="py-24 md:py-32" id="product">
    <SectionHeader
      eyebrow="The product"
      title="An organized screenshot library that indexes everything."
      blurb="Kiroshi watches your screenshot folders, analyzes new captures in the background, and gives you an Apple Photos-like library you can actually search."
    />
    <div className="mt-16 space-y-24 md:space-y-32">
      <FeatureRow
        eyebrow="Automatic ingestion"
        title="It picks up every screenshot you take, the moment you take it."
        body="Point Kiroshi at your screenshot folders once. From then on, new captures stream into the library, get OCR’d, described, and tagged in the background. Nothing for you to drag, name, or sort."
        bullets={[
          'Watches Desktop, CleanShot, Drop Zone, and any custom folder',
          'OCR plus AI description on every new capture',
          'Resumable indexing and a visible queue',
        ]}
        art={<IngestionArt />}
      />
      <FeatureRow
        reverse
        eyebrow="Detail view"
        title="Every screenshot becomes a small, structured record."
        body="Open any screenshot to see a clean summary, the extracted text, automatic tags, capture metadata, and the indexing status. The original file stays exactly where it is."
        bullets={[
          'Plain-language summary of what’s on screen',
          'Selectable OCR text for fast copying',
          'Provider and on-device or off-device status visible per item',
        ]}
        art={<OCRArt />}
      />
    </div>
  </Section>
);

// ─── SEARCH EXAMPLES ─────────────────────────────────────
const SearchExamples = () => {
  const queries = [
    {
      q: 'error message from last Thursday',
      hits: 3,
      result: { tint: 'thumb-stripes-dark', label: 'TypeError · checkout.tsx', meta: 'Apr 23 · Chrome devtools' },
      tags: ['error', 'devtools', 'typescript'],
    },
    {
      q: 'pricing table with team plan',
      hits: 4,
      result: { tint: 'thumb-tint-graphite', label: 'Stripe · Team $24', meta: 'Apr 28 · Safari' },
      tags: ['pricing', 'team plan', 'comparison'],
    },
    {
      q: 'screenshot with Stripe checkout',
      hits: 7,
      result: { tint: 'thumb-tint-blue', label: 'Checkout - annual billing', meta: 'Apr 26 · Safari' },
      tags: ['stripe', 'checkout', 'annual'],
    },
    {
      q: 'meeting link from April',
      hits: 12,
      result: { tint: 'thumb-tint-warm', label: 'meet.google.com/aix-...', meta: 'Apr 14 · Notes' },
      tags: ['meeting', 'link', 'calendar'],
    },
    {
      q: 'dark mode settings page',
      hits: 5,
      result: { tint: 'thumb-tint-graphite', label: 'Linear · Appearance', meta: 'Apr 19 · Linear' },
      tags: ['settings', 'dark mode', 'ui ref'],
    },
    {
      q: 'order number I saved quickly',
      hits: 2,
      result: { tint: 'thumb-tint-rose', label: 'Order #4128 confirmation', meta: 'Apr 11 · Mail' },
      tags: ['order', 'receipt', 'mail'],
    },
  ];

  return (
    <Section className="py-24 md:py-32" id="search">
      <div className="max-w-2xl">
        <div className="flex flex-wrap items-center gap-3">
          <Eyebrow>Search by meaning</Eyebrow>
          <DevelopmentBadge />
        </div>
        <h2 className="font-display text-[34px] md:text-[44px] leading-[1.05] mt-3 ink" style={{ textWrap: 'balance' }}>
          Ask the way you’d ask a person who watched you work.
        </h2>
        <p className="mt-4 text-[16px] md:text-[17px] leading-relaxed ink-2" style={{ textWrap: 'pretty' }}>
          This in-development search layer indexes the text and visual content of every screenshot, so natural-language queries can land on the right capture instead of the right filename.
        </p>
      </div>
      <div className="mt-12 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
        {queries.map((it) => (
          <div key={it.q} className="rounded-xl border border-soft surface card-shadow p-4 hover:translate-y-[-2px] transition-transform">
            <div className="flex items-center gap-2 px-2.5 h-9 rounded-md surface-2 hairline">
              <I.Search size={13} className="muted" />
              <span className="text-[13px] ink truncate">{it.q}</span>
              <span className="ml-auto font-mono text-[10.5px] muted-2">{it.hits} hits</span>
            </div>
            <div className="mt-3 flex gap-3">
              <div className={`w-20 h-14 rounded-md hairline ${it.result.tint} shrink-0`}></div>
              <div className="min-w-0">
                <div className="text-[13px] ink truncate">{it.result.label}</div>
                <div className="text-[11px] muted font-mono truncate">{it.result.meta}</div>
                <div className="mt-1.5 flex flex-wrap gap-1">
                  {it.tags.map((t) => (
                    <span key={t} className="px-1.5 py-0.5 rounded text-[10px] font-mono ink-2"
                      style={{ background: 'var(--surface-2)', boxShadow: '0 0 0 1px var(--border)' }}>
                      {t}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className="mt-10 text-center text-[13px] muted">
        Press <span className="font-mono px-1.5 py-0.5 rounded surface-2 hairline ink-2">⌘ K</span> from anywhere on macOS, or <span className="font-mono px-1.5 py-0.5 rounded surface-2 hairline ink-2">Ctrl K</span> on Windows.
      </div>
    </Section>
  );
};

// ─── TIMELINE ────────────────────────────────────────────
const TimelineArt = () => {
  const months = [
    { label: 'April', count: 312, days: [4, 7, 12, 8, 5, 9, 14, 11] },
    { label: 'March', count: 408, days: [9, 13, 7, 6, 11, 14, 8, 10] },
    { label: 'February', count: 271, days: [3, 5, 8, 6, 9, 4, 7, 11] },
  ];
  return (
    <div className="rounded-xl overflow-hidden hairline" style={{ background: 'var(--dark)', border: '1px solid var(--dark-border)' }}>
      <div className="flex items-center px-3 h-9 border-b" style={{ borderColor: 'var(--dark-border)' }}>
        <div className="flex items-center gap-1.5">
          <span className="traffic r"></span><span className="traffic y"></span><span className="traffic g"></span>
        </div>
        <span className="ml-3 text-[11px]" style={{ color: 'var(--dark-muted)' }}>Months · 991 captures</span>
      </div>
      <div className="p-4 space-y-5">
        {months.map((m) => (
          <div key={m.label}>
            <div className="flex items-baseline justify-between mb-2">
              <div className="text-[12px]" style={{ color: 'var(--dark-ink)' }}>{m.label} 2026</div>
              <div className="text-[10px] font-mono" style={{ color: 'var(--dark-muted)' }}>{m.count} captures</div>
            </div>
            <div className="grid grid-cols-8 gap-1.5">
              {m.days.map((c, i) => {
                const intensity = Math.min(1, c / 14);
                return (
                  <div key={i} className="aspect-square rounded-sm relative"
                    style={{
                      background: `oklch(${0.22 + intensity * 0.18} 0.02 245)`,
                    }}>
                    <span className="absolute right-0.5 top-0.5 font-mono text-[8px]"
                      style={{ color: 'oklch(0.7 0.005 260)' }}>{c}</span>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const Timeline = () => (
  <Section className="py-24 md:py-32" id="timeline">
    <div className="grid lg:grid-cols-12 gap-10 items-start content-start">
      <div className="lg:col-span-5">
        <Eyebrow>Timeline browsing</Eyebrow>
        <h2 className="font-display text-[34px] md:text-[44px] leading-[1.05] mt-3 ink" style={{ textWrap: 'balance' }}>
          Scroll through your week the way you’d scroll through your phone.
        </h2>
        <p className="mt-4 text-[16px] leading-relaxed ink-2" style={{ textWrap: 'pretty' }}>
          Captures group automatically by day, with sticky day headers and a month overview for fast jumps.
          Sorting and filters let you move between recent work, specific apps, source folders, and longer timelines.
        </p>
        <ul className="mt-6 space-y-2.5">
          {[
            'Day-grouped browsing with sticky headers',
            'Month and year overview for long jumps',
            'Timeline scrubber for fast navigation',
          ].map((b) => (
            <li key={b} className="flex items-start gap-2.5 text-[14.5px] ink-2">
              <I.Check size={14} className="text-accent mt-1" strokeWidth={2} />
              <span>{b}</span>
            </li>
          ))}
        </ul>
      </div>
      <div className="lg:col-span-7">
        <TimelineArt />
      </div>
    </div>
  </Section>
);

// ─── AI & PRIVACY ─────────────────────────────────────────
const Privacy = () => (
  <Section className="py-24 md:py-32" id="privacy">
    <SectionHeader
      eyebrow="AI &amp; privacy"
      title="We tell you exactly where each screenshot goes."
      blurb="Kiroshi is local-first for storage and honest about analysis. Your library lives on your machine. Analysis happens where you tell it to, and the active provider is always visible in the app."
    />
    <div className="mt-12 grid md:grid-cols-3 gap-4">
      {[
        {
          icon: <I.Folder size={16} />,
          title: 'Library stays local',
          body: 'The screenshot files and the search index live on your machine. Kiroshi does not upload your library to any server.',
          tone: 'On device',
        },
        {
          icon: <I.Cloud size={16} />,
          title: 'Cloud analysis is default only if you do not bring a local VLM',
          body: 'Kiroshi Cloud analyzes new screenshots out of the box only when no local VLM is configured. If you bring your own local VLM, analysis can stay on-device.',
          tone: 'Off device',
        },
        {
          icon: <I.Cpu size={16} />,
          title: 'Local AI when you want it',
          body: 'Configure a local AI provider to keep analysis on-device. The header shows which provider analyzed each capture, with no ambiguity.',
          tone: 'Configurable',
        },
      ].map((c) => (
        <div key={c.title} className="rounded-xl border border-soft surface card-shadow p-6">
          <div className="flex items-center gap-2 text-[11px] font-mono uppercase tracking-wider muted">
            <span className="ink-2">{c.icon}</span>
            <span>{c.tone}</span>
          </div>
          <h3 className="font-display text-[20px] leading-snug mt-3 ink">{c.title}</h3>
          <p className="mt-2.5 text-[14px] leading-relaxed ink-2">{c.body}</p>
        </div>
      ))}
    </div>

    {/* Provider strip */}
    <div className="mt-8 rounded-xl border p-5 flex flex-wrap items-center gap-x-6 gap-y-3"
      style={{ borderColor: 'var(--border)', background: 'var(--surface-2)' }}>
      <div className="flex items-center gap-2 text-[12px] font-mono uppercase tracking-wider muted">
        <I.Eye size={13} /> Provider visibility
      </div>
      <div className="flex flex-wrap items-center gap-2 text-[12.5px] ink-2">
        <span className="chip"><I.Cloud size={11} className="muted" /> Kiroshi Cloud · off device</span>
        <span className="chip"><I.Cpu size={11} className="muted" /> Local · on device</span>
        <span className="chip"><I.Lock size={11} className="muted" /> Per-folder rules</span>
        <span className="chip"><I.Check size={11} className="muted" /> Per-screenshot history</span>
      </div>
      <a href="mailto:meta@metadataindex.com?subject=Kiroshi%20privacy" className="ml-auto text-[13px] text-accent inline-flex items-center gap-1.5">
        Ask about privacy <I.ArrowRight size={12} />
      </a>
    </div>
  </Section>
);

// ─── USE CASES ───────────────────────────────────────────
const UseCases = () => {
  const items = [
    {
      icon: <I.Pencil size={15} />, who: 'Designers',
      body: 'UI references, visual comparisons, and handoff screenshots that you can search by component, not date.',
      examples: ['empty states', 'pricing tables', 'sidebar layouts', 'icon sets'],
      tint: 'thumb-tint-blue',
    },
    {
      icon: <I.Code size={15} />, who: 'Engineers',
      body: 'Bug screenshots, stack traces, error states, and docs pages, indexed with the full text on screen.',
      examples: ['stack traces', 'devtools', 'config screens', 'curl outputs'],
      tint: 'thumb-stripes',
    },
    {
      icon: <I.Book size={15} />, who: 'Researchers',
      body: 'Saved pages, quotes, evidence, and references that stay findable long after the tab is closed.',
      examples: ['quotes', 'tables', 'PDFs', 'maps'],
      tint: 'thumb-tint-warm',
    },
    {
      icon: <I.Headset size={15} />, who: 'Operators &amp; support',
      body: 'Order numbers, dashboards, confirmations, and customer context, retrievable in a single search.',
      examples: ['order #s', 'dashboards', 'receipts', 'inboxes'],
      tint: 'thumb-tint-green',
    },
  ];
  return (
    <Section className="py-24 md:py-32" id="use-cases">
      <SectionHeader
        eyebrow="Who it’s for"
        title="Built for people whose work lives in screenshots."
        blurb="Different jobs, same problem: too many captures, too little time to sort them."
      />
      <div className="use-case-proof-band mt-12 border-y border-soft py-8 md:py-10">
        <div className="grid lg:grid-cols-[0.85fr_1.65fr] gap-10 lg:gap-14 items-start content-start">
          <div className="max-w-sm">
            <div className="text-[11px] font-mono uppercase tracking-[0.14em] muted">Shared pattern</div>
            <p className="mt-3 font-display text-[24px] md:text-[28px] leading-[1.08] ink" style={{ textWrap: 'balance' }}>
              The filename is rarely the thing you remember.
            </p>
            <p className="mt-4 text-[14.5px] leading-relaxed ink-2" style={{ textWrap: 'pretty' }}>
              Kiroshi is useful when the clue is a phrase on screen, a visual layout, an app, a receipt, or the rough week you saw it. When work is already stressful, your screenshot and documentation process should not be.
            </p>
          </div>
          <div>
            {items.map((it, i) => (
              <div
                key={it.who}
                className={`grid sm:grid-cols-[160px_minmax(0,1fr)] gap-4 py-5 ${i === 0 ? 'pt-0' : 'border-t border-soft'}`}
              >
                <div className="flex items-center gap-3">
                  <div className={`w-10 h-10 rounded-lg hairline ${it.tint} shrink-0 grid place-items-center`}>
                    <span className="ink-2">{it.icon}</span>
                  </div>
                  <h3 className="font-display text-[19px] ink" dangerouslySetInnerHTML={{ __html: it.who }} />
                </div>
                <div className="min-w-0">
                  <p className="text-[14.5px] leading-relaxed ink-2">{it.body}</p>
                  <div className="mt-3 flex flex-wrap gap-1.5">
                    {it.examples.map((e) => (
                      <span key={e} className="font-mono text-[11px] px-1.5 py-0.5 rounded ink-2"
                        style={{ background: 'var(--surface-2)', boxShadow: '0 0 0 1px var(--border)' }}>
                        {e}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            ))}
            <div className="pt-5 border-t border-soft text-[12.5px] muted">
              Also useful for founders, analysts, and anyone who screenshots instead of bookmarking.
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
};

// ─── IN DEVELOPMENT ─────────────────────────────────────
const InDevelopment = () => {
  const capabilities = [
    {
      icon: <I.Layers size={17} />,
      title: 'Knowledge association network',
      body: 'Kiroshi will build a knowledge association network of interlinked events, connecting related screenshots, documents, apps, and moments so context can be recalled together.',
    },
    {
      icon: <I.Filter size={17} />,
      title: 'Configurable file-sorting agent',
      body: 'The in-app agent will be able to sort files when asked, with rules, permissions, and preferred destinations configured in settings before it acts.',
    },
  ];

  return (
    <Section className="py-20 md:py-28 section-band-soft" id="in-development">
      <div className="grid lg:grid-cols-[0.9fr_1.35fr] gap-10 lg:gap-14 items-start">
        <div>
          <div className="flex flex-wrap items-center gap-3">
            <Eyebrow>In development</Eyebrow>
            <DevelopmentBadge>Not currently shipped</DevelopmentBadge>
          </div>
          <h2 className="font-display text-[34px] md:text-[44px] leading-[1.05] mt-3 ink" style={{ textWrap: 'balance' }}>
            Building toward connected context across your work.
          </h2>
          <p className="mt-4 text-[16px] md:text-[17px] leading-relaxed ink-2" style={{ textWrap: 'pretty' }}>
            These capabilities are being designed carefully so automated organization stays visible, configurable, and under your control.
          </p>
        </div>
        <div className="grid md:grid-cols-2 gap-4">
          {capabilities.map((item) => (
            <div key={item.title} className="rounded-xl border border-soft surface card-shadow p-6">
              <div className="flex items-center justify-between gap-3">
                <div className="w-10 h-10 rounded-lg surface-2 hairline grid place-items-center text-accent">
                  {item.icon}
                </div>
                <DevelopmentBadge />
              </div>
              <h3 className="font-display text-[21px] leading-snug mt-5 ink">{item.title}</h3>
              <p className="mt-3 text-[14.5px] leading-relaxed ink-2" style={{ textWrap: 'pretty' }}>{item.body}</p>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
};

// ─── PRICING ─────────────────────────────────────────────
const Pricing = () => {
  const betaBullets = [
    '100 free AI indexes per month',
    'Local screenshot library and search index',
    'Search, timeline browsing, OCR, summaries, and tags',
    'macOS beta is currently the more stable build; Windows beta access is available as it catches up',
    'Cloud analysis by default unless you configure a local VLM',
  ];
  const planned = [
    {
      name: 'Personal',
      body: 'Higher monthly analysis limits, advanced filters, and per-folder provider rules for individual workflows.',
    },
    {
      name: 'Pro',
      body: 'Larger libraries, faster cloud analysis, advanced local AI controls, and early automation features.',
    },
  ];
  return (
    <Section className="py-24 md:py-32" id="pricing">
      <SectionHeader
        eyebrow="Pricing"
        title="Start with the free beta. Pricing comes later."
        blurb="Kiroshi is free during beta while the product is being shaped with real screenshot-heavy workflows. Paid plans are planned, but they are not on sale yet."
      />
      <div
        className="mt-12 rounded-2xl overflow-hidden grid lg:grid-cols-[1.18fr_0.82fr] gap-0 items-stretch"
        style={{
          border: '1px solid var(--dark-border)',
          boxShadow: '0 1px 0 oklch(1 0 0 / 0.10) inset, 0 24px 60px -28px oklch(0.2 0.02 260 / 0.38)',
        }}
      >
        <div
          className="pricing-beta-panel p-7 md:p-8 min-w-0"
          style={{
            background: 'var(--dark)',
          }}
        >
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div className="inline-flex items-center text-[11px] font-mono uppercase tracking-[0.14em]"
              style={{ color: 'oklch(0.70 0.006 260)' }}>
              Beta access
            </div>
            <span className="text-[11px] font-mono uppercase tracking-[0.12em] px-2 py-1 rounded-full"
              style={{ color: 'oklch(0.86 0.004 260)', background: 'oklch(1 0 0 / 0.07)' }}>
              100 AI indexes / month
            </span>
          </div>
          <div className="mt-8 grid md:grid-cols-[0.8fr_1.2fr] gap-8">
            <div>
              <div className="font-display text-[56px] md:text-[68px] leading-none" style={{ color: 'var(--dark-ink)' }}>
                Free
              </div>
              <div className="mt-2 text-[14px]" style={{ color: 'oklch(0.70 0.006 260)' }}>
                During public beta
              </div>
              <div className="mt-7 flex flex-wrap gap-2.5">
                <a href="#download" className="btn"
                  style={{ background: 'oklch(0.99 0 0)', color: 'var(--ink)' }}>
                  Download beta
                  <I.ArrowRight size={13} />
                </a>
                <a href="mailto:meta@metadataindex.com?subject=Kiroshi%20beta" className="btn"
                  style={{ background: 'transparent', color: 'var(--dark-ink)', border: '1px solid var(--dark-border)' }}>
                  <I.Mail size={13} />
                  Ask a question
                </a>
              </div>
            </div>
            <ul className="space-y-3">
              {betaBullets.map((b) => (
                <li key={b} className="flex items-start gap-2.5 text-[14px]" style={{ color: 'oklch(0.84 0.004 260)' }}>
                  <I.Check size={14} className="mt-1 shrink-0" strokeWidth={2} style={{ color: 'oklch(0.72 0.10 145)' }} />
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="mt-8 pt-5 border-t text-[12.5px] leading-relaxed"
            style={{ borderColor: 'var(--dark-border)', color: 'oklch(0.66 0.006 260)' }}>
            Beta limits may change with notice as usage patterns become clearer.
          </div>
        </div>

        <div
          className="pricing-plan-notes surface p-6 md:p-7 min-w-0 border-t lg:border-t-0 lg:border-l border-soft flex flex-col justify-center"
          style={{ boxShadow: 'none' }}
        >
          <div className="font-mono text-[11px] uppercase tracking-[0.14em] muted">After beta</div>
          <h3 className="mt-3 font-display text-[28px] leading-[1.08] ink" style={{ textWrap: 'balance' }}>
            Paid plans will be for heavier usage, not basic access.
          </h3>
          <p className="mt-4 text-[14.5px] leading-relaxed ink-2" style={{ textWrap: 'pretty' }}>
            The free tier will continue to exist in some form. Final pricing, limits, and tier names will be confirmed before general release.
          </p>
          <div className="mt-7">
            {planned.map((plan, i) => (
              <div key={plan.name} className={`py-4 ${i === 0 ? 'border-y border-soft' : 'border-b border-soft'}`}>
                <div className="flex items-center justify-between gap-3">
                  <div className="font-display text-[18px] ink">{plan.name}</div>
                  <span className="text-[10.5px] font-mono uppercase tracking-wider px-2 py-0.5 rounded-full"
                    style={{ background: 'var(--surface-2)', color: 'var(--muted)', boxShadow: '0 0 0 1px var(--border)' }}>
                    Planned
                  </span>
                </div>
                <p className="mt-2 text-[13.5px] leading-relaxed ink-2">{plan.body}</p>
              </div>
            ))}
          </div>
          <p className="mt-5 text-[13px] leading-relaxed muted">
            Beta usage and feedback will set the exact limits before paid plans open.
          </p>
        </div>
      </div>
    </Section>
  );
};

// ─── ROADMAP ─────────────────────────────────────────────
const Roadmap = () => {
  const items = [
    { stage: 'Now', label: 'Beta desktop release', body: 'macOS and Windows builds in private then public beta.', state: 'shipping' },
    { stage: 'Now', label: 'Improved search relevance', body: 'Better ranking for visual queries and date-bound questions.', state: 'shipping' },
    { stage: 'Now', label: 'Local AI provider setup', body: 'First-class support for on-device analysis with model picker.', state: 'shipping' },
    { stage: 'Now', label: 'Advanced filtering', body: 'Filter by app, monitor, document type, and capture source.', state: 'shipping' },
    { stage: 'In development', label: 'Knowledge association network', body: 'Builds a network of interlinked events so related captures, files, apps, and moments can be recalled together.', state: 'in-development' },
    { stage: 'In development', label: 'Configurable file-sorting agent', body: 'Lets the in-app agent sort files when asked, using rules and permissions configured in settings.', state: 'in-development' },
    { stage: 'Soon', label: 'Signed builds and auto updates', body: 'Notarized macOS and signed Windows installers, background updates.', state: 'planned' },
    { stage: 'Later', label: 'Billing and usage controls', body: 'Per-account analysis limits, transparent usage dashboard.', state: 'planned' },
    { stage: 'Later', label: 'File indexing beyond screenshots', body: 'Extend the same memory layer to local files: PDFs, images, and design exports, not just screenshots.', state: 'planned' },
  ];
  const stateTone = {
    shipping: 'oklch(0.55 0.12 145)',
    'in-development': 'var(--accent)',
    planned: 'var(--muted)',
  };
  return (
    <Section className="py-24 md:py-32" id="roadmap">
      <SectionHeader
        eyebrow="Roadmap"
        title="What is being worked on."
        blurb="A short, real list of what’s shipping next. Dates intentionally left off."
      />
      <div className="mt-12 rounded-xl border border-soft surface card-shadow overflow-hidden">
        {items.map((it, i) => {
          const stateLabel = it.state === 'in-development' ? 'in development' : it.state;
          return (
            <div key={i} className={`grid md:grid-cols-12 gap-3 md:gap-4 px-6 py-4 items-start md:items-center ${i > 0 ? 'border-t border-soft border' : ''}`}>
              <div className="md:col-span-2 text-[11px] font-mono uppercase muted">{it.stage}</div>
              <div className="md:col-span-7">
                <div className="text-[15px] ink">{it.label}</div>
                <div className="text-[13px] muted mt-0.5">{it.body}</div>
              </div>
              <div className="md:col-span-3 flex md:justify-end">
                <span className="inline-flex items-center gap-1.5 text-[11.5px] font-mono"
                  style={{ color: stateTone[it.state] }}>
                  <span className="inline-block w-1.5 h-1.5 rounded-full" style={{ background: stateTone[it.state] }}></span>
                  {stateLabel}
                </span>
              </div>
            </div>
          );
        })}
      </div>
    </Section>
  );
};

// ─── FOUNDER NOTE ────────────────────────────────────────
const Founder = () => (
  <Section className="py-24 md:py-32" id="note">
    <div className="grid lg:grid-cols-[minmax(0,520px)_minmax(0,1fr)] gap-10 lg:gap-14 items-start content-start">
      <div className="min-w-0 self-start">
        <Eyebrow>From the maker</Eyebrow>
        <h2 className="font-display text-[30px] md:text-[36px] leading-[1.08] mt-3 ink" style={{ textWrap: 'balance' }}>
          A note on why Kiroshi exists.
        </h2>
      </div>
      <div className="min-w-0 self-start">
        <div className="rounded-xl border border-soft surface card-shadow p-7 md:p-8">
          <div className="text-[16px] md:text-[17px] leading-relaxed ink-2 space-y-4" style={{ textWrap: 'pretty' }}>
            <p>
              I built this for a friend who spends a lot of time in Blender projects. They were constantly
              taking screenshots for references, fixes, and ideas, then wasting time trying to find them again.
              It became such a pain that I built Kiroshi to make getting those screenshots back fast and simple.
            </p>
            <p>
              If you live in screenshots too, I’d love for you to try the beta and tell me where it falls short.
            </p>
          </div>
          <form action="https://formspree.io/f/xkokddpy" method="POST" className="mt-7 pt-5 border-t border-soft">
            <input type="hidden" name="_subject" value="Kiroshi beta feedback" />
            <input type="hidden" name="context" value="Founder note on Kiroshi landing page" />
            <div className="flex flex-wrap items-start justify-between gap-4">
              <div className="flex items-center gap-3">
                <div
                  className="w-10 h-10 rounded-[8px] hairline overflow-hidden surface-2"
                  aria-label="Kiroshi icon"
                >
                  <img src="uploads/kiroshi-icon.jpg" alt="" className="w-full h-full object-cover" loading="lazy" />
                </div>
                <div className="leading-tight">
                  <div className="text-[14px] ink font-medium">A builder note</div>
                  <div className="text-[12.5px] muted mt-0.5">Beta feedback goes straight to meta@metadataindex.com</div>
                </div>
              </div>
              <div className="flex flex-wrap gap-2.5 w-full xl:w-auto xl:max-w-[min(100%,720px)] xl:ml-auto items-stretch">
                <label className="min-w-0 flex-[1_1_160px] sm:max-w-[200px]">
                  <span className="sr-only">Email</span>
                  <input
                    type="email"
                    name="email"
                    required
                    placeholder="Email"
                    className="w-full h-11 box-border rounded-lg border border-soft surface-2 px-3 py-2 text-[13px] leading-snug ink"
                  />
                </label>
                <label className="min-w-0 flex-[2_1_220px]">
                  <span className="sr-only">Feedback</span>
                  <textarea
                    name="message"
                    required
                    rows={1}
                    placeholder="Feedback"
                    className="w-full h-11 min-h-[2.75rem] max-h-11 box-border rounded-lg border border-soft surface-2 px-3 py-0 text-[13px] leading-[42px] ink resize-none overflow-y-hidden"
                  ></textarea>
                </label>
                <button
                  type="submit"
                  className="btn btn-secondary h-11 shrink-0 inline-flex items-center justify-center gap-2 px-4 box-border"
                >
                  <I.Mail size={13} />
                  Send feedback
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </Section>
);

// ─── FINAL CTA ───────────────────────────────────────────
const FinalCTA = () => (
  <Section className="py-24 md:py-32" id="download">
    <div className="rounded-2xl overflow-hidden p-10 md:p-16 text-center"
      style={{
        background: 'var(--dark)',
        border: '1px solid var(--dark-border)',
        backgroundImage:
          'radial-gradient(800px 300px at 50% -10%, oklch(0.30 0.04 245 / 0.7), transparent 60%),' +
          'radial-gradient(600px 220px at 50% 110%, oklch(0.27 0.02 245 / 0.5), transparent 60%)',
      }}>
      <div
        className="inline-flex items-center text-[11px] font-mono uppercase tracking-[0.14em]"
        style={{ color: 'oklch(0.7 0.005 260)' }}
      >
        Free Beta
      </div>
      <h2 className="font-display font-semibold text-[40px] md:text-[60px] leading-[1.0] mt-4"
        style={{ color: 'var(--dark-ink)', textWrap: 'balance' }}>
        Find the screenshot you know exists.
      </h2>
      <p className="mt-5 text-[16px] md:text-[17px] max-w-xl mx-auto" style={{ color: 'oklch(0.78 0.005 260)', textWrap: 'pretty' }}>
        Free during beta with 100 AI indexes per month. Your library stays local, and analysis can use Kiroshi Cloud or a local provider you configure.
      </p>
      <div className="mt-9 flex flex-wrap items-center justify-center gap-2.5">
        <a href="#download" className="btn"
          style={{ background: 'oklch(0.99 0 0)', color: 'var(--ink)' }}>
          <I.Apple size={14} />
          Download for macOS
        </a>
        <a href="#download" className="btn"
          style={{ background: 'transparent', color: 'var(--dark-ink)', border: '1px solid var(--dark-border)' }}>
          <I.Windows size={14} />
          Download for Windows
        </a>
      </div>
    </div>
  </Section>
);

// ─── FOOTER ──────────────────────────────────────────────
const Footer = () => (
  <footer className="px-6 md:px-10 pb-10 pt-14 border-t border-soft border" style={{ background: 'var(--surface-2)' }}>
    <div className="max-w-[1200px] mx-auto">
      <div className="flex flex-wrap items-start justify-between gap-8">
        <div>
          <Wordmark />
          <div className="mt-3 text-[13px] muted">Built for macOS and Windows.</div>
        </div>
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-x-12 gap-y-3 text-[13.5px]">
          {[
            ['Product', '#product'],
            ['Pricing', '#pricing'],
            ['Roadmap', '#roadmap'],
            ['Privacy Policy', 'privacy.html'],
            ['Terms', 'terms.html'],
            ['Contact', 'mailto:meta@metadataindex.com'],
          ].map(([label, href]) => (
            <a key={label} href={href} className="ink-2 hover:ink transition-colors">{label}</a>
          ))}
        </div>
      </div>
      <div className="mt-10 pt-6 border-t border-soft border flex flex-wrap items-center justify-between gap-3 text-[12px] muted">
        <div>© 2026 Kiroshi. All rights reserved.</div>
        <div className="font-mono">v0.0.1 Beta</div>
      </div>
    </div>
  </footer>
);

Object.assign(window, {
  Wordmark, Eyebrow, DevelopmentBadge, SectionHeader, Section,
  Header, Hero, Problem, Showcase, SearchExamples, Timeline,
  Privacy, UseCases, InDevelopment, Pricing, Roadmap, Founder, FinalCTA, Footer,
});