// Three pillars: Multiply, Content Agent, 30-Day Implementation
function Pillars() {
  const [active, setActive] = React.useState(0);
  const pillars = [
    {
      eyebrow: 'The Platform',
      title: 'Multiply AI Platform',
      headline: <>A working AI dashboard <strong>for every function.</strong></>,
      body: 'Multiply is the operating layer connecting your agents, data, and team. Chief of Staff, RevOps, Analyst, Content: each function gets a purpose-built agent, one dashboard, and one voice that sounds like you.',
      deliverables: [
        'Unified agent dashboard',
        'Role-based agents (RevOps, Ops, Content)',
        'Data classification & governance',
        'Custom system prompts per agent',
        'Scheduled automations',
        'Audit trails & QA reminders',
      ],
      meta: [
        {l: 'Format', v: 'Continuous platform'},
        {l: 'Setup', v: 'Included in 30-day build'},
        {l: 'Skills library', v: '700+'},
      ],
      Icon: IconLayers,
    },
    {
      eyebrow: 'Founder Content Intelligence',
      title: 'Content Agent · Beta',
      headline: <>Your voice, <strong>distributed at scale.</strong></>,
      body: 'Content Agent turns your calls, essays, and voice notes into a private voice model, then drafts LinkedIn posts, newsletters, LP briefs, and sales content that actually sound like you. On-brand, in-cadence, attributed to pipeline.',
      deliverables: [
        'Private voice fingerprint',
        'Weekly signal radar',
        'Multi-channel drafting',
        'House tone enforcement',
        'LP & investor briefs',
        'Attribution to pipeline',
      ],
      meta: [
        {l: 'Status', v: 'Beta · accepting founders'},
        {l: 'Format', v: 'Monthly subscription'},
        {l: 'Setup', v: '2 weeks'},
      ],
      Icon: IconSparkle,
    },
    {
      eyebrow: 'Flagship Engagement',
      title: '30-Day Full Implementation',
      headline: <>From signed proposal to <strong>live and running in 30 days.</strong></>,
      body: 'Four weeks. Four checkpoints. Discovery, governance, onsite training, and sustainment. Your team ships real deliverables before we leave the room, and owns the whole system when we do.',
      deliverables: [
        'Two-session discovery',
        'AI Governance Policy signed',
        'Onsite training (2 days)',
        'Production agents & automations',
        'Office hours week +1 & +3',
        '30-day metrics review',
      ],
      meta: [
        {l: 'Duration', v: '30 days'},
        {l: 'Team', v: 'Partner + onsite'},
        {l: 'Promise', v: '30% gain or we fix it'},
      ],
      Icon: IconCompass,
    },
  ];
  const a = pillars[active];
  const Icon = a.Icon;
  return (
    <section id="pillars" className="section-wide" data-screen-label="Platform & Practices">
      <div className="sect-head">
        <span className="hub-eyebrow">What We Build</span>
        <h2>One platform. One engagement. <strong>One guarantee.</strong></h2>
        <p>Multiply is the dashboard. Content Agent is the voice. The 30-Day Implementation is how your team gets there. They compound, and they're the only three things we ship.</p>
      </div>
      <div className="pillars">
        <div className="pillar-tabs" role="tablist">
          {pillars.map((p, i) => (
            <button key={i} className="pillar-tab" role="tab" aria-selected={active === i} onClick={() => setActive(i)}>
              <span className="pillar-tab-num">0{i+1}</span>
              <span>
                <div className="pillar-tab-title">{p.title}</div>
                <p className="pillar-tab-sub">{p.body.split('.')[0]}.</p>
              </span>
            </button>
          ))}
        </div>
        <div className="pillar-panel" key={active}>
          <div className="pillar-panel-head">
            <div className="hub-icon-tile tint-blue" style={{marginBottom: 0, background:'var(--emerald-tint)', color:'var(--emerald)'}}><Icon size={22}/></div>
            <span className="pillar-panel-eyebrow">{a.eyebrow}</span>
          </div>
          <h3>{a.headline}</h3>
          <p>{a.body}</p>
          <div className="pillar-deliverables">
            {a.deliverables.map((d, i) => (
              <div key={i} className="pillar-deliv-row"><IconCheck size={16}/> {d}</div>
            ))}
          </div>
          <div className="pillar-meta">
            {a.meta.map((m, i) => (
              <div key={i} className="pillar-meta-item">
                <span className="pillar-meta-label">{m.l}</span>
                <span className="pillar-meta-value">{m.v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Pillars = Pillars;

// STATS ROW
function StatsRow() {
  const stats = [
    {n: '30', l: 'Days to Deploy', s: 'From signed proposal to live'},
    {n: '700+', l: 'Agent Skills', s: 'Across the Multiply library'},
    {n: '100+', l: 'Connectors', s: 'Available to extend AI Agents'},
    {n: '24/7', l: 'Always Running', s: 'Agents working in the background'},
  ];
  return (
    <section className="hub-section-stats" data-screen-label="Stats">
      <div style={{maxWidth: 1200, margin: '0 auto'}}>
        <div className="hub-section-header sect-head" style={{marginBottom: 36}}>
          <span className="hub-eyebrow">By the Numbers</span>
          <h2 style={{font: '300 34px/1.15 var(--font-sans)', color: 'var(--navy)', letterSpacing: '-0.02em', margin: 0, maxWidth: 640}}>
            We measure <strong>against your baseline</strong>, not a vendor brochure.
          </h2>
        </div>
        <div className="hub-grid-4">
          {stats.map((s, i) => (
            <div key={i} className="hub-stat">
              <div className="hub-stat-num anim-count">{s.n}</div>
              <div className="hub-stat-label">{s.l}</div>
              <div className="hub-stat-sub">{s.s}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.StatsRow = StatsRow;

// INDUSTRIES
function Industries() {
  const rows = [
    {n: '01', t: 'Insurance & Brokerages', d: 'From client intake to renewal automation. Network model serving 100+ member brokerages today.', pill: '11 validated use cases'},
    {n: '02', t: 'IT & Cybersecurity', d: 'Lead gen, sales automation, and content systems built for technical buyers who don\'t respond to generic outreach.', pill: 'Sales & GTM automation'},
    {n: '03', t: 'B2B SaaS & Fintech', d: 'GTM automation, onboarding flows, and AI-powered customer acquisition systems for companies scaling fast.', pill: 'Growth & onboarding'},
    {n: '04', t: 'Professional Services', d: 'Founders scaling without proportionally growing headcount. Automation that extends your team without hiring.', pill: 'Leverage without hiring'},
  ];
  return (
    <section id="industries" className="section-wide" data-screen-label="Industries">
      <div className="sect-head">
        <span className="hub-eyebrow">Industries</span>
        <h2>We go <strong>deep.</strong> Not wide.</h2>
        <p>We focus on the industries where we have validated use cases, proven results, and the domain knowledge to build AI systems that match how the business actually works.</p>
      </div>
      <div className="industries">
        {rows.map((r, i) => (
          <div key={i} className="industry-card">
            <div className="industry-num">/ {r.n}</div>
            <div>
              <h3>{r.t}</h3>
              <p>{r.d}</p>
              <span className="industry-pill">{r.pill}</span>
            </div>
            <div className="industry-arrow"><IconArrowRight size={20}/></div>
          </div>
        ))}
      </div>
    </section>
  );
}
window.Industries = Industries;