const { useState, useEffect, useRef } = React;

/* ---------------- brand atoms ---------------- */
function Echo({ size = 22, color, light }) {
  return (
    <span className="echo" style={{ fontSize: size, color: color || (light ? '#F4EEE2' : 'var(--ink)') }}>
      Lectua<span className="gl"><span className="sh" aria-hidden="true">l</span><span className="fg" style={{ color: 'var(--accent)' }}>l</span></span>
    </span>
  );
}
function AppMark({ s = 40 }) {
  return (
    <span className="appmark" style={{ width: s, height: s }}>
      <svg width={s * 0.58} height={s * 0.58} viewBox="0 0 32 32" aria-hidden="true">
        <path d="M10 7v18h8" fill="none" stroke="#fff" strokeWidth="3.4" strokeLinecap="square" />
        <path d="M16 7v18h8" fill="none" stroke="#fff" strokeWidth="3.4" strokeLinecap="square" opacity=".42" />
      </svg>
    </span>
  );
}
const bandColor = (v) => (v >= 70 ? 'var(--protected)' : v >= 45 ? 'var(--accent)' : 'var(--warning)');
const bandName = (v) => (v >= 85 ? 'Filing-ready' : v >= 70 ? 'Strong' : v >= 45 ? 'Building' : 'Early stage');

/* ---------------- expressive tweaks ---------------- */
const MOODS = {
  warm: { '--paper': '#F7F2E9', '--paper-2': '#FBF7EF', '--surface': '#FFFFFF', '--ink': '#1B1815', '--ink-2': '#57514A', '--ink-3': '#8B8275', '--border': '#E7DFCF', '--border-2': '#DAD0BC', '--accent': '#2F5BE6', '--accent-press': '#2348BE', '--accent-soft': '#E6ECFB', '--on-accent': '#FFFFFF' },
  cool: { '--paper': '#EDF0F4', '--paper-2': '#F5F7FA', '--surface': '#FFFFFF', '--ink': '#161A21', '--ink-2': '#4B515C', '--ink-3': '#858C98', '--border': '#E0E4EA', '--border-2': '#CDD3DC', '--accent': '#2F5BE6', '--accent-press': '#2348BE', '--accent-soft': '#E6ECF8', '--on-accent': '#FFFFFF' },
  dark: { '--paper': '#14110D', '--paper-2': '#1B1711', '--surface': '#221D15', '--ink': '#F4EEE2', '--ink-2': '#B8B0A0', '--ink-3': '#837A6B', '--border': '#2F291F', '--border-2': '#423A2C', '--accent': '#6E8DF6', '--accent-press': '#5877E0', '--accent-soft': '#20283F', '--on-accent': '#FFFFFF' },
};
const VOICES = {
  plain: { kicker: 'IP protection, in plain English', h1: ['Own what', 'you made.'], sub: 'Take a 5-minute readiness check and get a clear, jargon-free path to protecting your brand — then meet the right attorney to do it.', cta: 'Start the free check' },
  reassuring: { kicker: 'You made something — let’s keep it yours', h1: ['You’ve got', 'this.'], sub: 'No legalese, no pressure. A friendly five-minute check shows you exactly where you stand — and the next small step to take.', cta: 'Show me where I stand' },
  bold: { kicker: 'Protect it before someone else does', h1: ['Own it.', 'Officially.'], sub: 'Five minutes to know if your brand is protected — and a clear path to lock it down before it belongs to anyone else.', cta: 'Check my readiness now' },
};
function applyMood(m) { const map = MOODS[m] || MOODS.warm; const s = document.documentElement.style; Object.entries(map).forEach(([k, v]) => s.setProperty(k, v)); }
function applyExpr(v) { const f = Math.max(0, Math.min(100, v)) / 100; const s = document.documentElement.style; s.setProperty('--type-scale', (0.9 + f * 0.3).toFixed(3)); s.setProperty('--ghost-op', (0.015 + f * 0.12).toFixed(3)); s.setProperty('--wash', f.toFixed(3)); }

function Gauge({ value, size = 132, stroke = 13 }) {
  const r = (size - stroke) / 2, C = 2 * Math.PI * r;
  const [disp, setDisp] = useState(0);
  useEffect(() => {
    let raf; const start = performance.now(), dur = 950;
    const tick = (t) => {
      const p = Math.min(1, (t - start) / dur), e = 1 - Math.pow(1 - p, 3);
      setDisp(Math.round(value * e));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [value]);
  return (
    <div className="gauge" style={{ width: size, height: size }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--border-2)" strokeWidth={stroke} />
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={bandColor(value)} strokeWidth={stroke}
          strokeLinecap="round" strokeDasharray={C} strokeDashoffset={C * (1 - disp / 100)} style={{ transition: 'stroke .3s' }} />
      </svg>
      <div className="gv"><b style={{ fontSize: size * 0.31 }}>{disp}</b><span>/ 100</span></div>
    </div>
  );
}

/* ---------------- assessment data ---------------- */
const QUESTIONS = [
  { id: 'name', q: 'Do you have a brand name you’re building on?', help: 'The name customers know you by — your product, company, or app.',
    options: [
      { label: 'Yes — we’re actively using it', sub: 'Live with customers or in market', pts: 18 },
      { label: 'We’ve picked one, not launched yet', sub: 'Chosen but not public', pts: 11 },
      { label: 'Still deciding', sub: 'Exploring options', pts: 3 },
    ] },
  { id: 'distinct', q: 'How would you describe the name?', help: 'Distinctive names are far easier to protect than descriptive ones.',
    options: [
      { label: 'Coined or unexpected', sub: 'A made-up word, or unrelated to what we do', pts: 22 },
      { label: 'Suggestive', sub: 'Hints at what we do, but cleverly', pts: 13 },
      { label: 'Describes what we do', sub: 'e.g. “Fast Tax Software”', pts: 4 },
    ] },
  { id: 'clear', q: 'Have you checked whether someone else uses it?', help: 'A clearance check avoids costly collisions down the line.',
    options: [
      { label: 'Yes — searched, looks clear', sub: 'Checked the register & the web', pts: 20 },
      { label: 'Haven’t checked yet', sub: 'Not sure where to start', pts: 8 },
      { label: 'I’ve seen something similar', sub: 'A close name is out there', pts: 2 },
    ] },
  { id: 'commerce', q: 'Are you using the name in commerce?', help: 'Real use strengthens your rights — and your filing.',
    options: [
      { label: 'Yes — selling nationally', sub: 'Across state lines / online at scale', pts: 15 },
      { label: 'Locally or just launched', sub: 'Early sales or a small market', pts: 9 },
      { label: 'Not selling yet', sub: 'Pre-revenue', pts: 3 },
    ] },
  { id: 'assets', q: 'What else have you made that’s yours?', help: 'Logos, content and designs can be protected too.',
    options: [
      { label: 'Logo + original content', sub: 'Brand assets, writing, designs', pts: 12 },
      { label: 'Just a logo for now', sub: 'A wordmark or symbol', pts: 7 },
      { label: 'Nothing formal yet', sub: 'Still building', pts: 2 },
    ] },
  { id: 'urgency', q: 'What’s your timeline?', help: 'Timing tells us how fast we should move.',
    options: [
      { label: 'Launching or raising soon', sub: 'Next few weeks', pts: 13 },
      { label: 'In the next 3–6 months', sub: 'On the roadmap', pts: 8 },
      { label: 'No particular rush', sub: 'Just getting ahead of it', pts: 5 },
    ] },
];
const MAX = QUESTIONS.reduce((s, q) => s + Math.max(...q.options.map((o) => o.pts)), 0);

function buildSteps(ans) {
  const steps = [];
  if (ans.clear === 1 || ans.clear === 2)
    steps.push({ t: 'Run a clearance search', d: 'We’ll check the federal register and common-law use before you commit.', status: 'do' });
  if (ans.distinct === 2)
    steps.push({ t: 'Strengthen distinctiveness', d: 'A descriptive name is hard to register. We’ll show options to make it ownable.', status: 'do' });
  if (ans.commerce === 2)
    steps.push({ t: 'Plan your “use in commerce”', d: 'File intent-to-use now, then convert once you’re selling.', status: 'do' });
  steps.push({ t: 'File your wordmark', d: 'Lock down the name customers know you by — the foundation of your brand.', status: ans.distinct === 0 ? 'ok' : 'do' });
  if (ans.assets === 0)
    steps.push({ t: 'Register key copyrights', d: 'Your original content and designs are protectable assets too.', status: 'do' });
  return steps.slice(0, 3);
}

function Assessment() {
  const [step, setStep] = useState(0);       // 0..5 or 'result'
  const [ans, setAns] = useState({});
  const total = QUESTIONS.length;

  const pick = (qid, idx) => {
    const next = { ...ans, [qid]: idx };
    setAns(next);
    const last = step === total - 1;
    setTimeout(() => setStep(last ? 'result' : step + 1), 270);
  };

  if (step === 'result') {
    const raw = QUESTIONS.reduce((s, q) => s + (ans[q.id] != null ? q.options[ans[q.id]].pts : 0), 0);
    const score = Math.round((raw / MAX) * 100);
    const steps = buildSteps(ans);
    const summary = score >= 70
      ? 'Strong position. Your name is distinctive and you’re moving — let’s lock it down before someone else does.'
      : score >= 45
        ? 'Good foundation with a couple of gaps. Close these and you’ll be ready to file with confidence.'
        : 'Early days — which is the best time to start. A few smart moves now will save you real money later.';
    return (
      <div className="assess fade-in" key="result">
        <div className="assess-top"><span className="q">Your readiness report</span><div style={{ flex: 1 }}></div>
          <button className="back" onClick={() => { setStep(0); setAns({}); }}>↻ Start over</button>
        </div>
        <div className="result">
          <div className="rhead">
            <Gauge value={score} />
            <div>
              <div className="band" style={{ color: bandColor(score) }}><small>Readiness</small>{bandName(score)}</div>
              <p className="summary">{summary}</p>
            </div>
          </div>
          <div className="kicker" style={{ margin: '22px 0 12px' }}>Your next 3 moves</div>
          <div className="nextlist">
            {steps.map((s, i) => (
              <div className="nextitem" key={i}>
                <span className="chk" style={{ background: s.status === 'ok' ? 'var(--protected)' : 'var(--accent)' }}>
                  {s.status === 'ok'
                    ? <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3"><path d="M5 12l4 4 10-10" strokeLinecap="round" strokeLinejoin="round" /></svg>
                    : <span className="mono" style={{ fontSize: 11, fontWeight: 700 }}>{i + 1}</span>}
                </span>
                <div><div className="t">{s.t}</div><div className="d">{s.d}</div></div>
              </div>
            ))}
          </div>
          <div className="match">
            <div className="mav">D</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: 15 }}>Matched with Dana Whitfield</div>
              <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>Trademark &amp; brand attorney · 9 yrs · works with first-time founders</div>
            </div>
          </div>
          <button className="btn btn-primary btn-block btn-lg" style={{ marginTop: 18 }}>Book your free 15-min call <span className="ar">→</span></button>
        </div>
      </div>
    );
  }

  const Q = QUESTIONS[step];
  const pct = (step / total) * 100;
  return (
    <div className="assess">
      <div className="assess-top">
        <span className="q">Question {String(step + 1).padStart(2, '0')} / {String(total).padStart(2, '0')}</span>
        <div className="bar"><i style={{ width: `${pct}%` }}></i></div>
        <span className="q" style={{ color: 'var(--accent)' }}>~{total - step} min</span>
      </div>
      <div className="assess-body" key={step}>
        <div className="fade-in">
          <h4>{Q.q}</h4>
          <div className="help">{Q.help}</div>
          <div className="opts">
            {Q.options.map((o, i) => (
              <button className={'opt' + (ans[Q.id] === i ? ' sel' : '')} key={i} onClick={() => pick(Q.id, i)}>
                <span className="k">{String.fromCharCode(65 + i)}</span>
                <span>{o.label}<span className="sub">{o.sub}</span></span>
              </button>
            ))}
          </div>
          <div className="assess-foot">
            <button className="back" disabled={step === 0} onClick={() => setStep(Math.max(0, step - 1))}>← Back</button>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '.04em' }}>NO LEGALESE · FREE</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------------- sections ---------------- */
function Nav() {
  return (
    <div className="nav"><div className="wrap">
      <Echo size={21} />
      <div className="links">
        <a href="#how">How it works</a><a href="#proof">Why Lectual</a><a href="Lectual Attorney CRM.html">For attorneys</a>
      </div>
      <div className="right">
        <a className="signin" href="#">Sign in</a>
        <a className="btn btn-primary btn-sm" href="#check">Check my readiness</a>
      </div>
    </div></div>
  );
}

function Hero({ voice }) {
  return (
    <header className="hero" id="check"><div className="wrap">
      <div className="ghost" aria-hidden="true">®</div>
      <div className="hero-grid">
        <div>
          <div className="kicker">{voice.kicker}</div>
          <h1>{voice.h1[0]}<br />{voice.h1[1]}</h1>
          <p className="sub">{voice.sub}</p>
          <div className="cta">
            <a className="btn btn-primary btn-lg" href="#check">{voice.cta} <span className="ar">→</span></a>
            <a className="btn btn-ghost" href="#how">See how it works</a>
          </div>
          <div className="trust">
            <div className="avstack"><i style={{ background: '#2F5BE6' }}></i><i style={{ background: '#1B6B4C' }}></i><i style={{ background: '#9C6209' }}></i><i style={{ background: '#57514A' }}></i></div>
            <span className="mono">★ 4.9 · trusted by 3,200+ first-time founders</span>
          </div>
        </div>
        <Assessment />
      </div>
    </div></header>
  );
}

const STEPS = [
  { n: '01', t: 'Check', d: 'Answer six plain-English questions. We score your IP readiness in about five minutes.',
    ic: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 11l3 3L22 4" strokeLinecap="round" strokeLinejoin="round" /><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" strokeLinecap="round" /></svg> },
  { n: '02', t: 'Understand', d: 'Get a readiness score and a report that says — in real words — exactly where you stand and why.',
    ic: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9" /><path d="M12 8v4M12 16v.01" strokeLinecap="round" /></svg> },
  { n: '03', t: 'Protect', d: 'We match you with a vetted IP attorney who already knows your situation. No cold intake calls.',
    ic: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 3l8 3v6c0 4.5-3.2 7.5-8 9-4.8-1.5-8-4.5-8-9V6z" strokeLinejoin="round" /><path d="M9 12l2 2 4-4" strokeLinecap="round" strokeLinejoin="round" /></svg> },
];
function HowItWorks() {
  return (
    <section className="sec" id="how"><div className="wrap">
      <div className="sec-head"><div className="kicker">How it works</div><h2>From “I think I should protect this” to actually protected.</h2></div>
      <div className="steps">
        {STEPS.map((s) => (
          <div className="step" key={s.n}><div className="ic">{s.ic}</div><div className="n">{s.n}</div><h3>{s.t}</h3><p>{s.d}</p></div>
        ))}
      </div>
    </div></section>
  );
}

function Proof() {
  return (
    <section className="sec" id="proof"><div className="wrap">
      <div className="proof">
        <div>
          <div className="kicker" style={{ marginBottom: 18 }}>Why founders trust us</div>
          <div className="quote">“I’d been putting off trademarks for a year because it felt impossible. Lectual told me <span className="hl">exactly what to do in ten minutes</span> — and the attorney already had my whole situation.”</div>
          <div className="quote-by">— Maya O., founder of Pathset</div>
        </div>
        <div className="statbox">
          <div className="s"><b>5 min</b><span>Average time to a readiness score</span></div>
          <div className="s"><b className="c-strong">3,200+</b><span>Founders protected</span></div>
          <div className="s"><b>$0</b><span>To check where you stand</span></div>
          <div className="s"><b className="c-build">98%</b><span>Say they finally understood IP</span></div>
        </div>
      </div>
    </div></section>
  );
}

function Teaser() {
  return (
    <section className="sec"><div className="wrap">
      <div className="teaser">
        <div className="ghost" aria-hidden="true">ll</div>
        <div style={{ position: 'relative' }}>
          <div className="kicker" style={{ color: '#9DB0EC' }}>For IP attorneys</div>
          <h2 style={{ marginTop: 14 }}>Founders arrive ready. You arrive briefed.</h2>
          <p>Every founder who finishes a readiness check lands in your CRM with a score, the full intake, and an AI pre-call brief — so your first call starts at “let’s file,” not “tell me about yourself.”</p>
          <a className="btn btn-primary btn-lg" href="Lectual Attorney CRM.html" style={{ marginTop: 26 }}>See the attorney CRM <span className="ar">→</span></a>
        </div>
      </div>
    </div></section>
  );
}

function Footer() {
  return (
    <footer><div className="wrap">
      <div className="foot-grid">
        <div style={{ maxWidth: 280 }}>
          <Echo size={22} />
          <p style={{ fontSize: 14, color: 'var(--ink-3)', marginTop: 14 }}>Intellectual property, made intelligible. The smart part, minus the intimidation.</p>
        </div>
        <div className="foot-cols">
          <div className="col"><h5>Product</h5><a href="#check">Readiness check</a><a href="#how">How it works</a><a href="Lectual Attorney CRM.html">For attorneys</a></div>
          <div className="col"><h5>Learn</h5><a href="#">Trademarks 101</a><a href="#">Copyright basics</a><a href="#">Glossary</a></div>
          <div className="col"><h5>Company</h5><a href="#">About</a><a href="#">Careers</a><a href="#">Contact</a></div>
        </div>
      </div>
      <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 40, letterSpacing: '.06em' }}>© 2026 LECTUAL · NOT A LAW FIRM · INFORMATION, NOT LEGAL ADVICE</div>
    </div></footer>
  );
}

function TweaksPanel({ show, tw, setKey, onClose }) {
  const exprLabel = tw.expr < 34 ? 'Restrained' : tw.expr > 66 ? 'Expressive' : 'Balanced';
  const Seg = ({ k, opts }) => (
    <div className="seg">{opts.map(([v, l]) => (
      <button key={v} className={tw[k] === v ? 'on' : ''} onClick={() => setKey(k, v)}>{l}</button>))}</div>
  );
  return (
    <div id="tweaks" className={show ? 'show' : ''}>
      <div className="th"><b>Tweaks</b><button className="x" onClick={onClose} aria-label="Close">×</button></div>
      <div className="blurb">Three dials that reshape how Lectual feels.</div>
      <div className="tg"><div className="lab">Atmosphere</div><Seg k="mood" opts={[['warm', 'Warm'], ['cool', 'Cool'], ['dark', 'Dark']]} /></div>
      <div className="tg"><div className="lab">Voice</div><Seg k="voice" opts={[['plain', 'Plain'], ['reassuring', 'Gentle'], ['bold', 'Bold']]} /></div>
      <div className="tg">
        <div className="lab">Expression <span className="v">{exprLabel}</span></div>
        <input type="range" min="0" max="100" value={tw.expr} onChange={(e) => setKey('expr', +e.target.value)} />
        <div className="ends"><span>Quiet · editorial</span><span>Loud · graphic</span></div>
      </div>
    </div>
  );
}

function App() {
  const [tw, setTw] = useState(() => ({ mood: 'warm', voice: 'plain', expr: 52, ...(window.LECTUAL_TWEAKS || {}) }));
  const [editOn, setEditOn] = useState(false);
  useEffect(() => { applyMood(tw.mood); }, [tw.mood]);
  useEffect(() => { applyExpr(tw.expr); }, [tw.expr]);
  useEffect(() => {
    const onMsg = (e) => { const t = e.data && e.data.type; if (t === '__activate_edit_mode') setEditOn(true); else if (t === '__deactivate_edit_mode') setEditOn(false); };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);
  const setKey = (k, v) => { setTw((p) => ({ ...p, [k]: v })); window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*'); };
  const closePanel = () => { setEditOn(false); window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*'); };
  const voice = VOICES[tw.voice] || VOICES.plain;
  return (
    <React.Fragment>
      <Nav /><Hero voice={voice} /><HowItWorks /><Proof /><Teaser /><Footer />
      <TweaksPanel show={editOn} tw={tw} setKey={setKey} onClose={closePanel} />
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);