/* ============================================================
   O1 — Lectual marketing home (System A)
   Dual-audience platform story · trust-forward
   Relies on m-shared.jsx (atoms) + crm/tweaks-panel.jsx (tweaks)
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "warm",
  "lead": "founders",
  "tone": "plain"
}/*EDITMODE-END*/;

const HERO = {
  founders: {
    plain:   { sub: 'Take a five-minute readiness check, get a plain-English roadmap, store and timestamp your work in the Vault — then meet the attorney who already knows your situation.', cta: 'Check my readiness — free' },
    bold:    { sub: 'Know exactly what to protect, in five minutes — then lock it down with an attorney who arrives already briefed. No legalese. No cold intake calls.', cta: 'See where I stand' },
    calm:    { sub: 'No pressure and no jargon. A friendly check shows where your brand stands and the next small step — with a real attorney when you’re ready.', cta: 'Start the free check' },
  },
  firms: {
    plain:   { sub: 'Run your whole trademark and copyright practice on one CRM — intake, scoring, pipeline, drips, your own white-label funnel — with founders who arrive already qualified.', cta: 'Audit my firm — free' },
    bold:    { sub: 'Replace six tools and a leaky funnel with one operating system. Pre-qualified founders, an AI pre-call brief on every lead, and your brand on every surface a client sees.', cta: 'Audit my firm — free' },
    calm:    { sub: 'A calmer practice: every lead scored and briefed before you call, follow-up handled, and a funnel themed entirely in your brand. We stay invisible to your clients.', cta: 'See the firm audit' },
  },
};

function HeroVisual({ audience }) {
  // founder = readiness peek · firm = pipeline peek
  if (audience === 'firms') {
    const stages = [['New', 6, '#2F5BE6'], ['Readiness', 4, '#5B8DEF'], ['Discovery', 3, '#9C6209'], ['Proposal', 2, '#C0772A'], ['Engaged', 4, '#1B6B4C']];
    const max = 6;
    return (
      <div className="hv-card">
        <div className="hv-top"><span className="mono hv-eye">PIPELINE · RIVERA PARK IP</span><span className="lozenge"><span className="d" style={{ background: 'var(--protected)' }}></span>19 active</span></div>
        <div className="hv-pipe">
          {stages.map(([n, c, col]) => (
            <div className="hv-col" key={n}>
              <div className="hv-bar"><i style={{ height: `${(c / max) * 100}%`, background: col }}></i></div>
              <div className="hv-cn mono">{c}</div>
              <div className="hv-cl">{n}</div>
            </div>
          ))}
        </div>
        <div className="hv-brief">
          <span className="hv-ava" style={{ background: '#2F5BE6' }}>M</span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="hv-bn">Maya Okonkwo · Pathset</div>
            <div className="hv-bd">AI brief ready · launching in 6 weeks, wants the mark filed first</div>
          </div>
          <span className="badge-score" style={{ borderColor: 'var(--border)' }}><span className="b">84</span></span>
        </div>
      </div>
    );
  }
  return (
    <div className="hv-card">
      <div className="hv-top"><span className="mono hv-eye">READINESS REPORT</span><span className="lozenge"><span className="d"></span>5 min · free</span></div>
      <div className="hv-readi">
        <Gauge value={84} size={118} stroke={12} />
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, letterSpacing: '-.02em', color: 'var(--protected)' }}>Strong</div>
          <p style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.45, marginTop: 4 }}>Your name is distinctive and in use. Lock it down before launch.</p>
        </div>
      </div>
      <div className="hv-steps">
        {[['File your wordmark', 'do'], ['Run a clearance read', 'do'], ['Register your logo', 'ok']].map(([t, s], i) => (
          <div className="hv-step" key={i}>
            <span className="hv-chk" style={{ background: s === 'ok' ? 'var(--protected)' : 'var(--accent)' }}>
              {s === 'ok' ? Ico.check : <span className="mono" style={{ fontSize: 11, fontWeight: 700 }}>{i + 1}</span>}
            </span>{t}
          </div>
        ))}
      </div>
    </div>
  );
}

function Hero({ audience, setAudience, tone }) {
  const seg = useRef(null);
  const copy = HERO[audience][tone] || HERO[audience].plain;
  return (
    <header className="m-hero"><div className="wrap">
      <div className="ghost-mark m-hero-ghost" aria-hidden="true">®</div>
      <div className="m-hero-grid">
        <div className="m-hero-left">
          <div className="kicker">The IP platform · founders &amp; the firms that protect them</div>
          <h1 className="m-h1">Intellectual property,<br />finally <span className="m-ul">intelligible</span>.</h1>
          <div className="m-seg-wrap">
            <div className="seg" ref={seg}>
              <Thumb seg={seg} active={audience === 'founders' ? 0 : 1} count={2} />
              <button className={audience === 'founders' ? 'on' : ''} onClick={() => setAudience('founders')}>{Ico.route} I’m a founder</button>
              <button className={audience === 'firms' ? 'on' : ''} onClick={() => setAudience('firms')}>{Ico.building} I run an IP firm</button>
            </div>
          </div>
          <p className="m-sub" key={audience + tone}>{copy.sub}</p>
          <div className="m-cta">
            <a className="btn btn-primary btn-lg" href={audience === 'firms' ? 'Lectual Public Audit.html' : 'Lectual Founder Landing.html'}>{copy.cta} <span className="ar">→</span></a>
            <a className="btn btn-ghost" href="#platform">How the platform works</a>
          </div>
          <div className="m-trust">
            <span className="trustline">{Ico.shield} Not a law firm</span>
            <span className="trustline">{Ico.lock} We never train on your data</span>
            <span className="trustline">{Ico.check} SOC 2 Type II</span>
          </div>
        </div>
        <div className="m-hero-right"><HeroVisual audience={audience} /></div>
      </div>
    </div></header>
  );
}

function Thumb({ active, count }) {
  // animated seg thumb — measures siblings
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const parent = el.parentElement;
    const btns = [...parent.querySelectorAll('button')];
    const b = btns[active]; if (!b) return;
    el.style.left = b.offsetLeft + 'px';
    el.style.width = b.offsetWidth + 'px';
  }, [active, count]);
  return <span className="thumb" ref={ref}></span>;
}

/* ---- platform: two sides ---- */
function Platform() {
  const flow = [
    { ic: Ico.route, t: 'Founder checks readiness', d: 'Five plain-English minutes returns a score, a roadmap, and a Vault to timestamp their work.', side: 'founder' },
    { ic: Ico.spark, t: 'Lectual scores & briefs', d: 'The AI qualifies the lead and writes a pre-call brief — strengths, red flags, the opening line.', side: 'mid' },
    { ic: Ico.briefcase, t: 'Firm arrives ready', d: 'The matched attorney opens at “let’s file,” not “tell me about yourself.” In their own brand.', side: 'firm' },
  ];
  return (
    <section className="sec" id="platform"><div className="wrap">
      <div className="sec-head reveal">
        <div className="kicker">One platform, two sides</div>
        <h2>We sit between the founder and the firm — and make both sides smarter.</h2>
        <p>Founders get clarity and protection. Firms get qualified, briefed leads and an operating system to run the practice. Lectual is the connective tissue.</p>
      </div>
      <div className="flow reveal">
        {flow.map((f, i) => (
          <React.Fragment key={i}>
            <div className={'flow-node ' + f.side}>
              <div className="fn-ic">{f.ic}</div>
              <div className="fn-step mono">0{i + 1}</div>
              <h3>{f.t}</h3>
              <p>{f.d}</p>
            </div>
            {i < flow.length - 1 && <div className="flow-arrow" aria-hidden="true">{Ico.arrow}</div>}
          </React.Fragment>
        ))}
      </div>
    </div></section>
  );
}

/* ---- founder track ---- */
const FOUNDER_FEATS = [
  { ic: Ico.check, t: 'Readiness assessment', d: 'A conversational check that branches by IP type and hands back a color-coded score — no legalese.' },
  { ic: Ico.route, t: 'A real roadmap', d: 'Exactly what to file, what it costs, and — just as important — what you do not need to file yet.' },
  { ic: Ico.vault, t: 'The Vault', d: 'Store and timestamp your logos, content and works. Each gets a proof-of-creation certificate with a verifiable hash.' },
  { ic: Ico.users, t: 'A matched attorney', d: 'Meet a vetted IP attorney who already has your whole situation. No repeating yourself on a cold call.' },
];
const FIRM_FEATS = [
  { ic: Ico.chart, t: 'Intake-to-client CRM', d: 'A ten-stage pipeline built for trademark and copyright practice — kanban or table, drag-drop, optimistic.' },
  { ic: Ico.search, t: 'Public CRM audit', d: 'A free, read-only audit of your current intake that reads like a $5k consulting deliverable. The pitch is the proof.' },
  { ic: Ico.palette, t: 'White-label funnel', d: 'Your brand on every surface a client touches — funnel, booking, emails, results. We stay invisible.' },
  { ic: Ico.spark, t: 'AI copilot & briefs', d: 'A morning briefing, a pre-call brief on every lead, and natural-language ops over your whole pipeline.' },
];

function Track({ id, audience, eyebrow, title, lead, feats, dark, cta, ctaHref }) {
  return (
    <section className={'sec track' + (dark ? ' track-dark' : '')} id={id}>
      <div className="wrap">
        <div className="track-head reveal">
          <div>
            <div className="kicker" style={dark ? { color: '#9DB0EC' } : null}>{eyebrow}</div>
            <h2 style={{ marginTop: 12 }}>{title}</h2>
          </div>
          <p>{lead}</p>
        </div>
        <div className="feature-grid reveal">
          {feats.map((f, i) => (
            <div className="fcard" key={i}>
              <span className="n">0{i + 1}</span>
              <div className="ic">{f.ic}</div>
              <h3>{f.t}</h3>
              <p>{f.d}</p>
            </div>
          ))}
        </div>
        <div className="track-cta reveal">
          <a className="btn btn-primary btn-lg" href={ctaHref}>{cta} <span className="ar">→</span></a>
        </div>
      </div>
    </section>
  );
}

/* ---- trust ---- */
function Trust() {
  const items = [
    { ic: Ico.lock, t: 'Encrypted, always', d: 'AES-256 at rest, TLS in transit. Your ideas are yours — we never use them to train models.' },
    { ic: Ico.shield, t: 'Not a law firm', d: 'Lectual is software. We give you clarity and connect you to a real attorney; we never give legal advice.' },
    { ic: Ico.vault, t: 'Proof you can show', d: 'Every Vault asset carries a timestamp, a hash and a verifiable certificate an investor can trust.' },
  ];
  return (
    <section className="sec"><div className="wrap">
      <div className="trust-band reveal">
        <div className="trust-copy">
          <div className="kicker">Built for your most valuable ideas</div>
          <h2 style={{ fontSize: 'clamp(28px,3.6vw,42px)', marginTop: 12 }}>The #1 question is “is my idea safe here?” Everything answers it.</h2>
        </div>
        <div className="trust-cards">
          {items.map((it, i) => (
            <div className="trust-card" key={i}>
              <span className="tc-ic">{it.ic}</span>
              <div><div className="tc-t">{it.t}</div><div className="tc-d">{it.d}</div></div>
            </div>
          ))}
        </div>
      </div>
    </div></section>
  );
}

/* ---- audit promo band ---- */
function AuditBand() {
  return (
    <section className="sec"><div className="wrap">
      <div className="audit-band reveal">
        <div className="ab-glow" aria-hidden="true"></div>
        <div className="ab-left">
          <div className="kicker" style={{ color: '#9DB0EC' }}>Free · no signup · stores nothing</div>
          <h2>See your firm’s intake audit in 60 seconds.</h2>
          <p>Connect your CRM read-only and we’ll show you the leaking pipeline, the tag chaos, and the operating system we’d build for you. It reads like a $5,000 consulting deliverable. It’s free.</p>
          <a className="btn btn-primary btn-lg" href="Lectual Public Audit.html" style={{ marginTop: 26 }}>Run my free audit <span className="ar">→</span></a>
        </div>
        <div className="ab-right" aria-hidden="true">
          <div className="ab-report">
            <div className="abr-head"><span className="mono">OPERATIONS AUDIT</span><Gauge value={61} size={64} stroke={8} label="" animate={false} /></div>
            <div className="abr-row"><span className="abr-dot warn"></span>14 leads stalled &gt; 7 days</div>
            <div className="abr-row"><span className="abr-dot danger"></span>No readiness scoring</div>
            <div className="abr-row"><span className="abr-dot warn"></span>47 freeform tags → 12 dims</div>
            <div className="abr-row"><span className="abr-dot ok"></span>+$182k recoverable / yr</div>
          </div>
        </div>
      </div>
    </div></section>
  );
}

/* ---- pricing teaser + final cta ---- */
function FinalCTA({ audience }) {
  return (
    <section className="sec" id="pricing"><div className="wrap">
      <div className="final reveal">
        <div className="ghost-mark final-ghost" aria-hidden="true">ll</div>
        <div className="kicker" style={{ color: '#9DB0EC' }}>Transparent pricing · no surprises</div>
        <h2>Start free. Grow into it.</h2>
        <p>Founders check readiness for $0. Firms start with a free audit, then a flat monthly fee — Starter, Growth, or Enterprise white-label. No per-seat games, no per-lead tax.</p>
        <div className="final-cta">
          <a className="btn btn-primary btn-lg" href={audience === 'firms' ? 'Lectual Public Audit.html' : 'Lectual Founder Landing.html'}>{audience === 'firms' ? 'Audit my firm — free' : 'Check my readiness — free'} <span className="ar">→</span></a>
          <a className="btn btn-secondary btn-lg" href="#">See pricing</a>
        </div>
      </div>
    </div></section>
  );
}

/* ---- tweaks ---- */
function Tweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Atmosphere" />
      <TweakRadio label="Mood" value={t.mood} options={[{ value: 'warm', label: 'Warm' }, { value: 'cool', label: 'Cool' }, { value: 'dark', label: 'Dark' }]} onChange={(v) => setTweak('mood', v)} />
      <TweakSection label="Story" />
      <TweakRadio label="Lead audience" value={t.lead} options={[{ value: 'founders', label: 'Founders' }, { value: 'firms', label: 'IP firms' }]} onChange={(v) => setTweak('lead', v)} />
      <TweakRadio label="Headline tone" value={t.tone} options={[{ value: 'plain', label: 'Plain' }, { value: 'bold', label: 'Bold' }, { value: 'calm', label: 'Calm' }]} onChange={(v) => setTweak('tone', v)} />
    </TweaksPanel>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [audience, setAudience] = useState(t.lead);
  useEffect(() => { applyMood(t.mood); }, [t.mood]);
  useEffect(() => { setAudience(t.lead); }, [t.lead]);
  useReveal();
  return (
    <React.Fragment>
      <Nav active="Platform" />
      <Hero audience={audience} setAudience={setAudience} tone={t.tone} />
      <Platform />
      <Track id="founders" audience={audience} eyebrow="For founders"
        title="From “I should protect this” to actually protected."
        lead="Clarity first, then protection — with a human attorney when it counts."
        feats={FOUNDER_FEATS} cta="Check my readiness — free" ctaHref="Lectual Founder Landing.html" />
      <Track id="firms" audience={audience} dark eyebrow="For IP firms"
        title="The operating system for a modern IP practice."
        lead="Everything from first touch to active client — in one place, in your brand."
        feats={FIRM_FEATS} cta="Audit my firm — free" ctaHref="Lectual Public Audit.html" />
      <Trust />
      <AuditBand />
      <FinalCTA audience={audience} />
      <Footer />
      <Tweaks t={t} setTweak={setTweak} />
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);