// Klombic — Static page contents

const HowItWorks = ({ go }) => {
  const steps = [
    {
      n:"01", t:"Pick mode + plan", time:"~30 sec",
      d:"Choose how to fill your slots, then pick how many slots to fill.",
      bubbles: [
        { k:"Mode", v:"Validate names you bring · generate from a brief · or mix the two." },
        { k:"Plan", v:"3 candidates at $9.99 · 5 at $13.99 · 10 at $19.99 — same checks per name." },
        { k:"Why it matters", v:"Mode determines the input we collect. Plan determines breadth — bigger batch = better odds one clears every constraint." },
      ],
    },
    {
      n:"02", t:"Set constraints", time:"~1 min",
      d:"Set the hard rules each candidate has to satisfy. Two knobs today; more on the roadmap.",
      bubbles: [
        { k:"TLDs", v:".com / .io / .app / .dev / .co / .ai / .xyz / .so — right-click any to mark required. We won't recommend a name unless every required TLD is free." },
        { k:"Shopify slug", v:"On or off. If on, we check apps.shopify.com/<slug> for collisions. Useful if you're shipping a Shopify app." },
        { k:"Roadmap", v:"USPTO class picker, additional marketplace-handle checks (Amazon / eBay / Etsy / TikTok / Walmart / App Store / Play Store), and a configurable cross-language scan tier. Today's defaults are USPTO class 042 (SaaS) and a 15-language scan." },
      ],
    },
    {
      n:"03", t:"Pick archetype", time:"~30 sec",
      d:"Tell us the voice you're aiming for. We weight the final ranking accordingly.",
      bubbles: [
        { k:"Operator",  v:"Linear · Stripe · Plausible — clean, technical, slightly dry." },
        { k:"Mineral",   v:"Granite · Slate · Cobalt — solid, durable, weighty." },
        { k:"Lab",       v:"Anthropic · Hex · Retool — research-flavored, careful." },
        { k:"Mythic",    v:"Atlas · Hermes · Janus — classical, reverent." },
        { k:"Civic",     v:"Bench · Plaza · Common — public-square, communal." },
        { k:"Wordplay",  v:"Notion · Figma · Loom — short, twisty, memorable." },
        { k:"Compound",  v:"Postmark · Linkfire · Datadog — two real morphemes blended." },
        { k:"Coined",    v:"Vercel · Klombic · Resend — fully invented, no extant root." },
      ],
    },
    {
      n:"04", t:"We run the six checks", time:"~3 hr",
      d:"All six on every candidate. No skipping, no upsells. The list isn't a secret:",
      // Bullet list of the six checks, shown right under the description.
      bullets: [
        "USPTO trademark — live and dead exact-string counts",
        "Domain availability — across every TLD you flagged",
        "Shopify slug — collision check on the App Store",
        "Sound feel — how light/heavy and soft/sharp the name reads",
        "Memorability — how sticky the name is when said out loud",
        "Cross-language — 15+ languages scanned for slang and false friends",
      ],
      bubbles: [
        { k:"USPTO trademark", v:"We pull Live and Dead exact-string counts directly from the USPTO's public trademark database. Same data the examiners look at." },
        { k:"Domain availability", v:"Real-time prices and availability across the TLDs you picked. Live registry feed, not a stale cache." },
        { k:"Shopify slug", v:"Direct check of apps.shopify.com/<slug>. If a Shopify app already owns the name, you'll know in seconds." },
        { k:"Sound feel", v:"How the name lands when spoken — light vs heavy, sharp vs soft, friendly vs serious. Based on published phoneme research (Klink 2000)." },
        { k:"Memorability", v:"How easy the name is to remember and repeat. Length fit, distinctive opening letter, vowel-consonant balance. Sourced to peer-reviewed work (Miller 1956, Lowrey-Shrum 2007)." },
        { k:"Cross-language", v:"We use AI to check if the name is slang, a false friend, or offensive in 15+ major languages. Flagged collisions show up by severity in the report." },
      ],
    },
    {
      n:"05", t:"You get the PDF", time:"≤ 4 hr",
      d:"One file in your inbox. Verdict per name, side-by-side comparison, the one we'd file.",
      bubbles: [
        { k:"Cover", v:"Name list, report ID, top-recommendation summary at a glance." },
        { k:"Visual comparison", v:"Sound-symbolism vibe space + memorability × pronounceability charts. All N candidates plotted." },
        { k:"Per-name analysis", v:"Detail card for each candidate: USPTO, domains, Shopify, vibe, memorability, cross-language flags." },
        { k:"Verdict + action plan", v:"The single name we'd file (or escalate), with registration sequence and TESS due-diligence link." },
      ],
    },
  ];

  // MANUAL navigation — user controls advance with Next / Back / clicks.
  const [active, setActive] = React.useState(0);
  const cur = steps[active];
  const goNext = () => setActive(a => Math.min(steps.length - 1, a + 1));
  const goBack = () => setActive(a => Math.max(0, a - 1));

  return (
    <section className="section">
      <div className="page">
        <div className="section-label">How it works</div>
        <div className="sh">
          <h2>Four hours, end to end.</h2>
          <div className="right">I built Klombic because I spent two weeks doing this by hand before a previous launch. The tooling exists — nobody had stitched it into one cheap pass. So I did.</div>
        </div>

        {/* Decision flowchart — shows the branching at mode pick, then linear path to PDF */}
        <div className="how-flow">
          <svg viewBox="0 0 1180 280" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Klombic order flow chart">
            {/* defs */}
            <defs>
              <marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
                <path d="M0,0 L10,5 L0,10 z" fill="#1F4E3D"/>
              </marker>
              <style>{`
                .flow-node{fill:#FAFAFA;stroke:#D8D4CB;stroke-width:1}
                .flow-node-mode{fill:#F3F0E9}
                .flow-node-active{fill:#1F4E3D;stroke:#1F4E3D}
                .flow-text{font:500 12px/1 "Inter Tight",-apple-system,system-ui,sans-serif;fill:#1A1A1A}
                .flow-text-paper{fill:#FAFAFA}
                .flow-mono{font:500 10px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:0.06em;text-transform:uppercase;fill:#8A8780}
                .flow-mode-letter{font:600 14px/1 "JetBrains Mono",ui-monospace,monospace;fill:#FAFAFA}
                .flow-line{stroke:#1F4E3D;stroke-width:1.5;fill:none}
                .flow-line-dashed{stroke:#1F4E3D;stroke-width:1.5;fill:none;stroke-dasharray:4 4}
              `}</style>
            </defs>

            {/* Decision node: What do you have? */}
            <rect className="flow-node" x="20" y="116" width="150" height="48" rx="4"/>
            <text className="flow-mono" x="32" y="134">DECISION</text>
            <text className="flow-text" x="32" y="152">What do you have?</text>

            {/* Three branches converging */}
            <path className="flow-line" d="M 170 132 C 200 132, 200 50, 230 50" markerEnd="url(#arr)"/>
            <path className="flow-line" d="M 170 140 L 230 140" markerEnd="url(#arr)"/>
            <path className="flow-line" d="M 170 148 C 200 148, 200 230, 230 230" markerEnd="url(#arr)"/>

            {/* Mode A · Validate */}
            <g>
              <rect className="flow-node-active" x="240" y="26" width="180" height="48" rx="4"/>
              <circle cx="262" cy="50" r="11" fill="#FAFAFA"/>
              <text className="flow-mode-letter" style={{fill:'#1F4E3D'}} x="262" y="54" textAnchor="middle">A</text>
              <text className="flow-text-paper" style={{fontWeight:600}} x="280" y="46">Names ready</text>
              <text className="flow-text-paper" style={{fontSize:11,opacity:0.85}} x="280" y="62">You give us 3 / 5 / 10</text>
            </g>

            {/* Mode B · Generate */}
            <g>
              <rect className="flow-node-active" x="240" y="116" width="180" height="48" rx="4"/>
              <circle cx="262" cy="140" r="11" fill="#FAFAFA"/>
              <text className="flow-mode-letter" style={{fill:'#1F4E3D'}} x="262" y="144" textAnchor="middle">B</text>
              <text className="flow-text-paper" style={{fontWeight:600}} x="280" y="136">Need names</text>
              <text className="flow-text-paper" style={{fontSize:11,opacity:0.85}} x="280" y="152">You write a brief</text>
            </g>

            {/* Mode C · Hybrid */}
            <g>
              <rect className="flow-node-active" x="240" y="206" width="180" height="48" rx="4"/>
              <circle cx="262" cy="230" r="11" fill="#FAFAFA"/>
              <text className="flow-mode-letter" style={{fill:'#1F4E3D'}} x="262" y="234" textAnchor="middle">C</text>
              <text className="flow-text-paper" style={{fontWeight:600}} x="280" y="226">A mix</text>
              <text className="flow-text-paper" style={{fontSize:11,opacity:0.85}} x="280" y="242">You give 1 to N−1, AI fills</text>
            </g>

            {/* Converge into Constraints */}
            <path className="flow-line" d="M 420 50 C 450 50, 450 132, 480 132" markerEnd="url(#arr)"/>
            <path className="flow-line" d="M 420 140 L 480 140" markerEnd="url(#arr)"/>
            <path className="flow-line" d="M 420 230 C 450 230, 450 148, 480 148" markerEnd="url(#arr)"/>

            {/* Step: Constraints */}
            <rect className="flow-node" x="490" y="116" width="120" height="48" rx="4"/>
            <text className="flow-mono" x="500" y="134">STEP 02</text>
            <text className="flow-text" x="500" y="152">Constraints</text>

            <line className="flow-line" x1="610" y1="140" x2="640" y2="140" markerEnd="url(#arr)"/>

            {/* Step: Archetype */}
            <rect className="flow-node" x="640" y="116" width="120" height="48" rx="4"/>
            <text className="flow-mono" x="650" y="134">STEP 03</text>
            <text className="flow-text" x="650" y="152">Archetype</text>

            <line className="flow-line" x1="760" y1="140" x2="790" y2="140" markerEnd="url(#arr)"/>

            {/* Step: Six checks (highlighted action) */}
            <rect className="flow-node-active" x="790" y="106" width="180" height="68" rx="4"/>
            <text className="flow-mono" style={{fill:'rgba(250,250,250,0.7)'}} x="804" y="126">PROCESSING · ~3 HR</text>
            <text className="flow-text-paper" style={{fontWeight:600,fontSize:14}} x="804" y="148">Six checks per candidate</text>
            <text className="flow-text-paper" style={{fontSize:10,opacity:0.85}} x="804" y="164">All names, every time</text>

            <line className="flow-line" x1="970" y1="140" x2="1000" y2="140" markerEnd="url(#arr)"/>

            {/* Output: PDF */}
            <rect className="flow-node" x="1000" y="116" width="160" height="48" rx="4"/>
            <text className="flow-mono" x="1014" y="134">OUTPUT · ≤ 4 HR</text>
            <text className="flow-text" x="1014" y="152">Ranked PDF · email</text>

            {/* "You are here" highlight — moves to whichever node corresponds to the active step */}
            {(() => {
              const positions = [
                { x: 12,  y: 18,  w: 416, h: 244, label: "01 · You are here" }, // Decision + Mode A/B/C
                { x: 482, y: 110, w: 136, h: 60,  label: "02 · You are here" }, // Constraints
                { x: 632, y: 110, w: 136, h: 60,  label: "03 · You are here" }, // Archetype
                { x: 782, y: 98,  w: 196, h: 84,  label: "04 · You are here" }, // Six-check pass
                { x: 992, y: 110, w: 176, h: 60,  label: "05 · You are here" }, // Output
              ];
              const p = positions[active];
              return (
                <g className="flow-highlight-group">
                  <rect className="flow-highlight"
                    x={p.x} y={p.y} width={p.w} height={p.h}
                    rx="8" fill="none" stroke="#1F4E3D" strokeWidth="3"
                    strokeDasharray="8 6"/>
                  <rect x={p.x} y={p.y - 18} width={140} height={16} rx="3" fill="#1F4E3D"/>
                  <text x={p.x + 8} y={p.y - 6}
                    style={{fill:'#FAFAFA', font:'600 9px/1 "JetBrains Mono",ui-monospace,monospace', letterSpacing:'0.08em', textTransform:'uppercase'}}>
                    {p.label}
                  </text>
                </g>
              );
            })()}
          </svg>
        </div>

        {/* Animated progress bar above the grid */}
        <div className="how-progress">
          <div className="how-progress-track">
            <div className="how-progress-fill" style={{width: `${((active+1)/steps.length)*100}%`}}/>
          </div>
          <div className="how-progress-ticks">
            {steps.map((s, i) => (
              <span key={i} className={`tick ${i<=active?'on':''}`}>{s.n}</span>
            ))}
          </div>
        </div>

        <div className="how-grid">
          {steps.map((s, i) => (
            <div
              className={`how-step ${i===active?'active':''} ${i<active?'done':''}`}
              key={s.n}
              onClick={()=>setActive(i)}
              role="button"
              tabIndex={0}>
              <span className="num">{i<active ? '✓' : s.n}</span>
              <h3>{s.t}</h3>
              <p className="desc">{s.d}</p>
              <span className="time">{s.time}</span>
            </div>
          ))}
        </div>

        {/* Detail panel · what's in the active step (bubbles) */}
        <div className="how-detail">
          <div className="how-detail-head">
            <span className="how-detail-num">{cur.n}</span>
            <div>
              <h3>{cur.t}</h3>
              <span className="how-detail-time">{cur.time} · step {active+1} of {steps.length}</span>
            </div>
          </div>

          {/* Optional bullet list — used when the step has a clear enumerable list (e.g. the 6 checks) */}
          <p className="how-detail-lede">{cur.d}</p>
          {cur.bullets && (
            <ul className="how-detail-bullets">
              {cur.bullets.map((b, i) => (
                <li key={i}><span className="bullet-dot"/>{b}</li>
              ))}
            </ul>
          )}

          <div className="how-bubbles">
            {cur.bubbles.map((b, i) => (
              <div className="how-bubble" key={i}>
                <h4>{b.k}</h4>
                <p>{b.v}</p>
              </div>
            ))}
          </div>
          <div className="how-detail-nav">
            <button className="how-nav-btn" onClick={goBack} disabled={active===0}>← Back</button>
            <div className="how-detail-counter">
              {steps.map((_, i) => (
                <span key={i} className={`how-counter-dot ${i===active?'on':''} ${i<active?'done':''}`} aria-hidden="true"/>
              ))}
            </div>
            <button className="how-nav-btn primary" onClick={goNext} disabled={active===steps.length-1}>
              {active===steps.length-1 ? 'Done' : 'Next →'}
            </button>
          </div>
        </div>

        <div style={{marginTop:48,display:'flex',gap:16}}>
          <a className="btn btn-primary" href="#" onClick={(e)=>{e.preventDefault();go('order')}}>Run a check ↗</a>
          <a className="btn btn-ghost" href="#" onClick={(e)=>{e.preventDefault();go('sample')}}>See a sample report</a>
        </div>
      </div>
    </section>
  );
};

const SampleReport = ({ go }) => {
  const containerRef = React.useRef(null);
  const [status, setStatus] = React.useState('loading');

  React.useEffect(() => {
    let cancelled = false;
    const render = async () => {
      let tries = 0;
      while (!window.pdfjsLib && tries < 50) {
        await new Promise(r => setTimeout(r, 100));
        tries++;
      }
      if (!window.pdfjsLib) { setStatus('error'); return; }
      try {
        const pdf = await window.pdfjsLib.getDocument('/sample-report.pdf').promise;
        if (cancelled || !containerRef.current) return;
        const container = containerRef.current;
        container.innerHTML = '';
        const dpr = Math.min(window.devicePixelRatio || 1, 2);
        const baseScale = 1.4;
        for (let i = 1; i <= pdf.numPages; i++) {
          if (cancelled) return;
          const page = await pdf.getPage(i);
          const viewport = page.getViewport({ scale: baseScale * dpr });
          // Wrap each page in a frame so we can show clear page-cut separators + page #
          const frame = document.createElement('div');
          frame.className = 'pdfjs-page-frame';
          const canvas = document.createElement('canvas');
          canvas.width = viewport.width;
          canvas.height = viewport.height;
          canvas.className = 'pdfjs-page';
          canvas.style.width = (viewport.width / dpr) + 'px';
          canvas.style.height = (viewport.height / dpr) + 'px';
          const label = document.createElement('div');
          label.className = 'pdfjs-page-label';
          label.textContent = `${String(i).padStart(2,'0')} / ${String(pdf.numPages).padStart(2,'0')}`;
          frame.appendChild(canvas);
          frame.appendChild(label);
          container.appendChild(frame);
          await page.render({ canvasContext: canvas.getContext('2d'), viewport }).promise;
        }
        if (!cancelled) setStatus('ready');
      } catch (e) {
        console.error('PDF render failed', e);
        if (!cancelled) setStatus('error');
      }
    };
    render();
    return () => { cancelled = true; };
  }, []);

  return (
  <section className="sample-page">
    <div className="page">
      <div className="section-label">Sample report</div>
      <div className="sh">
        <h2>This is the actual deliverable.</h2>
        <div className="right">No mock-up — the real PDF Klombic generated when we used it on ourselves to pick the brand name. Top 10 candidates, all checks live. <a href="/sample-report.pdf" target="_blank" style={{color:'var(--forest)',fontWeight:500}}>Download the PDF →</a></div>
      </div>

      {/* Real PDF rendered via PDF.js — all pages stacked with clear page-cut separators */}
      <div className="sample-pdfjs">
        {status === 'loading' && (
          <div className="pdfjs-status"><span className="pdfjs-spinner"/> Loading the real report…</div>
        )}
        {status === 'error' && (
          <div className="pdfjs-status pdfjs-error">
            Couldn't render inline. <a href="/sample-report.pdf" target="_blank">Download the PDF instead →</a>
          </div>
        )}
        <div ref={containerRef} className="pdfjs-container"/>
      </div>

      <div className="sample-grid" style={{display:'none'}}>
        <aside className="sample-toc">
          <h5>Contents</h5>
          <a href="#p1">Cover<span>01</span></a>
          <a href="#p2">USPTO + domains<span>02</span></a>
          <a href="#p3">Shopify + slugs<span>03</span></a>
          <a href="#p4">Sound &amp; memory<span>04</span></a>
          <a href="#p5">Cross-language<span>05</span></a>
          <a href="#p6">Verdict<span>06</span></a>
        </aside>
        <div className="sample-pdf">
          <div className="pdf-page cover" id="p1">
            <div className="top"><KlombicMark size={32} variant="paper"/><span style={{fontSize:24,fontWeight:500,letterSpacing:'-0.02em'}}>Klombic</span></div>
            <div>
              <div className="name">CANDIDATE / klombic</div>
              <h2>Brand-name<br/>due-diligence report</h2>
              <p style={{fontSize:14,lineHeight:1.6,color:'rgba(255,255,255,0.75)',margin:'24px 0 0',maxWidth:380}}>USPTO · multi-TLD domain · Shopify slug · sound-symbolism · memorability · cross-language collision.</p>
            </div>
            <div className="footer"><span>Report #2026-0427-K01</span><span>Issued 4h after order · 27 Apr 2026</span></div>
          </div>

          <div className="pdf-page" id="p2">
            <div className="ph"><div style={{display:'flex',alignItems:'center',gap:10}}><KlombicMark size={22}/><span className="wm">Klombic</span></div><span className="mono">CANDIDATE · klombic</span></div>
            <h3 className="kicker">USPTO live marks</h3>
            <div className="row"><span>Class 9 · downloadable software</span><b className="ok">CLEAR</b></div>
            <div className="row"><span>Class 35 · business services</span><b className="ok">CLEAR</b></div>
            <div className="row"><span>Class 42 · SaaS</span><b className="ok">CLEAR</b></div>
            <div className="row"><span>Pending applications (last 90 days)</span><b className="ok">NONE</b></div>
            <h3 className="kicker">Domain availability</h3>
            <div className="row"><span>klombic.com</span><b className="no">TAKEN · parked since 2019 · sedo</b></div>
            <div className="row"><span>klombic.io</span><b className="ok">FILE · $39/yr</b></div>
            <div className="row"><span>klombic.app</span><b className="ok">FILE · $19/yr</b></div>
            <div className="row"><span>klombic.dev</span><b className="ok">FILE · $14/yr</b></div>
            <div className="row"><span>klombic.co</span><b className="ok">FILE · $29/yr</b></div>
            <div className="pageno"><span>klombic.com/reports</span><span>02 / 06</span></div>
          </div>

          <div className="pdf-page" id="p3">
            <div className="ph"><div style={{display:'flex',alignItems:'center',gap:10}}><KlombicMark size={22}/><span className="wm">Klombic</span></div><span className="mono">CANDIDATE · klombic</span></div>
            <h3 className="kicker">Shopify slug + handles</h3>
            <div className="row"><span>klombic.myshopify.com</span><b className="ok">FILE</b></div>
            <div className="row"><span>@klombic · Twitter/X</span><b className="ok">FILE</b></div>
            <div className="row"><span>@klombic · Instagram</span><b className="ok">FILE</b></div>
            <div className="row"><span>github.com/klombic</span><b className="ok">FILE</b></div>
            <div className="row"><span>npmjs.com/klombic</span><b className="ok">FILE</b></div>
            <h3 className="kicker">Trademark distance · top-3 collisions</h3>
            <div className="row"><span>KLOMBIK · class 5 · pharma · DE 2019</span><b className="ok">DIST 0.84</b></div>
            <div className="row"><span>KLOMBIQ · class 42 · abandoned 2021</span><b className="ok">DIST 0.78</b></div>
            <div className="row"><span>KOLOMBIA · class 30 · live · BR</span><b className="ok">DIST 0.71</b></div>
            <div className="pageno"><span>klombic.com/reports</span><span>03 / 06</span></div>
          </div>

          <div className="pdf-page" id="p4">
            <div className="ph"><div style={{display:'flex',alignItems:'center',gap:10}}><KlombicMark size={22}/><span className="wm">Klombic</span></div><span className="mono">CANDIDATE · klombic</span></div>
            <h3 className="kicker">Sound-symbolism breakdown</h3>
            <div className="row"><span>Phonetic compactness</span><b className="ok">+0.62</b></div>
            <div className="row"><span>Initial /kl/ — angular onset</span><b className="ok">technical / sharp</b></div>
            <div className="row"><span>Internal /mb/ — voiced cluster</span><b className="ok">grounded / soft</b></div>
            <div className="row"><span>Closing /ic/ — diminutive</span><b>neutral</b></div>
            <h3 className="kicker">Memorability heuristics</h3>
            <div className="row"><span>Length (7 chars)</span><b className="ok">7.4 / 10</b></div>
            <div className="row"><span>Syllable count (2)</span><b className="ok">optimal</b></div>
            <div className="row"><span>Repeated phonemes</span><b>none</b></div>
            <div className="row"><span>Spelling-from-sound recall</span><b className="ok">8.1 / 10</b></div>
            <div className="pageno"><span>klombic.com/reports</span><span>04 / 06</span></div>
          </div>

          <div className="pdf-page" id="p5">
            <div className="ph"><div style={{display:'flex',alignItems:'center',gap:10}}><KlombicMark size={22}/><span className="wm">Klombic</span></div><span className="mono">CANDIDATE · klombic</span></div>
            <h3 className="kicker">Cross-language collisions · Core 7</h3>
            <div className="row"><span>EN · false friends</span><b className="ok">NONE</b></div>
            <div className="row"><span>ES · profanity / slang</span><b className="ok">NONE</b></div>
            <div className="row"><span>FR · pronunciation drift</span><b>"klom-BIK"</b></div>
            <div className="row"><span>DE · compound collisions</span><b className="ok">NONE</b></div>
            <div className="row"><span>IT · meaning collisions</span><b className="ok">NONE</b></div>
            <div className="row"><span>JA · katakana rendering</span><b>クロンビック</b></div>
            <div className="row"><span>ZH · phonetic transliteration</span><b>科隆比克</b></div>
            <div className="pageno"><span>klombic.com/reports</span><span>05 / 06</span></div>
          </div>

          <div className="pdf-page" id="p6">
            <div className="ph"><div style={{display:'flex',alignItems:'center',gap:10}}><KlombicMark size={22}/><span className="wm">Klombic</span></div><span className="mono">CANDIDATE · klombic</span></div>
            <h3 className="kicker">Final verdict</h3>
            <p className="body" style={{fontSize:14,lineHeight:1.6,marginBottom:16}}>"Klombic" clears USPTO across the three classes that matter for software, scores in the top quartile on memorability, and has no profanity or false-friend collisions in any of the seven core languages. The .com is parked but the .io / .app / .dev are open at standard rates. The /kl/ + /mb/ phonetic structure is unusual and aids recall.</p>
            <p className="body" style={{fontSize:14,lineHeight:1.6,marginBottom:16}}>Recommend filing on <b style={{color:'var(--file)'}}>klombic.io</b> as the primary, with .app and .dev held as defensives. Skip the .com — the parked owner is a known squatter with a $4–8k floor.</p>
            <div className="verdict"><span style={{fontSize:13}}><b>Recommendation</b> — file on .io</span><span className="v-ok">FILE</span></div>
            <div className="pageno"><span>klombic.com/reports</span><span>06 / 06</span></div>
          </div>
        </div>
      </div>

      <div style={{marginTop:64,padding:48,border:'1px solid var(--rule)',background:'#fff',display:'flex',justifyContent:'space-between',alignItems:'center',gap:32,flexWrap:'wrap'}}>
        <div>
          <h3 style={{fontSize:24,marginBottom:8}}>Want this for your name?</h3>
          <p style={{margin:0,fontSize:14,color:'var(--ink-2)'}}>Quick is $9.99 for three candidates. Same six checks, same 4-hour turnaround.</p>
        </div>
        <a className="btn btn-primary" href="#" onClick={(e)=>{e.preventDefault();go('order')}}>Run a check ↗</a>
      </div>
    </div>
  </section>
  );
};

const Pricing = ({ go }) => {
  const tiers = [
    { n:3,  name:"Quick",    price: 9.99, desc:"Three candidates. The minimum compare set — kill obvious losers before your attorney sees them.", featured:false, perks:["Six-check pass per name","Side-by-side comparison","15-language scan","One PDF, ≤ 4 hours","14-day attorney-test window","One free re-run · cumulative final report"] },
    { n:5,  name:"Starter",  price:13.99, desc:"Five candidates. The smallest serious batch — usually one survives both us and your attorney.", featured:false, perks:["Everything in Quick","Trademark-distance scoring","Defensive-TLD recommendation","14-day attorney-test window","One free re-run · cumulative final report"] },
    { n:10, name:"Premium", price:19.99, desc:"Ten candidates. The honest sweet spot — most founders converge here after attorney review.", featured:true,  perks:["Everything in Starter","Per-archetype score weighting","Phonetic-cluster grouping","Top-3 deep-dive section","14-day attorney-test window","One free re-run · cumulative final report"] },
  ];
  return (
    <section className="section">
      <div className="page">
        <div className="section-label">Pricing</div>
        <div className="sh">
          <h2>One-time. Pick your batch size.</h2>
          <div className="right">No subscriptions, no per-seat, no platform fees. The price is the price. The PDF is the deliverable. That's the whole shape of it.</div>
        </div>
        <div className="pricing" style={{gridTemplateColumns:'repeat(3,1fr)'}}>
          {tiers.map(t => (
            <div key={t.n} className={`tier ${t.featured?'featured':''}`}>
              <span className="tier-name">{t.name} · {t.n} candidates</span>
              <div className="price">${t.price}<span className="per">one-time</span></div>
              <p className="desc">{t.desc}</p>
              <ul>{t.perks.map((p,i)=><li key={i}>{p}</li>)}</ul>
              <div className="cta"><a href="#" onClick={(e)=>{e.preventDefault();go('order')}}>Choose {t.name} ↗</a></div>
            </div>
          ))}
        </div>

        <div style={{marginTop:96}}>
          <div className="section-label">FAQ</div>
          <h2 style={{maxWidth:600,marginBottom:48}}>Things people ask before buying.</h2>
          <div className="faq">
            <div className="faq-item"><h4>How fast is "≤ 4 hours"?</h4><p>Most reports land in 2–3 hours. The 4-hour ceiling holds during business hours (US Eastern, 9–18 ET). Orders placed overnight queue and ship by 11am next morning.</p></div>
            <div className="faq-item"><h4>Is this a legal opinion?</h4><p>No — Klombic is a due-diligence tool, not a law firm. The USPTO data is real and the analysis is rigorous, but if you're filing a mark you should still run it past an IP lawyer. The report is built to make that conversation 10× shorter.</p></div>
            <div className="faq-item"><h4>What if every name is taken?</h4><p>That's still useful — you've eliminated 3/5/10 dead ends in 4 hours instead of weeks. The report includes near-collisions ranked by trademark distance so you can pivot.</p></div>
            <div className="faq-item"><h4>Do I get a refund if I don't like the result?</h4><p>No refunds — the work is run the moment you submit. But every order includes a <b>14-day attorney-test window</b>: take the report to your USPTO lawyer, and if they reject a name, reply to your delivery email within 14 days with replacements. We re-run for free, once per order, and deliver a cumulative final report (your survivors + the new ones).</p></div>
            <div className="faq-item"><h4>What's a "cumulative final report"?</h4><p>If you re-run, the new PDF contains the candidates that survived from your first run plus the new ones you submitted, ranked together. That re-run report is your authoritative Klombic verdict. The earlier report stays in your inbox if you want it — but only the latest run is "official."</p></div>
            <div className="faq-item"><h4>Can I add more names after ordering?</h4><p>Yes — email within 30 min of submitting and we'll bump you to the next tier for the difference. After that, the run has started. Or use your free re-run within 14 days.</p></div>
            <div className="faq-item"><h4>Who's behind it?</h4><p>One person. I'm a founder who got tired of the name due-diligence problem and built the tool I needed. Every report goes through me before it's sent.</p></div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Methods = ({ go }) => {
  const methods = [
    {
      check: "USPTO trademark",
      source: "tmsearch.uspto.gov",
      method: "Live scrape of the USPTO public trademark search via headless browser. Pulls Live and Dead exact-string counts.",
      ai: false,
      license: "U.S. government public records (17 U.S.C. § 105) — public domain.",
    },
    {
      check: "Domain availability",
      source: "Porkbun Domain API",
      method: "Real-time availability + price across the TLDs you flag. Lazy lookup: alternates checked only if .com is taken.",
      ai: false,
      license: "Commercial integration permitted under Porkbun's API terms.",
    },
    {
      check: "Shopify App Store slug",
      source: "apps.shopify.com/<slug>",
      method: "Direct HTTP lookup. 200 = taken, 404 = free.",
      ai: false,
      license: "Permitted by Shopify's robots.txt (app slug pages not disallowed).",
    },
    {
      check: "Memorability composite",
      source: "Miller (1956); Lowrey-Shrum (2007); Norvig (2012)",
      method: "Deterministic 0–1 score. 35% length-fit (gaussian peak at 7 chars), 30% opening-letter rarity, 10% doubled-letter bump, 25% vowel-consonant balance.",
      ai: false,
      license: "Citing peer-reviewed research findings (no copyright on methodology, fair use).",
    },
    {
      check: "Sound symbolism",
      source: "Klink (2000) Marketing Letters 11(1); Yorkston-Menon (2004) JCR 31(1)",
      method: "Deterministic phoneme classification. Two axes — vowel weight (front/light vs back/heavy) and consonant edge (voiced/soft vs voiceless/hard) — plus sonorance ratio.",
      ai: false,
      license: "Citing peer-reviewed research findings.",
    },
    {
      check: "Pronounceability EN+ES",
      source: "Hayes (2009) Introductory Phonology; Cuetos-Mitchell (1988)",
      method: "Deterministic phonotactic rule check. Penalize consonant clusters not native to target language; flag clusters >3 phonemes.",
      ai: false,
      license: "Citing peer-reviewed research findings.",
    },
    {
      check: "Cross-language collision scan",
      source: "Anthropic Claude Opus",
      method: "Single batched LLM call across 15+ languages. Returns blocker / warning / noise severity per collision. ~5–10% miss rate on subtle homophones (disclosed).",
      ai: true,
      license: "Anthropic API — commercial use permitted under standard terms.",
    },
    {
      check: "TM-extension risk",
      source: "Claude Opus + USPTO TMEP §1207.01",
      method: "Same batched call applies du Pont likelihood-of-confusion factors against the candidate's morphology and semantic load. Speculative flags filtered out.",
      ai: true,
      license: "TMEP is public domain. Claude API commercial-licensed.",
    },
  ];
  return (
    <section className="section methods-section">
      <div className="page">
        <div className="section-label">Methods &amp; sources</div>
        <div className="sh">
          <h2>The exact algorithms we run, no black box.</h2>
          <div className="right">Six of eight signals are deterministic and produce identical output across runs. Two are AI-assisted (cross-language and TM-extension) — bounded scans against fixed lists with a disclosed miss rate. Citations live in the report and below.</div>
        </div>

        <div className="methods-grid">
          {methods.map((m, i) => (
            <div className="method-card" key={i}>
              <div className="method-head">
                <h3>{m.check}</h3>
                <span className={`method-ai ${m.ai?'yes':'no'}`}>{m.ai ? 'AI-assisted' : 'Deterministic'}</span>
              </div>
              <div className="method-source">
                <span className="method-label">Source</span>
                <span className="method-mono">{m.source}</span>
              </div>
              <p className="method-body">{m.method}</p>
              <div className="method-license">
                <span className="method-label">License</span>
                <span>{m.license}</span>
              </div>
            </div>
          ))}
        </div>

        <p className="methods-footer">
          <strong>Commercial-use audit:</strong> every algorithm, dataset, and API in this list has been verified
          as legal to redistribute via Klombic reports. Full diligence trail in the
          <a href="/sample-report.pdf" target="_blank"> sample PDF report</a>.
        </p>
      </div>
    </section>
  );
};

const Founder = ({ go }) => (
  <section className="section">
    <div className="page">
      <div className="section-label">Why I built it</div>
      <div className="founder">
        <div>
          <div className="founder-card">
            <div className="founder-avatar">M·R</div>
            <div>
              <div style={{fontSize:15,fontWeight:500}}>Martin Rasumoff</div>
              <div className="mono">Founder · United States</div>
            </div>
            <p style={{fontSize:13,color:'var(--ink-2)',margin:0,lineHeight:1.55}}>Previously: shipped multiple SaaS products. Naming always took longer than the MVP itself. This is the tool I built for myself first.</p>
          </div>
        </div>
        <div>
          <p>Two weeks. That's how long I spent validating the name of my last product. USPTO search, then a different USPTO search, then five WHOIS lookups, then a Shopify slug probe, then a Google-Translate panic when I realized the name had a slang meaning in another language.</p>
          <p>The tooling exists. Nobody had stitched it into one cheap pass with a real human behind it. So I built Klombic. Six checks, one PDF, four hours. No account, no upsell, no SaaS treadmill — just the report.</p>
          <p>If your name is on the line and you've got 4 hours, run a check. If it's blocked, you'll know exactly why. If it clears, file it before the day ends.</p>
        </div>
      </div>
    </div>
  </section>
);

const SixChecksSection = ({ go }) => {
  const items = [
    {n:"01",t:"USPTO live marks",d:"All registered classes — live, abandoned, and pending applications back to 1985. Trademark distance scored against the top three near-collisions.",meta:"USPTO TSDR · weekly refresh"},
    {n:"02",t:"Multi-TLD domain",d:"WHOIS across .com, .io, .app, .dev, .co, .ai and four custom TLDs. Squatter detection. Renewal price annotated for each.",meta:"WHOIS · 10 TLDs default"},
    {n:"03",t:"Shopify slug + handles",d:"Handle collision across Shopify, Twitter/X, Instagram, GitHub, npm, and the Apple App Store. The boring-but-essential checks.",meta:"6 platform probes"},
    {n:"04",t:"Sound-symbolism",d:"Phonetic compactness scored against a 12k-word reference corpus. Onset, internal cluster, and coda each scored separately.",meta:"−1.0 to +1.0 score"},
    {n:"05",t:"Memorability",d:"Length, syllable count, repeated phonemes, spelling-from-sound recall. Weighted to your declared archetype.",meta:"0–10 score · archetype-weighted"},
    {n:"06",t:"Cross-language collisions",d:"15 languages. False friends, slang, profanity, transliteration drift. Includes katakana / pinyin renderings for context.",meta:"15 languages · slang · false friends"},
  ];
  return (
    <section className="section">
      <div className="page">
        <div className="section-label">The six checks</div>
        <div className="sh">
          <h2>Every name. Every check. Every time.</h2>
          <div className="right">No fast/slow tiers, no premium-only checks. The pricing differs in batch size, not depth — a $9.99 Quick gets the same six checks per name as a $19.99 Premium.</div>
        </div>
        <div className="checks">
          {items.map(i => (
            <div className="check" key={i.n}>
              <span className="num">{i.n}</span>
              <span className="ttl">{i.t}</span>
              <p className="desc">{i.d}</p>
              <span className="meta">{i.meta}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Legal = ({ kind, go }) => {
  // Each section: [heading, paragraphs[]]. Paragraphs can be strings or {list: [...]} objects.
  const content = {
    terms: {
      title: "Terms of service",
      lede: "Plain-English terms for buying and using Klombic. If something here conflicts with what we said in marketing, this document wins.",
      body: [
        ["1 · Who we are", [
          'Klombic ("we", "our") is the operator of klombic.com, a service that produces automated brand-name due-diligence reports. Klombic is operated from the United States. By placing an order or using the site, you agree to these terms.',
        ]],
        ["2 · The service", [
          'Klombic delivers a single PDF report per order, covering: USPTO trademark live/dead checks, multi-TLD domain availability, Shopify App Store slug collision, sound-symbolism scoring, memorability heuristics, cross-language collision scan, and (where applicable) trademark-extension risk.',
          'Plan tiers (3 / 5 / 10 candidates) determine how many names are analyzed; the depth of analysis per name is identical across tiers.',
        ]],
        ["3 · Pricing & payment", [
          'Reports are sold as one-time digital products: $9.99 for the 3-candidate Quick tier, $13.99 for the 5-candidate Starter tier, and $19.99 for the 10-candidate Premium tier. Prices in U.S. dollars, exclusive of any applicable taxes.',
          'Payment is processed by Stripe. We do not receive, store, or have access to your full card number.',
        ]],
        ["4 · This is signal, not legal advice", [
          'Klombic is a due-diligence tool, not a law firm. Reports do not constitute legal advice, a clearance opinion, or a guarantee that the U.S. Patent and Trademark Office (USPTO) will approve any application. USPTO examiners apply discretionary "likelihood of confusion" factors that no automated tool can perfectly predict.',
          'For trademark filings with material business stakes (≥ $5,000 in our judgment, but you decide), consult a licensed intellectual-property attorney.',
        ]],
        ["5 · No refunds, but a 14-day attorney-test window with one free re-run", [
          'We do not offer refunds. Every order triggers paid third-party API calls (Anthropic, Porkbun, Resend) and compute time the moment work begins.',
          'Instead, every order includes a 14-day window during which you can take the report to your USPTO attorney or filing agent. If your attorney rejects any candidate — or if the report otherwise doesn\'t surface a name you would file — you may request one free re-run. The re-run runs at the same tier and delivers the same number of candidates. You can submit replacement candidate names, a refined brief, or a mix. One free re-run per order.',
          'The re-run produces a cumulative final report (the surviving names from your original run plus the new ones), which becomes your authoritative Klombic verdict. Intermediate reports remain in your inbox for your records. See the Refund & re-run policy for the full mechanics.',
        ]],
        ["6 · Customer obligations", [
          'You agree to provide an accurate email address, lawful candidate names, and a non-fraudulent payment method. You will not use Klombic to obtain a name for a product that violates U.S. or local law, infringes a third-party trademark you already know about, or is intended to deceive consumers.',
        ]],
        ["7 · Intellectual property", [
          'You retain all rights to the candidate names you submit and to the brand identity you ultimately adopt. We retain all rights to the Klombic platform, methodology, software, designs, and brand assets.',
          'The PDF report we deliver is yours to use internally. You may share it with attorneys, advisors, or co-founders. You may not republish it for resale or claim it as your own analytical work product.',
        ]],
        ["8 · Confidentiality", [
          'We treat your candidate names, your brand brief, your positioning notes, and any constraint inputs as your confidential trade secrets. We hold them under the same standard of care a reasonable business would apply to its own confidential information, and in any case no less than reasonable care.',
          'We will not: (a) share your inputs with anyone other than the subprocessors strictly necessary to deliver your report (Anthropic, Porkbun, Resend, Stripe, Vercel — see our Privacy Policy for the full list and what each receives), (b) use your inputs to seed our own naming work or any other customer\'s report, (c) feature your names in marketing, case studies, or testimonials without your written consent, or (d) sell, rent, or share your inputs with any party for commercial gain.',
          'These confidentiality obligations apply automatically — you do not need to sign a separate NDA to receive their benefit. They survive the deletion of your data after our 90-day retention window and remain in effect indefinitely.',
          'Two narrow exceptions: (i) we may disclose information if compelled by valid legal process, in which case we will notify you in advance unless legally barred from doing so; and (ii) we may disclose aggregated, fully anonymized statistics (e.g., "X% of submitted names had a USPTO collision") that cannot be traced to any individual customer.',
        ]],
        ["9 · Disclaimer of warranties", [
          'The service is provided "as is" and "as available." We do not warrant that the service will be uninterrupted, error-free, or that any specific candidate will clear USPTO examination. We do not warrant that the data we surface (which depends on third-party registries) is complete or current beyond the time of the run.',
        ]],
        ["10 · Limitation of liability", [
          'To the fullest extent permitted by law, our total liability for any claim arising from your use of Klombic is limited to the amount you paid for the order in question. We are not liable for indirect, consequential, incidental, or punitive damages, including lost profits, lost trademark filings, or refusal-related costs.',
        ]],
        ["11 · Modifications", [
          'We may update these terms from time to time. Material changes will be communicated by updating the "Effective" date at the top of this page. Continued use after changes constitutes acceptance.',
        ]],
        ["12 · Governing law & disputes", [
          'These terms are governed by the laws of the State of Delaware, United States, without regard to conflict-of-laws principles. Disputes under $10,000 may be brought in small-claims court. For any other dispute, the parties agree first to attempt informal resolution by email for 30 days before formal action.',
        ]],
        ["13 · Contact", [
          'Questions about these terms: legal@klombic.com. We respond within 5 business days.',
        ]],
      ],
    },

    privacy: {
      title: "Privacy policy",
      lede: "What we collect, why, and what you can ask us to delete. Written to be readable; if you want a longer legal version, email and we'll send it.",
      body: [
        ["1 · Data we collect", [
          'When you place an order, we collect: your email address, the candidate names you submit (or the brand brief you provide for AI-generated candidates), the constraints you set (TLDs, archetype, plan tier), and your payment confirmation token from Stripe.',
          'When you visit the site, our hosting provider (Vercel) automatically logs basic request metadata: IP address, browser user-agent, timestamp, and the page requested. This is standard web infrastructure and is purged on rolling 30-day windows.',
        ]],
        ["2 · Data we do NOT collect", [
          'We do not collect: your full credit-card number (handled by Stripe), your physical address (not required for digital delivery), your phone number, your social media handles, third-party analytics tracking, or behavioral profiles.',
          'We do not place tracking pixels or advertising cookies on the site.',
        ]],
        ["3 · Why we collect it", [
          'Your email is needed to deliver the PDF report. Your candidate names and brief are inputs to the analysis. Your constraints control the algorithms. Your payment token confirms the order is paid. Server logs are kept for security and abuse prevention.',
          'Legal basis under GDPR: contractual necessity (Article 6.1.b) for paying customers; legitimate interest (Article 6.1.f) for fraud prevention via server logs.',
        ]],
        ["4 · Subprocessors", [
          'We share the minimum data needed with the following service providers, who act as subprocessors under their own privacy commitments:',
          { list: [
            'Stripe (payment processing) — receives your email, payment token, and order amount.',
            'Resend (email delivery) — receives your email and the PDF report attachment.',
            'Anthropic (Claude API) — receives the candidate names or brief text for cross-language and TM-extension scans.',
            'Porkbun (domain availability checks) — receives the candidate names to query against the WHOIS / domain registry.',
            'Vercel (web hosting) — handles the site request itself; logs metadata as noted above.',
          ]},
          'We do not sell, share, or rent your data with anyone else. We do not use your data to train AI models. Anthropic\'s commercial terms confirm they do not train on customer content.',
        ]],
        ["5 · International transfers", [
          'Klombic and the subprocessors listed above are based in the United States. If you order from outside the U.S., your data is transferred to and processed in the U.S. By placing an order, you consent to this transfer.',
        ]],
        ["6 · How long we keep data", [
          'Order records (email + report + inputs) are retained for 90 days, then permanently deleted. Server logs roll on a 30-day window. Stripe retains payment records under its own retention schedule (typically 7 years for tax reasons).',
          'You may request earlier deletion at any time — see "Your rights" below.',
        ]],
        ["7 · Your rights", [
          'Regardless of location, you can: (a) request a copy of all data we hold about you, (b) ask us to correct it, (c) ask us to delete it. EU/UK residents under GDPR and California residents under CCPA additionally have the right to portability and the right to object to processing.',
          'To exercise any right, email privacy@klombic.com. We respond within 7 business days. There is no charge.',
        ]],
        ["8 · Cookies", [
          'The site uses no first-party tracking cookies. Stripe Checkout sets a session cookie during the payment flow, which expires when the session ends. We do not place any analytics or advertising cookies.',
        ]],
        ["9 · Children", [
          'Klombic is not intended for and is not knowingly offered to anyone under 16. If you believe a minor has placed an order, email privacy@klombic.com and we will delete the record.',
        ]],
        ["10 · Changes to this policy", [
          'Material changes will be reflected in the "Effective" date at the top of this page. We will not retroactively reduce your privacy rights without your explicit consent.',
        ]],
        ["11 · Contact", [
          'Privacy questions or deletion requests: privacy@klombic.com. Other contact: hello@klombic.com.',
        ]],
      ],
    },

    refund: {
      title: "Refund & re-run policy",
      lede: "Two things to know: there are no refunds, but every order includes a 14-day attorney-test window with one free re-run if any name doesn't survive your lawyer's review.",
      body: [
        ["1 · Why we exist (and the re-run logic)", [
          'Klombic\'s job is to maximize the chance your brand clears USPTO on the first filing. We\'re running the same checks your USPTO attorney would — multi-class trademark, domain availability, marketplace slug, sound-symbolism, memorability, cross-language collision — but in 4 hours, not 4 weeks, and at the cost of a sandwich rather than a billable hour.',
          'The 14-day re-run window exists for one specific reason: time to walk the report into your USPTO lawyer or filing agent. If they push back on any name, you have headroom to swap it and re-run — at no extra charge.',
        ]],
        ["2 · No refunds", [
          'Klombic does not refund completed orders. Every order immediately triggers paid third-party API calls (Anthropic Claude, Porkbun, Resend) and live USPTO data scrapes. The cost is incurred the moment work begins, regardless of whether you like the verdict.',
          'This is also why we don\'t offer "preview" or "trial" reports — there is no version of running Klombic that doesn\'t cost us real money per name.',
        ]],
        ["3 · One free re-run · same tier · same count · 14 days", [
          'If your report doesn\'t surface a name you would file, or if your attorney rejects one of the candidates after review, you can request one free re-run within 14 days of original delivery. The re-run runs at the same tier you originally purchased (Quick / Starter / Premium) and delivers the same number of candidates (3 / 5 / 10). One free re-run per order.',
        ]],
        ["4 · How the re-run works", [
          'Reply to your original delivery email within 14 days. Tell us:',
          { list: [
            '(A) Replacement candidate names — list the ones to swap in.',
            '(B) A refined brand brief — if you want us to generate fresh candidates against a sharper positioning.',
            '(C) A mix — keep the names you liked, replace the ones you didn\'t.',
          ]},
          'We honor your picks: if you keep a name we previously flagged, we\'ll re-surface the flag in the new report but won\'t override your call.',
          'Re-run reports are typically delivered within 4 hours of the request, same as the original.',
        ]],
        ["5 · The re-run is cumulative — final report wins", [
          'The re-run produces a single new report containing the candidates that survived from your original run plus the new ones you submitted, ranked together side by side. This re-run report is your authoritative final report.',
          'You can keep all intermediate reports for your own records (we deliver the new PDF as a separate file; the original is not deleted from your inbox), but only the most recent re-run is the official Klombic verdict on your candidates. If you ever cite the report to your attorney, your trademark filer, or anyone else — cite the latest one.',
        ]],
        ["6 · What the re-run is NOT", [
          'The re-run is not a tier upgrade. If you bought the 3-candidate Quick tier and want 10 candidates instead, that\'s a new order. We can\'t apply your $9.99 toward a $19.99 order.',
          'The re-run is also not a time machine: USPTO and domain state at the moment of the re-run is the data we use. If a competitor filed between your runs, that\'s real and the new report will reflect it.',
          'And the re-run guarantee is one-shot. After the cumulative final report is delivered, additional re-runs are paid orders.',
        ]],
        ["7 · Edge cases", [
          'If your report has a material error (e.g., we said .com was available when it was actually taken at run time), email hello@klombic.com within 24 hours with the discrepancy. We\'ll re-run the affected check at no charge — this is separate from the re-run guarantee and does not count as your free re-run.',
          'If your tier was selected by mistake and you email within 30 minutes of ordering, we can swap the tier (you pay the difference; we don\'t refund the original).',
        ]],
        ["8 · Contact", [
          'Re-run requests and refund disputes: hello@klombic.com.',
        ]],
      ],
    },
  };

  const c = content[kind];
  if (!c) return null;
  return (
    <section className="legal page" style={{maxWidth:760,margin:'0 auto',padding:'72px 32px 96px'}}>
      <div className="section-label">Legal · {c.title}</div>
      <h2 style={{fontSize:42,marginBottom:14}}>{c.title}</h2>
      <p className="mono" style={{margin:'0 0 18px',color:'var(--mute)'}}>EFFECTIVE 28 APR 2026 · KLOMBIC · UNITED STATES</p>
      {c.lede && (
        <p style={{fontSize:16,lineHeight:1.6,color:'var(--ink-2)',marginBottom:32,paddingBottom:24,borderBottom:'1px solid var(--rule)'}}>{c.lede}</p>
      )}
      {c.body.map(([h, paras], i) => (
        <div key={i} style={{marginBottom:28}}>
          <h3 style={{fontSize:18,fontWeight:600,marginBottom:10,letterSpacing:'-0.015em'}}>{h}</h3>
          {paras.map((p, j) => {
            if (typeof p === 'string') {
              return <p key={j} style={{fontSize:14,lineHeight:1.7,color:'var(--ink-2)',marginBottom:10}}>{p}</p>;
            }
            if (p && p.list) {
              return (
                <ul key={j} style={{margin:'8px 0 14px',paddingLeft:22}}>
                  {p.list.map((item, k) => (
                    <li key={k} style={{fontSize:14,lineHeight:1.6,color:'var(--ink-2)',marginBottom:6}}>{item}</li>
                  ))}
                </ul>
              );
            }
            return null;
          })}
        </div>
      ))}
      <div style={{marginTop:48,paddingTop:24,borderTop:'1px solid var(--rule)',display:'flex',gap:12,flexWrap:'wrap'}}>
        <a className="btn btn-ghost" href="#" onClick={(e)=>{e.preventDefault();go('home')}}>← Back home</a>
        {kind !== 'terms'   && <a className="btn btn-ghost" href="#" onClick={(e)=>{e.preventDefault();go('terms')}}>Terms</a>}
        {kind !== 'privacy' && <a className="btn btn-ghost" href="#" onClick={(e)=>{e.preventDefault();go('privacy')}}>Privacy</a>}
        {kind !== 'refund'  && <a className="btn btn-ghost" href="#" onClick={(e)=>{e.preventDefault();go('refund')}}>Refunds</a>}
      </div>
    </section>
  );
};

window.HowItWorks = HowItWorks;
window.SampleReport = SampleReport;
window.Pricing = Pricing;
window.Founder = Founder;
window.SixChecksSection = SixChecksSection;
window.Legal = Legal;
window.Methods = Methods;