// rokkor.us marketing site — section components.
const { Button, Badge, Card } = window.ROKKORDesignSystem_4e99ef;
const I = window.RokkorIcons;

function SiteNav() {
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 20, background: "oklch(0.972 0.012 87 / 0.85)", backdropFilter: "blur(10px)", borderBottom: "1px solid var(--border)" }}>
      <div style={{ maxWidth: "var(--page-max)", margin: "0 auto", padding: "0 28px", height: 68, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
          <img src="assets/rokkor-wheel.png" alt="ROKKOR" style={{ width: 40, height: 40 }} />
          <span style={{ font: "700 22px/1 var(--font-display)", letterSpacing: "0.07em", color: "var(--ink-900)" }}>ROKKOR</span>
        </div>
        <nav style={{ display: "flex", alignItems: "center", gap: 30 }}>
          {[["How it works", "#how"], ["Tour", "#tour"], ["Features", "#features"], ["Privacy", "#privacy"]].map(([l, href]) => (
            <a key={l} href={href} style={{ font: "500 14px/1 var(--font-sans)", color: "var(--ink-600)", textDecoration: "none", whiteSpace: "nowrap" }}>{l}</a>
          ))}
          <Button variant="default" size="sm" icon={<I.Clock size={15} />} style={{ cursor: "default" }}>Coming soon</Button>
        </nav>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section style={{ position: "relative", overflow: "hidden", background: "radial-gradient(120% 90% at 72% 42%, var(--gold-100) 0%, transparent 46%), radial-gradient(80% 70% at 50% 0%, oklch(0.99 0.008 88) 0%, transparent 60%)" }}>
      <div style={{ maxWidth: "var(--page-max)", margin: "0 auto", padding: "92px 28px 80px", display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 56, alignItems: "center" }}>
        <div>
          <div style={{ display: "flex", gap: 8, marginBottom: 22 }}>
            <Badge tone="ink" caps>Speech-to-text app</Badge>
            <Badge tone="success" dot>100% local</Badge>
          </div>
          <h1 style={{ font: "600 72px/1.02 var(--font-display)", letterSpacing: "0.02em", color: "var(--ink-900)", margin: 0, textTransform: "uppercase" }}>
            Speech to text.<br /><span style={{ color: "var(--oxblood-600)" }}>Simplified.</span>
          </h1>
          <p style={{ font: "italic 400 21px/1.5 var(--font-serif)", color: "var(--ink-600)", margin: "24px 0 0", maxWidth: 480 }}>
            Your local voice layer. Instant dictation anywhere, a personal voice memory that gets smarter — and your words never leave your machine.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 34, alignItems: "center" }}>
            <Button variant="default" size="lg" icon={<I.Clock size={18} />} style={{ cursor: "default" }}>Coming soon</Button>
            <Button variant="outline" size="lg" icon={<I.Play size={16} />} onClick={() => { const el = document.getElementById("tour"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 24, behavior: "smooth" }); }}>Watch it work</Button>
          </div>
          <div style={{ display: "flex", gap: 22, marginTop: 26, font: "400 13px/1 var(--font-sans)", color: "var(--ink-500)" }}>
            <span>· No cloud</span><span>· No upload</span><span>· No telemetry</span>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
          <img src="assets/rokkor-hero.png" alt="ROKKOR — speech-to-text emblem with audio waveform" style={{ width: "100%", maxWidth: 520, height: "auto", filter: "drop-shadow(0 18px 30px oklch(0.30 0.03 50 / 0.20))" }} />
        </div>
      </div>
      <hr style={{ border: 0, height: 2, background: "var(--rule-gold)", maxWidth: "var(--page-max)", margin: "0 auto" }} />
    </section>
  );
}

function Features() {
  const items = [
    [I.Mic, "Instant dictation", "Global hotkey, sub-200ms feel. Talk in any app and the text lands at your cursor — formatted, punctuated, done."],
    [I.Brain, "Voice that remembers", "Every correction becomes first-class training data. Semantic search over everything you've ever said, stored locally."],
    [I.Lock, "Radically private", "Speech-to-text and grammar run entirely on-device. The only network is localhost. No cloud, no upload, no telemetry."],
  ];
  return (
    <section id="features" style={{ maxWidth: "var(--page-max)", margin: "0 auto", padding: "84px 28px" }}>
      <div className="rk-eyebrow" style={{ marginBottom: 12 }}>Why ROKKOR</div>
      <h2 style={{ font: "600 42px/1.1 var(--font-display)", letterSpacing: "0.03em", color: "var(--ink-900)", margin: 0, textTransform: "uppercase", maxWidth: 620 }}>A local-first voice layer for your whole digital life</h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 44 }}>
        {items.map(([Ic, title, body], i) => (
          <Card key={i} padded>
            <div style={{ width: 46, height: 46, borderRadius: "var(--radius-md)", background: "var(--oxblood-100)", color: "var(--oxblood-600)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>
              <Ic size={22} />
            </div>
            <div style={{ font: "600 19px/1.2 var(--font-sans)", color: "var(--ink-900)", marginBottom: 8 }}>{title}</div>
            <div style={{ font: "400 15px/1.6 var(--font-sans)", color: "var(--ink-600)" }}>{body}</div>
          </Card>
        ))}
      </div>
    </section>
  );
}

function PrivacyBand() {
  return (
    <section id="privacy" style={{ background: "var(--titlebar)" }}>
      <div style={{ maxWidth: "var(--page-max)", margin: "0 auto", padding: "76px 28px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }}>
        <div>
          <div style={{ font: "600 12px/1 var(--font-display)", letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--gold-500)", marginBottom: 14 }}>Privacy by architecture</div>
          <h2 style={{ font: "600 38px/1.15 var(--font-display)", letterSpacing: "0.03em", color: "var(--paper-100)", margin: 0, textTransform: "uppercase" }}>Your voice never leaves your PC</h2>
          <p style={{ font: "italic 400 19px/1.5 var(--font-serif)", color: "var(--paper-300)", marginTop: 18, maxWidth: 440 }}>
            Not encrypted-then-uploaded. Not "private mode." Simply never sent. The model runs on your hardware.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          {[["0", "bytes uploaded"], ["<2.8GB", "peak RAM"], ["27", "languages"], ["∞", "private voice logs"]].map(([n, l], i) => (
            <div key={i} style={{ background: "oklch(1 0 0 / 0.04)", border: "1px solid oklch(1 0 0 / 0.10)", borderRadius: "var(--radius-xl)", padding: "22px 20px" }}>
              <div style={{ font: "600 40px/1 var(--font-serif)", color: i % 2 ? "var(--gold-500)" : "var(--oxblood-400)" }}>{n}</div>
              <div style={{ font: "400 13px/1.3 var(--font-sans)", color: "var(--paper-300)", marginTop: 8 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section style={{ maxWidth: "var(--page-max)", margin: "0 auto", padding: "88px 28px", textAlign: "center" }}>
      <img src="assets/rokkor-wheel.png" alt="" style={{ width: 68, height: 68, marginBottom: 22 }} />
      <h2 style={{ font: "600 48px/1.05 var(--font-display)", letterSpacing: "0.03em", color: "var(--ink-900)", margin: 0, textTransform: "uppercase" }}>Start dictating soon</h2>
      <p style={{ font: "italic 400 19px/1.5 var(--font-serif)", color: "var(--ink-600)", margin: "16px auto 0", maxWidth: 460 }}>Free, local by default. Yours forever.</p>
      <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 30 }}>
        <Button variant="default" size="lg" icon={<I.Clock size={18} />} style={{ cursor: "default" }}>Coming soon</Button>
      </div>
    </section>
  );
}

function SiteFooter() {
  const cols = [
    ["Product", [["Coming soon", "#"], ["Live tour", "#tour"], ["Features", "#features"], ["How it works", "#how"]]],
    ["Privacy", [["Why local", "#privacy"], ["FAQ", "#"], ["GitHub", "https://github.com/mattmre"]]],
    ["Company", [["rokkor.us", "#"], ["Contact", "#"], ["Changelog", "#"]]],
  ];
  return (
    <footer style={{ borderTop: "1px solid var(--border)", background: "var(--paper-50)" }}>
      <div style={{ maxWidth: "var(--page-max)", margin: "0 auto", padding: "56px 28px 28px", display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 40 }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
            <img src="assets/rokkor-wheel.png" alt="" style={{ width: 36, height: 36 }} />
            <span style={{ font: "700 20px/1 var(--font-display)", letterSpacing: "0.06em", color: "var(--ink-900)" }}>ROKKOR</span>
          </div>
          <p style={{ font: "italic 400 14px/1.5 var(--font-serif)", color: "var(--ink-500)", margin: 0, maxWidth: 240 }}>
            Speech to text. Simplified. Your local voice layer — private by architecture.
          </p>
        </div>
        {cols.map(([title, links]) => (
          <div key={title}>
            <div style={{ font: "600 11px/1 var(--font-mono)", letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-500)", marginBottom: 16 }}>{title}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
              {links.map(([l, href]) => {
                const ext = href.startsWith("http");
                return (
                  <a key={l} href={href} {...(ext ? { target: "_blank", rel: "noreferrer" } : {})} style={{ font: "400 14px/1 var(--font-sans)", color: "var(--ink-700, var(--ink-600))", textDecoration: "none" }}>{l}</a>
                );
              })}
            </div>
          </div>
        ))}
      </div>
      <div style={{ borderTop: "1px solid var(--border)" }}>
        <div style={{ maxWidth: "var(--page-max)", margin: "0 auto", padding: "20px 28px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ font: "400 12px/1 var(--font-mono)", color: "var(--ink-500)" }}>© 2026 ROKKOR · rokkor.us</span>
          <span style={{ display: "flex", alignItems: "center", gap: 7, font: "400 12px/1 var(--font-sans)", color: "var(--ink-500)" }}>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--oxblood-500)" }} /> 100% local · private
          </span>
        </div>
      </div>
    </footer>
  );
}

function HowItWorks() {
  const steps = [
    [I.Mic, "Press your hotkey", "Hold Ctrl + Win anywhere — any app, any text field. Speak naturally; ROKKOR captures the audio locally."],
    [I.Wand, "On-device transcribe + polish", "A local model turns speech to text and a small grammar pass cleans it up in your style. Nothing is uploaded."],
    [I.Check, "Pasted at your cursor", "The finished text lands exactly where you were typing. Any edit you make is learned for next time."],
  ];
  return (
    <section id="how" style={{ maxWidth: "var(--page-max)", margin: "0 auto", padding: "84px 28px 40px" }}>
      <div className="rk-eyebrow" style={{ marginBottom: 12 }}>How it works</div>
      <h2 style={{ font: "600 42px/1.1 var(--font-display)", letterSpacing: "0.03em", color: "var(--ink-900)", margin: 0, textTransform: "uppercase", maxWidth: 640 }}>Speak. Polished text appears. It learns.</h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 44 }}>
        {steps.map(([Ic, title, body], i) => (
          <div key={i} style={{ position: "relative", paddingTop: 8 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
              <span style={{ font: "600 20px/1 var(--font-serif)", color: "var(--gold-ink)" }}>0{i + 1}</span>
              <span style={{ flex: 1, height: 1, background: "var(--rule-gold)" }} />
              <span style={{ color: "var(--oxblood-600)" }}><Ic size={22} /></span>
            </div>
            <div style={{ font: "600 19px/1.2 var(--font-sans)", color: "var(--ink-900)", marginBottom: 8 }}>{title}</div>
            <div style={{ font: "400 15px/1.6 var(--font-sans)", color: "var(--ink-600)" }}>{body}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function AppTour() {
  return (
    <section id="tour" style={{ maxWidth: "var(--page-max)", margin: "0 auto", padding: "64px 28px 84px" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 16, marginBottom: 26 }}>
        <div>
          <div className="rk-eyebrow" style={{ marginBottom: 12 }}>Live tour</div>
          <h2 style={{ font: "600 42px/1.1 var(--font-display)", letterSpacing: "0.03em", color: "var(--ink-900)", margin: 0, textTransform: "uppercase", maxWidth: 640 }}>Click through the actual app</h2>
        </div>
        <p style={{ font: "italic 400 17px/1.5 var(--font-serif)", color: "var(--ink-600)", margin: 0, maxWidth: 360 }}>
          This is the real ROKKOR interface, running right here. Switch tabs, toggle settings, preview the dictation pill.
        </p>
      </div>

      <div style={{ borderRadius: "var(--radius-2xl)", overflow: "hidden", border: "1px solid var(--border-strong)", boxShadow: "var(--shadow-lg)", background: "var(--titlebar)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "11px 16px", background: "var(--titlebar)", borderBottom: "1px solid oklch(1 0 0 / 0.08)" }}>
          <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#E66" }} />
          <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#E9B44C" }} />
          <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#5FB87A" }} />
          <span style={{ font: "500 12px/1 var(--font-mono)", color: "var(--paper-300)", marginLeft: 10 }}>ROKKOR — Local speech-to-text</span>
          <span style={{ marginLeft: "auto", font: "500 11px/1 var(--font-mono)", color: "var(--gold-500)" }}>● live demo</span>
        </div>
        <iframe
          src="app/index.html"
          title="ROKKOR app — interactive demo"
          style={{ display: "block", width: "100%", height: 720, border: "none", background: "var(--background)" }}
        />
      </div>
      <div style={{ textAlign: "center", marginTop: 16, font: "400 13px/1.4 var(--font-sans)", color: "var(--ink-500)" }}>
        Fully interactive — nothing here is sent anywhere, just like the real app.
      </div>
    </section>
  );
}

function BuiltFor() {
  const who = [
    [I.Pen, "Writers", "Draft at the speed of speech. Your phrasing, your punctuation — learned over time, not flattened into generic prose."],
    [I.Cpu, "Developers", "Dictate commit messages, comments, and chat without breaking flow. Jargon and symbols stay intact, offline."],
    [I.Brain, "Researchers", "Years of voice notes in a fast, private knowledge base. Ask \u201cwhat did I say about X?\u201d and actually find it."],
  ];
  return (
    <section style={{ background: "var(--paper-50)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div style={{ maxWidth: "var(--page-max)", margin: "0 auto", padding: "84px 28px" }}>
        <div className="rk-eyebrow" style={{ marginBottom: 12 }}>Built for</div>
        <h2 style={{ font: "600 42px/1.1 var(--font-display)", letterSpacing: "0.03em", color: "var(--ink-900)", margin: 0, textTransform: "uppercase", maxWidth: 640 }}>Power users who live in text</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 44 }}>
          {who.map(([Ic, title, body], i) => (
            <div key={i} style={{ display: "flex", gap: 16 }}>
              <div style={{ width: 44, height: 44, flex: "none", borderRadius: "var(--radius-md)", background: "var(--gold-100)", color: "var(--gold-ink)", display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid var(--notice-border)" }}>
                <Ic size={21} />
              </div>
              <div>
                <div style={{ font: "600 18px/1.2 var(--font-sans)", color: "var(--ink-900)", marginBottom: 6 }}>{title}</div>
                <div style={{ font: "400 14.5px/1.6 var(--font-sans)", color: "var(--ink-600)" }}>{body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const qs = [
    ["Is anything sent to the cloud?", "No. Speech-to-text and the grammar pass both run on your machine. The only network is a local server on localhost, plus optional one-time model downloads you start yourself."],
    ["What does it run on?", "Windows today, with Linux (Wayland/X11) as a first-class target. The hot path stays under ~2.8 GB RAM on a mid-range 2025–2026 laptop."],
    ["How does it \u201cget smarter\u201d?", "Every correction you make is stored locally as a first-class example and fed back into the grammar pass, so ROKKOR learns your style, jargon, and fixes over time."],
    ["Do I need Postgres?", "No. Ultra-light mode uses a local SQLite vector cache. Connect a local Postgres + pgvector only if you want years of semantic history at scale."],
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ maxWidth: 820, margin: "0 auto", padding: "84px 28px" }}>
      <div className="rk-eyebrow" style={{ marginBottom: 12 }}>Questions</div>
      <h2 style={{ font: "600 40px/1.1 var(--font-display)", letterSpacing: "0.03em", color: "var(--ink-900)", margin: "0 0 36px", textTransform: "uppercase" }}>Frequently asked</h2>
      <div style={{ display: "flex", flexDirection: "column" }}>
        {qs.map(([q, a], i) => {
          const isOpen = open === i;
          return (
            <div key={i} style={{ borderTop: "1px solid var(--border)" }}>
              <button onClick={() => setOpen(isOpen ? -1 : i)} style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "20px 0", background: "none", border: "none", cursor: "pointer", textAlign: "left" }}>
                <span style={{ font: "600 18px/1.3 var(--font-sans)", color: "var(--ink-900)" }}>{q}</span>
                <span style={{ font: "500 22px/1 var(--font-sans)", color: "var(--oxblood-600)", transform: isOpen ? "rotate(45deg)" : "none", transition: "transform var(--dur-base) var(--ease-out)" }}>+</span>
              </button>
              {isOpen ? <p style={{ font: "400 15px/1.65 var(--font-sans)", color: "var(--ink-600)", margin: "0 0 22px", maxWidth: 680 }}>{a}</p> : null}
            </div>
          );
        })}
      </div>
    </section>
  );
}

window.RokkorSite = { SiteNav, Hero, HowItWorks, AppTour, Features, BuiltFor, PrivacyBand, FAQ, CTA, SiteFooter };