// AI features section — the system underneath, animated
// Sits between Product and Numbers. Communicates "this is AI-native"
// without leaving the editorial palette.

const AI_PILLARS = [
  {
    n: '01',
    name: 'Compliance reasoning',
    head: <>An AI model that <em>understands regulation.</em></>,
    body: 'Not a generic LLM with a prompt. A reasoning engine fine-tuned on compliance documents — extracting parties, obligations, dates, and clauses with confidence grading. It understands gaps the way a senior reviewer would.',
    spec: [
      ['Model', 'Compliance-tuned reasoning engine'],
      ['Eval', '94% field accuracy · 4,200-doc set'],
      ['Gap detection', 'AI identifies missing controls & coverage'],
    ],
  },
  {
    n: '02',
    name: 'Domain knowledge base',
    head: <>A compliance knowledge base <em>no one else has.</em></>,
    body: 'Regulation-aware embeddings, framework mappings, and entity relationships that generic vector stores cannot replicate. The AI draws from this to detect risk impact across your entire portfolio.',
    spec: [
      ['Knowledge', 'Compliance-specific embeddings'],
      ['Frameworks', '47 pre-mapped regulatory frameworks'],
      ['Graph', 'Entity-regulation-document lineage'],
    ],
  },
  {
    n: '03',
    name: 'AI-native workflows',
    head: <>Purpose-built workflows that <em>close compliance gaps.</em></>,
    body: 'Pipelines designed from scratch to solve for compliance gaps — from risk impact detection to vendor scoring to remediation routing. Every workflow is built around how compliance actually works, not retrofitted from generic automation.',
    spec: [
      ['Pattern', 'AI-native · compliance-first design'],
      ['Detection', 'Multi-factor risk impact scoring'],
      ['Audit', 'Every decision & source logged'],
    ],
  },
];

// Animated pipeline diagram — Document → OCR → Reasoning → Embeddings → Vector index → Compliance Copilot
const AIPipeline = () => {
  const stages = [
    { l: 'Document',   s: 'PDF · DOCX · Scan',  i: 0 },
    { l: 'OCR',        s: 'Text extraction',    i: 1 },
    { l: 'Reasoning',  s: 'Compliance-tuned model',  i: 2, big: true },
    { l: 'Knowledge base', s: 'Domain-specific embeddings',   i: 3 },
    { l: 'Gap detection', s: 'Risk impact analysis', i: 4 },
    { l: 'Compliance Copilot', s: 'Cited answer', i: 5, big: true },
  ];
  return (
    <div className="ccl-ai-pipeline">
      <div className="ccl-ai-pipeline-head">
        <span>Pipeline · per document</span>
        <span className="ccl-ai-pipeline-live"><i/>Streaming · 1.2s median</span>
      </div>
      <div className="ccl-ai-pipeline-track">
        <svg viewBox="0 0 720 80" preserveAspectRatio="none" className="ccl-ai-pipeline-svg">
          <defs>
            <linearGradient id="aip-flow" x1="0" x2="1">
              <stop offset="0" stopColor="#1f3a30" stopOpacity="0"/>
              <stop offset="0.5" stopColor="#1f3a30" stopOpacity="0.7"/>
              <stop offset="1" stopColor="#1f3a30" stopOpacity="0"/>
            </linearGradient>
            <path id="aip-path" d="M 30 40 L 690 40"/>
          </defs>
          <line x1="30" y1="40" x2="690" y2="40" stroke="var(--ccl-hairline)" strokeWidth="1.4"/>
          <rect x="30" y="38" width="660" height="4" fill="url(#aip-flow)" className="ccl-ai-pipeline-flow"/>
          {/* Traveling tokens */}
          {[0, 1.2, 2.4, 3.6].map((delay, i) => (
            <circle key={i} r="4" fill="#1f3a30">
              <animateMotion dur="4.8s" begin={`${delay}s`} repeatCount="indefinite">
                <mpath href="#aip-path"/>
              </animateMotion>
            </circle>
          ))}
        </svg>
        <div className="ccl-ai-pipeline-stages">
          {stages.map(st => (
            <div key={st.l} className={`ccl-ai-stage ${st.big ? 'big' : ''}`} style={{ '--d': `${200 + st.i * 140}ms` }}>
              <div className="ccl-ai-stage-dot"/>
              <div className="ccl-ai-stage-l">{st.l}</div>
              <div className="ccl-ai-stage-s">{st.s}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// Three pillar cards
const AIPillarCard = ({ p, idx }) => {
  const ref = React.useRef(null);
  const onMove = (e) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width - 0.5;
    const y = (e.clientY - r.top) / r.height - 0.5;
    el.style.setProperty('--rx', `${(-y * 4).toFixed(2)}deg`);
    el.style.setProperty('--ry', `${(x * 5).toFixed(2)}deg`);
  };
  const onLeave = () => {
    const el = ref.current; if (!el) return;
    el.style.setProperty('--rx', '0deg');
    el.style.setProperty('--ry', '0deg');
  };
  return (
    <article
      ref={ref}
      className="ccl-ai-card"
      data-stagger
      onMouseMove={onMove}
      onMouseLeave={onLeave}
    >
      <div className="ccl-ai-card-num">{p.n}</div>
      <div className="ccl-ai-card-name">{p.name}</div>
      <h3 className="ccl-ai-card-h">{p.head}</h3>
      <p className="ccl-ai-card-p">{p.body}</p>
      <dl className="ccl-ai-card-spec">
        {p.spec.map(([k, v]) => (
          <div key={k} className="ccl-ai-card-spec-row">
            <dt>{k}</dt>
            <dd>{v}</dd>
          </div>
        ))}
      </dl>
    </article>
  );
};

const LAI = () => (
  <section className="ccl-section ccl-ai" id="ai">
    <div className="ccl-wrap">
      <div className="ccl-section-head">
        <div className="ccl-eyebrow"><span className="ccl-eyebrow-num">✱</span>The AI · purpose-built</div>
        <h2 className="ccl-h2" style={{ marginTop: 24 }}>
          Compliance-specific AI,<br/><em>built from scratch.</em>
        </h2>
        <p className="ccl-lede">
          Custom models. A domain-specific knowledge base. AI-native workflows engineered to detect gaps, score risk, and close compliance holes — not generic AI with a compliance skin.
        </p>
      </div>

      <LScrollScale from={0.95} to={1} className="ccl-ai-pipeline-wrap">
        <AIPipeline/>
      </LScrollScale>

      <LStagger className="ccl-ai-grid" delay={140}>
        {AI_PILLARS.map((p, i) => <AIPillarCard key={p.n} p={p} idx={i}/>)}
      </LStagger>

      <div className="ccl-ai-foot">
        <div className="ccl-ai-foot-l">
          <div className="ccl-eyebrow"><span className="ccl-eyebrow-num">◉</span>Guardrails · built in</div>
          <h3>AI that <em>knows when not to answer.</em></h3>
          <p>Every extraction is confidence-graded. Below 0.7 triggers a graceful refusal. Every prompt, retrieved chunk, and final answer is logged for audit. Nothing trains a model — yours, ours, or anyone else's.</p>
        </div>
        <ul className="ccl-ai-foot-r">
          {[
            ['No training', 'Your documents never enter any training set.'],
            ['Tenant isolation', 'Vector indexes are namespaced per customer.'],
            ['Region pinned', 'Choose US / EU / UK at provisioning.'],
            ['Full audit trail', 'Replay any answer with its sources & prompts.'],
          ].map(([k, v]) => (
            <li key={k}>
              <span className="ccl-ai-foot-k">{k}</span>
              <span className="ccl-ai-foot-v">{v}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  </section>
);

window.LAI = LAI;