// Klombic — Hero variants + live demo

const CHECKS = [
  { lbl:"USPTO live marks · class 9", val:"CLEAR", cls:"ok", ms:900 },
  { lbl:"USPTO live marks · class 35", val:"CLEAR", cls:"ok", ms:1500 },
  { lbl:"USPTO live marks · class 42", val:"CLEAR", cls:"ok", ms:2100 },
  { lbl:"klombic.com", val:"TAKEN · parked '19", cls:"no", ms:2700 },
  { lbl:"klombic.io", val:"FILE", cls:"ok", ms:3300 },
  { lbl:"klombic.app", val:"FILE", cls:"ok", ms:3900 },
  { lbl:"klombic.dev", val:"FILE", cls:"ok", ms:4500 },
  { lbl:"Shopify slug", val:"FILE", cls:"ok", ms:5100 },
  { lbl:"Sound-symbolism", val:"+0.62", cls:"score", ms:5700 },
  { lbl:"Memorability", val:"7.4 / 10", cls:"score", ms:6300 },
  { lbl:"Cross-language collision", val:"CLEAR", cls:"ok", ms:6900 },
];

const LiveDemo = () => {
  const [tick, setTick] = React.useState(0);
  const [name, setName] = React.useState("klombic");
  React.useEffect(() => {
    const start = Date.now();
    const id = setInterval(() => {
      const elapsed = (Date.now() - start) % 9000;
      setTick(elapsed);
    }, 80);
    return () => clearInterval(id);
  }, []);

  const visible = CHECKS.filter(c => c.ms <= tick);
  const next = CHECKS.find(c => c.ms > tick);
  const done = tick > 7400;

  return (
    <div className="demo">
      <div className="demo-bar">
        <div className="dots"><i/><i/><i/></div>
        <div className="name">klombic · live check</div>
      </div>
      <div className="demo-body">
        <div className="demo-input">
          <span className="prompt">$</span>
          <input value={name} onChange={(e)=>setName(e.target.value)} aria-label="Candidate name" />
          <span style={{color:'var(--mute)',fontSize:11}}>↩</span>
        </div>
        {visible.map((c,i) => (
          <div key={i} className="demo-row">
            <span className="lbl">{c.lbl}</span>
            <span className={`val ${c.cls}`}>{c.val}</span>
          </div>
        ))}
        {!done && next && (
          <div className="demo-row" style={{opacity:0.65}}>
            <span className="lbl"><span className="spinner"/>{next.lbl}</span>
            <span className="val">…</span>
          </div>
        )}
      </div>
      <div className="demo-foot">
        <span>{visible.length}/{CHECKS.length} CHECKS</span>
        <span className="verdict">{done ? "VERDICT · FILE on .io" : "RUNNING…"}</span>
      </div>
    </div>
  );
};

const SampleHero = () => (
  <div className="hero-sample">
    <div className="hero-sample-frame">
      <div className="top">
        <KlombicMark size={18}/>
        <span>Klombic</span>
        <span style={{marginLeft:'auto',fontFamily:'JetBrains Mono',fontSize:10,color:'var(--mute)',letterSpacing:'0.05em'}}>klombic · 02/06</span>
      </div>
      <h4>USPTO LIVE MARKS</h4>
      <div className="row"><span>Class 9 · downloadable software</span><span className="ok">CLEAR</span></div>
      <div className="row"><span>Class 35 · business services</span><span className="ok">CLEAR</span></div>
      <div className="row"><span>Class 42 · SaaS</span><span className="ok">CLEAR</span></div>
      <h4>DOMAIN AVAILABILITY</h4>
      <div className="row"><span>klombic.com</span><span className="no">TAKEN</span></div>
      <div className="row"><span>klombic.io</span><span className="ok">FILE</span></div>
      <div className="row"><span>klombic.app</span><span className="ok">FILE</span></div>
      <div className="row"><span>klombic.dev</span><span className="ok">FILE</span></div>
      <h4>PHONETIC &amp; MEMORABILITY</h4>
      <div className="row"><span>Sound-symbolism</span><span className="ok">+0.62</span></div>
      <div className="row"><span>Memorability score</span><span className="ok">7.4 / 10</span></div>
    </div>
  </div>
);

const SixChecksHero = () => {
  const items = [
    {n:"01",t:"USPTO live marks", d:"All registered classes; live, abandoned, and pending."},
    {n:"02",t:"Multi-TLD domain", d:".com · .io · .app · .dev · .co · .ai · custom."},
    {n:"03",t:"Shopify slug", d:"Handle collision across .myshopify.com space."},
    {n:"04",t:"Sound-symbolism", d:"Phonetic compactness & associative scoring."},
    {n:"05",t:"Memorability", d:"Length, repeated phonemes, recall heuristics."},
    {n:"06",t:"Cross-language", d:"15 languages — false friends & profanity."},
  ];
  return (
    <div className="hero-six">
      {items.map(i => (
        <div className="six-cell" key={i.n}>
          <span className="num">{i.n}</span>
          <span className="ttl">{i.t}</span>
          <span className="desc">{i.d}</span>
        </div>
      ))}
    </div>
  );
};

const Hero = ({ variant, go }) => {
  let panel;
  if (variant === "sample") panel = <SampleHero/>;
  else if (variant === "six") panel = <SixChecksHero/>;
  else panel = <LiveDemo/>;

  return (
    <section className="hero">
      <div className="page">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow"><span className="dot"/>Pre-filing due diligence · 24-hour turnaround</div>
            <h1>Maximize your chances of<br/>trademarking on the first try.</h1>
            <p className="lead">Most trademark filings hit a refusal or an Office Action — and if your USPTO lawyer rejects a name first, you've already burned attorney time. <b>Other tools check whether a name you've already chosen will register. Klombic tells you which name to pick in the first place.</b> Tier-graduated checks per candidate: Quick runs the core safety pass (USPTO TESS, multi-TLD domain, handles + dev namespaces + app stores, sound-symbolism, memorability, cross-language, TM-extension); Starter adds Abercrombie term-strength; Premium adds focused per-language scan, phonetic-similar § 2(d) screening, common-law sweep, and full TSDR per-mark records on your top winner. Take the ranked PDF to your attorney for the final filing call. If any name doesn't survive their review, you have 14 days to swap and re-run for free. One PDF in 24 hours, from $9.99.</p>
            <p className="lead" style={{fontSize:14,color:'var(--mute)',fontFamily:'"JetBrains Mono",ui-monospace,monospace',letterSpacing:'0.04em',textTransform:'uppercase',marginTop:8,marginBottom:14}}>
              <b style={{color:'var(--ink-2)'}}>Bad filing cost</b>: ~$350 fee + $500–800 Office Action + attorney time &nbsp; · &nbsp; <b style={{color:'var(--forest)'}}>Klombic cost</b>: from $9.99
            </p>
            <div style={{display:'inline-flex',alignItems:'center',gap:10,padding:'8px 14px',background:'var(--green-bg, #e8f5ec)',border:'1px solid #1a7f3c',borderRadius:999,marginBottom:32,fontSize:12,fontFamily:'"JetBrains Mono",ui-monospace,monospace',color:'var(--forest)',letterSpacing:'0.04em',textTransform:'uppercase',fontWeight:600}}>
              <span style={{display:'inline-block',width:6,height:6,borderRadius:'50%',background:'var(--forest)'}}/>
              14-day attorney-test window · one free re-run included
            </div>
            <div className="hero-cta-row">
              <a className="btn btn-primary" href="#" onClick={(e)=>{e.preventDefault();go('order')}}>Run a check · from $9.99 ↗</a>
              <a className="btn btn-ghost" href="#" onClick={(e)=>{e.preventDefault();go('sample')}}>See a sample</a>
            </div>
            <div className="hero-meta">
              <span><b>24 hours</b>turnaround</span>
              <span><b>15</b>languages scanned</span>
              <span><b>1 PDF</b>no account needed</span>
            </div>
          </div>
          <div>{panel}</div>
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;