// landing.jsx
const { useState: useStateL, useEffect: useEffectL, useRef: useRefL } = React;

const __LANDING_CSS = `
  /* ── Landing page ── */
  .lp-shell { min-height: 100vh; display: flex; flex-direction: column; position: relative; }

  /* Top nav */
  .lp-nav {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(14px) saturate(160%);
    background: color-mix(in oklab, var(--bg) 75%, transparent);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease, background 200ms ease;
  }
  .lp-nav.scrolled { border-bottom-color: var(--hairline); }
  .lp-nav-row {
    max-width: 1280px; margin: 0 auto;
    padding: 14px 32px; display: flex; align-items: center; gap: 32px;
  }
  .lp-nav-links {
    display: flex; gap: 4px; flex: 1;
  }
  .lp-nav-link {
    padding: 6px 12px; border-radius: var(--r-sm);
    font-size: 13.5px; color: var(--ink-2);
    transition: color 120ms ease, background 120ms ease;
    white-space: nowrap;
  }
  .lp-nav-link:hover { color: var(--ink); background: var(--hover); }
  .lp-nav-actions { display: flex; align-items: center; gap: 12px; }

  /* Authed nav (avatar + menu) */
  .lp-nav-user {
    display: flex; align-items: center; gap: 12px;
  }
  .lp-nav-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    display: grid; place-items: center;
    font-size: 12px; font-weight: 600;
    border: 1px solid var(--hairline);
    cursor: pointer;
    position: relative;
    transition: transform 120ms ease, box-shadow 120ms ease;
  }
  .lp-nav-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
  .lp-nav-avatar:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .lp-nav-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 224px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    z-index: 100;
    animation: sp-menu-in 140ms ease;
  }
  .lp-nav-menu-h {
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 4px;
  }
  .lp-nav-menu-h .greet {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .lp-nav-menu-h .name {
    font-weight: 600; font-size: 14px;
    letter-spacing: -0.005em;
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  }
  .lp-nav-menu-h .name .accent {
    font-family: var(--font-serif); font-style: italic;
    color: var(--accent); font-weight: 400;
  }
  .lp-nav-menu-h .email { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .lp-nav-menu-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: transparent; border: 0;
    border-radius: var(--r-xs);
    color: var(--ink);
    font-size: 13.5px;
    text-align: left;
  }
  .lp-nav-menu-item:hover { background: var(--hover); }
  .lp-nav-menu-item.danger { color: var(--danger); }
  .lp-nav-menu-sep { height: 1px; background: var(--hairline); margin: 4px 0; }
  @keyframes sp-menu-in { from { opacity: 0; transform: translateY(-4px); } }

  /* Welcome-back badge replaces the eyebrow pill when authed */
  .lp-eyebrow-welcome { color: var(--ink); }
  .lp-eyebrow-welcome .accent {
    font-family: var(--font-serif); font-style: italic;
    color: var(--accent); margin-right: 2px;
  }

  @media (max-width: 560px) {
    .lp-nav-user .lp-cta-open .lp-cta-open-label { display: none; }
  }

  /* Hero */
  .lp-hero {
    max-width: 1280px; margin: 0 auto;
    padding: 64px 32px 48px;
    position: relative;
  }
  .lp-eyebrow-row {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 28px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-sm);
  }
  .lp-eyebrow-dot {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent); color: var(--accent-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 600;
  }
  .lp-eyebrow-row .eyebrow { font-size: 10.5px; margin: 0; }

  .lp-hero h1 {
    font-size: clamp(40px, 6.4vw, 92px);
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: -0.035em;
    margin: 0 0 28px;
    max-width: 16ch;
    text-wrap: balance;
  }
  .lp-hero h1 .accent {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
    letter-spacing: -0.02em;
  }
  .lp-hero-sub {
    max-width: 56ch;
    font-size: 18px;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0 0 36px;
    text-wrap: pretty;
  }

  /* CTA + extensions */
  .lp-cta-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
    margin-bottom: 56px;
  }
  .lp-ext-row {
    display: flex; flex-wrap: wrap; gap: 10px;
  }
  .lp-ext-group {
    padding-top: 28px;
    border-top: 1px solid var(--hairline);
  }
  .lp-ext-group + .lp-ext-group { margin-top: 28px; }
  .lp-ext-group-h {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
  }
  .lp-ext-group-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .lp-ext-group-label::before {
    content: ""; width: 14px; height: 1px; background: var(--accent);
  }
  .lp-ext-group-meta {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  .lp-ext-label {
    width: 100%;
    margin-bottom: 4px;
  }
  .lp-ext-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 16px 10px 12px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    transition: all 160ms ease;
  }
  .lp-ext-btn:hover {
    border-color: var(--ink-2);
    background: var(--surface-2);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
  .lp-ext-btn-text { display: flex; flex-direction: column; line-height: 1.1; }
  .lp-ext-btn-text .sub { font-size: 10.5px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; font-family: var(--font-mono); }
  .lp-ext-btn-text .name { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }

  /* Hero mockup */
  .lp-mockup-wrap {
    margin: 32px 0 80px;
    position: relative;
  }
  .lp-mockup-stage {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
    perspective: 1200px;
  }
  .lp-mockup {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform-style: preserve-3d;
  }
  .lp-mockup-chrome {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--hairline);
    background: var(--surface-2);
  }
  .lp-mockup-dots { display: flex; gap: 6px; }
  .lp-mockup-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--hairline); }
  .lp-mockup-url {
    flex: 1; text-align: center;
    font-family: var(--font-mono);
    font-size: 11px; color: var(--muted);
    background: var(--surface); padding: 4px 12px;
    border-radius: 999px; max-width: 320px; margin: 0 auto;
    border: 1px solid var(--hairline);
  }
  .lp-mockup-body {
    display: grid; grid-template-columns: 200px 1fr;
    min-height: 380px;
  }
  .lp-mockup-sb {
    border-right: 1px solid var(--hairline);
    padding: 16px 12px;
    background: color-mix(in oklab, var(--surface) 80%, var(--bg));
  }
  .lp-mockup-sb-h {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    padding: 4px 6px 8px;
  }
  .lp-mockup-sb-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px;
    border-radius: var(--r-xs);
    font-size: 12px; color: var(--ink-2);
  }
  .lp-mockup-sb-row.active {
    background: var(--accent-soft);
    color: var(--accent);
  }
  .lp-mockup-main { padding: 18px 24px; }
  .lp-mockup-main-h {
    font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
    margin-bottom: 4px;
  }
  .lp-mockup-main-sub { font-size: 11px; color: var(--muted); margin-bottom: 14px; }
  .lp-mockup-list { display: flex; flex-direction: column; }
  .lp-mockup-row {
    display: grid;
    grid-template-columns: 20px 1fr auto auto;
    gap: 12px; align-items: center;
    padding: 9px 6px;
    border-bottom: 1px solid var(--hairline);
    font-size: 12px;
    animation: lp-fade-up 600ms cubic-bezier(.2,.9,.3,1) backwards;
  }
  @keyframes lp-fade-up { from { opacity: 0; transform: translateY(4px); } }
  .lp-mockup-fav {
    width: 16px; height: 16px; border-radius: 4px;
    background: var(--accent-soft);
    color: var(--accent);
    display: grid; place-items: center;
    font-size: 9px;
  }
  .lp-mockup-title { font-weight: 500; color: var(--ink); }
  .lp-mockup-host { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
  .lp-mockup-tag { font-family: var(--font-mono); font-size: 9px; padding: 2px 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }

  /* Section header */
  .lp-section {
    max-width: 1280px; margin: 0 auto;
    padding: 96px 32px;
    position: relative;
  }
  .lp-section-h {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 48px;
  }
  .lp-section-h-left { max-width: 640px; }
  .lp-section-eyebrow {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 16px;
  }
  .lp-section-eyebrow::before {
    content: ""; width: 18px; height: 1px; background: var(--accent);
  }
  .lp-section-title {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0;
    text-wrap: balance;
  }
  .lp-section-title .accent {
    font-family: var(--font-serif); font-style: italic;
    color: var(--accent); letter-spacing: -0.01em;
  }
  .lp-section-sub {
    margin: 12px 0 0;
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.5;
    max-width: 56ch;
  }
  .lp-section-aside {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    text-align: right;
    letter-spacing: 0.05em;
    flex: 0 0 auto;
  }

  /* Features grid */
  .lp-features {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .lp-feature {
    background: var(--bg);
    padding: 32px;
    display: flex; flex-direction: column;
    min-height: 240px;
    transition: background 200ms ease;
    position: relative;
  }
  .lp-feature:hover { background: var(--surface); }
  .lp-feature-num {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.08em;
    margin-bottom: 24px;
  }
  .lp-feature-icon {
    width: 36px; height: 36px;
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--accent);
    display: grid; place-items: center;
    margin-bottom: 20px;
  }
  .lp-feature h3 {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
  }
  .lp-feature p {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
    margin: 0;
  }

  /* Steps */
  .lp-steps {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    position: relative;
  }
  .lp-step {
    position: relative;
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
  }
  .lp-step-mark {
    position: absolute;
    top: -7px; left: 0;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--accent);
  }
  .lp-step-mark::after {
    content: ""; position: absolute; inset: 3px;
    border-radius: 50%; background: var(--accent);
  }
  .lp-step-num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.08em;
    margin-bottom: 16px;
  }
  .lp-step h3 {
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
  }
  .lp-step h3 .accent { font-family: var(--font-serif); font-style: italic; color: var(--accent); }
  .lp-step p {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
    margin: 0;
  }

  /* Stats strip */
  .lp-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    margin: 64px 0 0;
  }
  .lp-stat {
    padding: 24px 0;
    border-right: 1px solid var(--hairline);
  }
  .lp-stat:last-child { border-right: none; }
  .lp-stat-n {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 44px;
    line-height: 1;
    color: var(--accent);
    letter-spacing: -0.02em;
  }
  .lp-stat-l {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 8px;
  }

  /* CTA */
  .lp-cta-block {
    max-width: 1280px; margin: 0 auto;
    padding: 96px 32px;
  }
  .lp-cta-box {
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--r-lg);
    padding: 72px 56px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .lp-cta-box::before {
    content: "";
    position: absolute; inset: -50% -10% auto auto;
    width: 60%; height: 200%;
    background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
    opacity: 0.4;
    filter: blur(40px);
    pointer-events: none;
  }
  .lp-cta-h {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 400;
    letter-spacing: -0.025em;
    margin: 0 0 12px;
    line-height: 1.05;
    position: relative;
  }
  .lp-cta-h .accent {
    font-family: var(--font-serif); font-style: italic;
    color: color-mix(in oklab, var(--accent) 60%, white);
  }
  .lp-cta-sub {
    font-size: 16px;
    color: color-mix(in oklab, var(--bg) 75%, transparent);
    margin: 0 auto 28px;
    max-width: 48ch;
    position: relative;
  }
  .lp-cta-btn {
    background: var(--bg);
    color: var(--ink);
    border-color: var(--bg);
    position: relative;
  }
  .lp-cta-btn:hover { background: white; color: var(--ink); }

  /* Footer */
  .lp-footer {
    border-top: 1px solid var(--hairline);
    padding: 32px;
  }
  .lp-footer-row {
    max-width: 1280px; margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    font-size: 13px;
    color: var(--muted);
  }
  .lp-footer-row a:hover { color: var(--ink); }

  /* Responsive */
  @media (max-width: 900px) {
    .lp-features { grid-template-columns: 1fr 1fr; }
    .lp-steps { grid-template-columns: 1fr; gap: 24px; }
    .lp-stats { grid-template-columns: 1fr 1fr; }
    .lp-stat:nth-child(2n) { border-right: none; }
    .lp-mockup-body { grid-template-columns: 1fr; min-height: 320px; }
    .lp-mockup-sb { display: none; }
    .lp-nav-links { display: none; }
    .lp-hero { padding: 40px 24px 24px; }
    .lp-mockup-stage { padding: 0 16px; }
    .lp-section { padding: 64px 24px; }
    .lp-cta-block { padding: 64px 24px; }
    .lp-cta-box { padding: 48px 24px; }
    .lp-section-h { flex-direction: column; align-items: flex-start; }
    .lp-section-aside { text-align: left; }
  }
  @media (max-width: 560px) {
    .lp-features { grid-template-columns: 1fr; }
    .lp-stats { grid-template-columns: 1fr; }
    .lp-stat { border-right: none; border-bottom: 1px solid var(--hairline); }
    .lp-stat:last-child { border-bottom: none; }
  }
`;

const LP_FEATURES = [
  { num: "01", icon: I.Cloud, title: "Sync everywhere",
    body: "Chrome, Firefox, Edge, iOS, and Android — one library. Add from any device, find from any other." },
  { num: "02", icon: I.Bolt, title: "Search that keeps up",
    body: "Title, URL, tag, folder. Results stream as you type — no loading spinner, ever." },
  { num: "03", icon: I.Folder, title: "Folders and tags",
    body: "Nest as deep as you like. Or skip folders entirely and live in tags. Your call." },
  { num: "04", icon: I.Import, title: "Bring everything",
    body: "Import HTML or JSON from any browser. Export the same way. Your data, portable." },
  { num: "05", icon: I.Lock, title: "Private by default",
    body: "No third-party trackers. No telemetry. Your library is yours alone." },
  { num: "06", icon: I.Globe, title: "Open at the edges",
    body: "REST API and CLI. Wire it into your scripts, your CMS, your second brain." },
];

const LP_STEPS = [
  { num: "Step 01", title: "Import", italic: "your bookmarks",
    body: "Drop in an HTML or JSON export from Chrome, Firefox, Edge, or Safari. Folders preserved." },
  { num: "Step 02", title: "Organize", italic: "your way",
    body: "Build folders, sprinkle tags, or let the library stay flat. Restructure anytime — no penalty." },
  { num: "Step 03", title: "Find", italic: "instantly",
    body: "Cmd-K opens search anywhere. Type a fragment, hit return, you're there." },
];

const LP_BROWSERS = [
  { name: "Chrome",  logo: BrowserLogo.Chrome,  href: 'https://chromewebstore.google.com/detail/bukmak-bookmark-manager/galaammggkdkhcoionammoglcgkmbagc' },
  { name: "Firefox", logo: BrowserLogo.Firefox, href: 'https://addons.mozilla.org/vi/firefox/addon/bukmak-bookmark-manager' },
  { name: "Edge",    logo: BrowserLogo.Edge,    href: 'https://microsoftedge.microsoft.com/addons/detail/bukmak-bookmark-manager/aacbokammcgikkoghgehjcbjnjekloof' },
];

const AppleLogo = ({ size = 28 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M17.564 12.66c-.02-2.34 1.91-3.46 1.99-3.51-1.08-1.58-2.77-1.8-3.37-1.82-1.43-.14-2.79.84-3.52.84-.74 0-1.85-.82-3.05-.8-1.57.02-3.02.91-3.83 2.32-1.63 2.83-.42 7.02 1.17 9.32.78 1.13 1.71 2.39 2.92 2.35 1.17-.05 1.62-.76 3.03-.76 1.41 0 1.81.76 3.05.74 1.26-.02 2.06-1.14 2.83-2.28.89-1.31 1.26-2.58 1.28-2.65-.03-.01-2.45-.94-2.5-3.75ZM15.27 5.4c.64-.79 1.08-1.88.96-2.97-.93.04-2.06.62-2.73 1.4-.6.69-1.13 1.81-.99 2.88 1.04.08 2.11-.53 2.76-1.31Z"/>
  </svg>
);

const AndroidLogo = ({ size = 28 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M17.6 9.48 19 7.07a.4.4 0 0 0-.69-.4l-1.42 2.46A11.4 11.4 0 0 0 12 8.05c-1.7 0-3.3.37-4.89 1.08L5.69 6.67a.4.4 0 1 0-.69.4l1.4 2.41A10.3 10.3 0 0 0 1 17.5h22a10.3 10.3 0 0 0-5.4-8.02ZM7 14.94a.94.94 0 1 1 0-1.87.94.94 0 0 1 0 1.87Zm10 0a.94.94 0 1 1 0-1.87.94.94 0 0 1 0 1.87Z" fill="#3DDC84"/>
  </svg>
);

const LP_MOBILE = [
  { name: "iOS", sub: "Download on", logo: AppleLogo },
  { name: "Android", sub: "Get it on", logo: AndroidLogo },
];

const LP_MOCK_ROWS = [
  { fav: "T", title: "The Anatomy of Typography", host: "typewolf.com", tag: "typography" },
  { fav: "R", title: "Refactoring UI — Visual Hierarchy", host: "refactoringui.com", tag: "design" },
  { fav: "O", title: "OKLCH Color Picker", host: "oklch.com", tag: "color" },
  { fav: "A", title: "Are.na — The Modern Library", host: "are.na", tag: "ux" },
  { fav: "L", title: "Linear — Method", host: "linear.app", tag: "design" },
  { fav: "P", title: "Why I Write — Paul Graham", host: "paulgraham.com", tag: "essay" },
];

function LandingPage({ navigate, user, onLogout }) {
  const [scrolled, setScrolled] = useStateL(false);
  const [menuOpen, setMenuOpen] = useStateL(false);
  const menuRef = useRefL(null);

  useEffectL(() => {
    const onS = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onS, { passive: true });
    return () => window.removeEventListener("scroll", onS);
  }, []);

  useEffectL(() => {
    if (!menuOpen) return;
    const onClick = (e) => { if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false); };
    const onKey = (e) => { if (e.key === "Escape") setMenuOpen(false); };
    document.addEventListener("mousedown", onClick);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onClick);
      document.removeEventListener("keydown", onKey);
    };
  }, [menuOpen]);

  const go = (path) => () => { setMenuOpen(false); navigate(path); };

  const scrollToId = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 64; // nav offset
    window.scrollTo({ top, behavior: "smooth" });
  };

  return (
    <div className="lp-shell">
      <style>{__LANDING_CSS}</style>

      {/* ── Nav ── */}
      <nav className={`lp-nav ${scrolled ? "scrolled" : ""}`}>
        <div className="lp-nav-row">
          <a href="/" onClick={(e) => { e.preventDefault(); navigate("/"); }}><Brand /></a>
          <div className="lp-nav-links">
            <a href="#features" className="lp-nav-link" onClick={scrollToId("features")}>Features</a>
            <a href="#how" className="lp-nav-link" onClick={scrollToId("how")}>How it works</a>
            <a href="#extensions" className="lp-nav-link" onClick={scrollToId("extensions")}>Apps</a>
            <a href="/privacy" className="lp-nav-link" onClick={(e) => { e.preventDefault(); navigate("/privacy"); }}>Privacy</a>
          </div>
          <div className="lp-nav-actions">
            {user ? (
              <div className="lp-nav-user">
                <button className="btn btn-primary btn-sm lp-cta-open" onClick={() => navigate("/spaces")}>
                  <I.Folder size={14} />
                  <span className="lp-cta-open-label">Open library</span>
                  <I.ArrowR size={13} />
                </button>
                <div ref={menuRef} style={{ position: "relative" }}>
                  <button className="lp-nav-avatar"
                          onClick={() => setMenuOpen((o) => !o)}
                          title={user.name || user.email || "Account"}
                          aria-haspopup="menu"
                          aria-expanded={menuOpen}>
                    {user.picture
                      ? <img src={user.picture} alt="" referrerPolicy="no-referrer" />
                      : (user.name || user.email || "?").charAt(0).toUpperCase()}
                  </button>
                  {menuOpen && (
                    <div className="lp-nav-menu" role="menu">
                      <div className="lp-nav-menu-h">
                        <div className="greet">Signed in</div>
                        <div className="name">
                          {user.name ? <>Hello,&nbsp;<span className="accent">{(user.name || "").split(" ")[0] || user.name}.</span></> : user.email}
                        </div>
                        {user.email && <div className="email">{user.email}</div>}
                      </div>
                      <button className="lp-nav-menu-item" onClick={go("/spaces")}>
                        <I.Folder size={14} /> My library
                      </button>
                      <button className="lp-nav-menu-item" onClick={go("/account")}>
                        <I.Settings size={14} /> Account settings
                      </button>
                      <button className="lp-nav-menu-item" onClick={go("/privacy")}>
                        <I.Lock size={14} /> Privacy
                      </button>
                      <div className="lp-nav-menu-sep" />
                      <button className="lp-nav-menu-item danger" onClick={() => { setMenuOpen(false); onLogout?.(); }}>
                        <I.Logout size={14} /> Sign out
                      </button>
                    </div>
                  )}
                </div>
              </div>
            ) : (
              <>
                <button className="btn btn-ghost btn-sm" onClick={() => navigate("/login")}>Sign in</button>
                <button className="btn btn-primary btn-sm" onClick={() => navigate("/login")}>Get started</button>
              </>
            )}
          </div>
        </div>
      </nav>

      {/* ── Hero ── */}
      <header className="lp-hero">
        {user ? (
          <div className="lp-eyebrow-row">
            <span className="lp-eyebrow-dot">★</span>
            <span className="eyebrow lp-eyebrow-welcome">
              <span className="accent">Welcome back,</span>&nbsp;{(user.name || "").split(" ")[0] || user.email || "friend"}
            </span>
          </div>
        ) : (
          <div className="lp-eyebrow-row">
            <span className="lp-eyebrow-dot">★</span>
            <span className="eyebrow">v2.1 · Browsers, iOS & Android</span>
          </div>
        )}
        <h1>
          One library<br />for every <span className="accent">bookmark</span> you keep.
        </h1>
        <p className="lp-hero-sub">
          BUKMAK collects the links you save — from Chrome, Firefox, Edge, your iPhone, your Android —
          into one calm, searchable place. Folders, tags, and a search bar that never makes you wait.
        </p>
        <div className="lp-cta-row">
          {user ? (
            <>
              <button className="btn btn-primary btn-lg" onClick={() => navigate("/spaces")}>
                Open your library <I.ArrowR size={16} />
              </button>
              <button className="btn btn-outline btn-lg" onClick={() => navigate("/account")}>
                Account settings
              </button>
            </>
          ) : (
            <>
              <button className="btn btn-primary btn-lg" onClick={() => navigate("/login")}>
                Get started — it's free <I.ArrowR size={16} />
              </button>
              <button className="btn btn-outline btn-lg" onClick={() => navigate("/spaces")}>
                See the demo
              </button>
            </>
          )}
        </div>
      </header>

      {/* ── Hero mockup ── */}
      <div className="lp-mockup-wrap">
        <div className="lp-mockup-stage">
          <HeroMockup />
        </div>
      </div>

      {/* ── Apps + extensions section ── */}
      <section className="lp-section" id="extensions" style={{ paddingTop: 32, paddingBottom: 48 }}>
        <div className="lp-section-h">
          <div className="lp-section-h-left">
            <div className="lp-section-eyebrow eyebrow">Apps & extensions</div>
            <h2 className="lp-section-title">
              Save from anywhere.<br /><span className="accent">Find from everywhere.</span>
            </h2>
            <p className="lp-section-sub">
              Install once on the browsers and devices you use — every save lands in the same
              library, instantly synced. Mobile, desktop, work laptop, all in lockstep.
            </p>
          </div>
          <div className="lp-section-aside">Free · No sign-up to try</div>
        </div>

        <div className="lp-ext-group">
          <div className="lp-ext-group-h">
            <span className="lp-ext-group-label">Browser extensions</span>
            <span className="lp-ext-group-meta">Chrome · Firefox · Edge</span>
          </div>
          <div className="lp-ext-row">
            {LP_BROWSERS.map(({ name, logo: Logo, href }) => (
              <a key={name} className="lp-ext-btn" href={href} target="_blank" rel="noopener noreferrer">
                <Logo size={28} />
                <span className="lp-ext-btn-text">
                  <span className="sub">Add to</span>
                  <span className="name">{name}</span>
                </span>
              </a>
            ))}
          </div>
        </div>

        <div className="lp-ext-group">
          <div className="lp-ext-group-h">
            <span className="lp-ext-group-label">Mobile apps</span>
            <span className="lp-ext-group-meta">New · iOS 16+ · Android 10+</span>
          </div>
          <div className="lp-ext-row">
            {LP_MOBILE.map(({ name, sub, logo: Logo }) => (
              <a key={name} className="lp-ext-btn" href="#" onClick={(e) => e.preventDefault()}>
                <Logo size={28} />
                <span className="lp-ext-btn-text">
                  <span className="sub">{sub}</span>
                  <span className="name">{name}</span>
                </span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ── Features ── */}
      <section className="lp-section" id="features">
        <div className="lp-section-h">
          <div className="lp-section-h-left">
            <div className="lp-section-eyebrow eyebrow">Features</div>
            <h2 className="lp-section-title">
              Everything you need.<br />
              <span className="accent">Nothing you don't.</span>
            </h2>
            <p className="lp-section-sub">
              A focused set of tools, designed for people who actually save things and come back to them.
            </p>
          </div>
          <div className="lp-section-aside">SIX · CORE · FEATURES</div>
        </div>
        <div className="lp-features">
          {LP_FEATURES.map((f) => {
            const IconC = f.icon;
            return (
              <div key={f.num} className="lp-feature">
                <div className="lp-feature-num">{f.num}</div>
                <div className="lp-feature-icon"><IconC size={18} /></div>
                <h3>{f.title}</h3>
                <p>{f.body}</p>
              </div>
            );
          })}
        </div>
      </section>

      {/* ── How it works ── */}
      <section className="lp-section" id="how">
        <div className="lp-section-h">
          <div className="lp-section-h-left">
            <div className="lp-section-eyebrow eyebrow">How it works</div>
            <h2 className="lp-section-title">
              Up and running<br />
              in <span className="accent">three minutes.</span>
            </h2>
          </div>
        </div>
        <div className="lp-steps">
          {LP_STEPS.map((s) => (
            <div key={s.num} className="lp-step">
              <div className="lp-step-mark"></div>
              <div className="lp-step-num">{s.num}</div>
              <h3>{s.title} <span className="accent">{s.italic}</span></h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>

        <div className="lp-stats">
          <div className="lp-stat">
            <div className="lp-stat-n">12k+</div>
            <div className="lp-stat-l">Active libraries</div>
          </div>
          <div className="lp-stat">
            <div className="lp-stat-n">2.4M</div>
            <div className="lp-stat-l">Bookmarks saved</div>
          </div>
          <div className="lp-stat">
            <div className="lp-stat-n">5</div>
            <div className="lp-stat-l">Platforms supported</div>
          </div>
          <div className="lp-stat">
            <div className="lp-stat-n">0</div>
            <div className="lp-stat-l">Trackers, ever</div>
          </div>
        </div>
      </section>

      {/* ── CTA ── */}
      <section className="lp-cta-block">
        <div className="lp-cta-box">
          <h2 className="lp-cta-h">
            {user
              ? <>Pick up where you <span className="accent">left off.</span></>
              : <>Take control of <span className="accent">your bookmarks.</span></>}
          </h2>
          <p className="lp-cta-sub">
            {user
              ? "Your library is one click away."
              : "Free, fast, and no credit card to start. Open the library and see for yourself."}
          </p>
          <button className="btn btn-lg lp-cta-btn" onClick={() => navigate(user ? "/spaces" : "/login")}>
            {user ? "Open your library" : "Open BUKMAK"} <I.ArrowR size={16} />
          </button>
        </div>
      </section>

      {/* ── Footer ── */}
      <footer className="lp-footer">
        <div className="lp-footer-row">
          <Brand size={18} />
          <span>© 2026 BUKMAK · A bookmark manager for the way you actually browse</span>
          <div style={{ display: "flex", gap: 16 }}>
            <a href="/privacy" onClick={(e) => { e.preventDefault(); navigate("/privacy"); }}>Privacy</a>
            <a href="#" onClick={(e) => e.preventDefault()} style={{ cursor: "default", opacity: 0.6 }}>Terms</a>
            <a href="mailto:support@bukmak.com">Contact</a>
          </div>
        </div>
      </footer>
    </div>
  );
}

function HeroMockup() {
  return (
    <div className="lp-mockup">
      <div className="lp-mockup-chrome">
        <div className="lp-mockup-dots">
          <span></span><span></span><span></span>
        </div>
        <div className="lp-mockup-url">bukmak.app / library</div>
        <div style={{ width: 30 }}></div>
      </div>
      <div className="lp-mockup-body">
        <div className="lp-mockup-sb">
          <div className="lp-mockup-sb-h">Library</div>
          <div className="lp-mockup-sb-row active">
            <I.Folder size={13} /> All bookmarks
          </div>
          <div className="lp-mockup-sb-row">
            <I.Star size={13} /> Favorites
          </div>
          <div className="lp-mockup-sb-row">
            <I.Clock size={13} /> Recent
          </div>
          <div className="lp-mockup-sb-h" style={{ marginTop: 12 }}>Folders</div>
          <div className="lp-mockup-sb-row"><I.Folder size={13} /> Design</div>
          <div className="lp-mockup-sb-row" style={{ paddingLeft: 22 }}><I.Folder size={13} /> Typography</div>
          <div className="lp-mockup-sb-row"><I.Folder size={13} /> Development</div>
          <div className="lp-mockup-sb-row"><I.Folder size={13} /> To read</div>
        </div>
        <div className="lp-mockup-main">
          <div className="lp-mockup-main-h">All bookmarks</div>
          <div className="lp-mockup-main-sub mono">142 bookmarks · 11 tags</div>
          <div className="lp-mockup-list">
            {LP_MOCK_ROWS.map((r, i) => (
              <div key={i} className="lp-mockup-row" style={{ animationDelay: `${i * 80}ms` }}>
                <div className="lp-mockup-fav">{r.fav}</div>
                <div>
                  <div className="lp-mockup-title">{r.title}</div>
                  <div className="lp-mockup-host">{r.host}</div>
                </div>
                <div className="lp-mockup-tag">{r.tag}</div>
                <div className="lp-mockup-host">{i + 1}d</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.LandingPage = LandingPage;