// 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 · 4-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. Klombic runs the six due-diligence checks <i>before</i> any of that: USPTO + multi-TLD domain + Shopify + sound-symbolism + memorability + cross-language. Take the ranked PDF to your attorney; if any name doesn't survive their review, you have 14 days to swap and re-run for free. One PDF in four 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>4 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;