// site-sections.jsx — All Strata homepage sections.
// Components are exported to window so the app file can compose them.

const { useEffect, useRef, useState } = React;

/* ──────────────────────────────────────────────────────────────────────────
 * Reveal-on-scroll wrapper
 * ────────────────────────────────────────────────────────────────────────── */
function Reveal({ children, delay = 0, as: As = 'div', className = '', style }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // If already in viewport on mount, show immediately (no animation flash).
    const rect = el.getBoundingClientRect();
    if (rect.top < window.innerHeight && rect.bottom > 0) {
      setShown(true);
      return;
    }
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {setShown(true);io.disconnect();}
    }, { threshold: 0.05, rootMargin: '0px 0px -10% 0px' });
    io.observe(el);
    // Failsafe: never leave content invisible for more than 2s.
    const t = setTimeout(() => setShown(true), 2000);
    return () => {io.disconnect();clearTimeout(t);};
  }, []);
  return (
    <As ref={ref}
    className={`reveal ${shown ? 'in' : ''} ${className}`}
    style={{ transitionDelay: delay + 'ms', ...style }}>
      {children}
    </As>);

}

/* ──────────────────────────────────────────────────────────────────────────
 * Nav
 * ────────────────────────────────────────────────────────────────────────── */
function Nav() {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#" className="wordmark" aria-label="Strata">
          <img src="assets/strata-logo.svg" alt="Strata" className="wordmark-full" />
        </a>
        <div className="nav-links">
          <a href="#platform">Platform</a>
          <a href="#workflows">Workflows</a>
          <a href="#atlas">Atlas</a>
        </div>
        <div className="nav-cta">
          <span className="iltacon-pill">
            <span className="dot" />
            See us at ILTACON Aug 2026
          </span>
          <a href="book-a-demo.html" className="btn btn-primary">Book a Demo</a>
        </div>
      </div>
    </nav>);

}

/* ──────────────────────────────────────────────────────────────────────────
 * Hero
 * ────────────────────────────────────────────────────────────────────────── */
function Hero() {
  return (
    <section className="hero">
      <div className="prism-glow hero-glow" aria-hidden="true" />
      <div className="container">
        <div className="hero-inner">
          <div>
            <div className="hero-mark">
              <img src="assets/strata-icon.svg" alt="Strata" />
            </div>
            <h1 className="display">
              The work your firm doesn’t bill for, <span className="accent">done</span>.
            </h1>
            <p className="lead">
              Strata’s AI agents run the operational work your firm doesn’t bill for:
              invoice appeals, matter intake, lateral hire onboarding, billing follow-up,
              and more. We turn it into recovered revenue and reclaimed capacity.
            </p>
            <div className="hero-ctas">
              <a href="book-a-demo.html" className="btn btn-primary">Book a Demo</a>
              <a href="#platform" className="btn btn-link arrow-down">See the platform</a>
            </div>
          </div>

          {/* Metric-led visual (Nexus tile) */}
          <div className="hero-visual hero-metrics">
            <div className="nexus-bar">
              <span>Strata Nexus · Operational Value</span>
              <span className="right">
                Illustrative · Mid-size firm · monthly
              </span>
            </div>
            <div className="nexus-grid">
              <div className="nexus-tile">
                <div className="label">Revenue Recovered</div>
                <div className="value tnum">
                  <span style={{ color: 'var(--muted)', fontWeight: 300 }}>$</span>
                  428,610
                </div>
                <div className="sub">
                  Dollars collected that would have been written off.
                  <span className="delta">+18% MoM</span>
                </div>
              </div>
              <div className="nexus-tile">
                <div className="label">Capacity Reclaimed</div>
                <div className="value tnum">
                  1,284<span style={{ color: 'var(--muted)', fontWeight: 300, fontSize: '0.55em', marginLeft: 6 }}>hrs</span>
                </div>
                <div className="sub">
                  Hours returned to paralegals, billing, and intake.
                  <span className="delta">≈ 12 FTE-weeks</span>
                </div>
              </div>
            </div>
          </div>

          {/* Product-led visual (full Nexus screenshot) */}
          <div className="hero-visual hero-product" style={{ padding: 0 }}>
            <img src="assets/nexus-screenshot.png" alt="Strata Nexus dashboard" />
          </div>
        </div>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────────────
 * Integrations — three clusters of systems Strata operates inside.
 * Replaces the prior LogoWall placeholder.
 * ────────────────────────────────────────────────────────────────────────── */
function Integrations() {
  const clusters = [
  {
    label: 'Financial and Billing',
    items: [
    { name: 'Aderant', mark: 'Aderant' },
    { name: 'Elite 3E', mark: 'Elite 3E' },
    { name: 'CounselLink', mark: 'CounselLink' },
    { name: 'Legal Tracker', mark: 'Legal Tracker' },
    { name: 'Legal-X', mark: 'Legal-X' },
    { name: 'BigHand', mark: 'BigHand' },
    { name: 'TyMetrix 360', mark: 'TyMetrix 360' }]

  },
  {
    label: 'Documents and Matters',
    items: [
    { name: 'iManage', mark: 'iManage' },
    { name: 'NetDocuments', mark: 'NetDocuments' },
    { name: 'Intapp', mark: 'Intapp' },
    { name: 'Litify', mark: 'Litify' }]

  },
  {
    label: 'People and Operations',
    items: [
    { name: 'Microsoft 365', mark: 'Microsoft 365' },
    { name: 'Workday', mark: 'Workday' },
    { name: 'ServiceNow', mark: 'ServiceNow' }]

  }];

  return (
    <section className="s tight integrations" id="integrations">
      <div className="container">
        <Reveal>
          <div className="section-eyebrow">
            <span className="marker" />
            <span className="eyebrow">Integrations</span>
          </div>
          <h2 className="section" style={{ maxWidth: 820 }}>
            Strata works inside the systems your firm already runs.
          </h2>
        </Reveal>

        <Reveal delay={100}>
          <div className="int-clusters">
            {clusters.map((c) =>
            <div key={c.label} className="int-cluster">
                <div className="int-cluster-label">{c.label}</div>
                <div className="int-row">
                  {c.items.map((it) =>
                <div key={it.name} className="int-chip" title={it.name}>
                      {it.vendor && <span className="int-vendor">{it.vendor}</span>}
                      <span className="int-mark">{it.mark}</span>
                    </div>
                )}
                </div>
              </div>
            )}
          </div>
        </Reveal>

        <Reveal delay={180}>
          <p className="int-footnote">
            Plus the carrier portals and panel-counsel systems your firm logs into every day.
          </p>
        </Reveal>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────────────
 * Solution Statement (replaces the prior diagnosis-style Problem section)
 * ────────────────────────────────────────────────────────────────────────── */
function Problem() {
  return (
    <section className="pivot" id="solution">
      <div className="container">
        <Reveal>
          <p className="solution-lede">
            Every workflow we run is a <strong>named automation</strong> with an owner
            and binary acceptance criteria.
          </p>
          <p className="solution-tail">
            We don’t lead with the AI. We lead with the numbers it moves.
          </p>
        </Reveal>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────────────
 * What Changes (pivot)
 * ────────────────────────────────────────────────────────────────────────── */
function WhatChanges() {
  return (
    <section className="pivot" id="what-changes">
      <div className="container">
        <Reveal>
          <p>
            Strata’s agents do the work. Your team supervises it.
            Every workflow we run reports two numbers, every week, automatically:
            <strong> hours of capacity returned</strong> to your team, and
            <strong> dollars recovered</strong> to your top line.
          </p>
          <p className="kicker">
            If we don’t move those two numbers, we don’t deserve the seat.
          </p>
        </Reveal>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────────────
 * Two Numbers — heading + live widget. The widget is the proof.
 * ────────────────────────────────────────────────────────────────────────── */
function ValueGrid() {
  return (
    <section className="s" id="value">
      <div className="container">
        <Reveal>
          <div className="section-eyebrow">
            <span className="marker" />
            <span className="eyebrow">Operational Value</span>
          </div>
          <h2 className="section" style={{ maxWidth: 880 }}>
            Two numbers. Reported every week. Denominated in dollars and hours.
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <div className="hero-visual two-numbers-widget" style={{ marginTop: 56 }}>
            <div className="nexus-bar">
              <span>Strata Nexus · Operational Value</span>
              <span className="right">
                Illustrative · Mid-size firm · monthly
              </span>
            </div>
            <div className="nexus-grid">
              <div className="nexus-tile">
                <div className="label">Revenue Recovered</div>
                <div className="value tnum">
                  <span style={{ color: 'var(--muted)', fontWeight: 300 }}>$</span>
                  428,610
                </div>
                <div className="sub">
                  Dollars collected that would have been written off.
                  <span className="delta">+18% MoM</span>
                </div>
              </div>
              <div className="nexus-tile">
                <div className="label">Capacity Reclaimed</div>
                <div className="value tnum">
                  1,284<span style={{ color: 'var(--muted)', fontWeight: 300, fontSize: '0.55em', marginLeft: 6 }}>hrs</span>
                </div>
                <div className="sub">
                  Hours returned to paralegals, billing, and intake.
                  <span className="delta">≈ 12 FTE-weeks</span>
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────────────
 * Workflows We Run
 * ────────────────────────────────────────────────────────────────────────── */
function Workflows() {
  const items = [
  {
    tag: 'WF · Lateral',
    title: 'Lateral Hire Onboarding',
    body: 'Provisioning, system access, client transition admin, conflict checks. The new partner’s billable book moves faster because the operational layer underneath them isn’t a bottleneck.'
  },
  {
    tag: 'WF · Intake',
    title: 'Matter Intake',
    body: 'New matters opened, conflicts checked, party data captured, the matter routed into the right system. Same-day, not next-week. Intake isn’t billable. The matter it opens is.'
  },
  {
    tag: 'WF · Opening',
    title: 'Matter Opening',
    body: 'The set of steps between “intake done” and “the matter is billable,” closed in hours rather than days. Faster billable-clock starts, across every matter the firm opens.'
  },
  {
    tag: 'WF · Budgets',
    title: 'Budgets',
    body: 'Budget approvals, exception handling, and the back-and-forth with carriers. Supervised, not abandoned to email.'
  },
  {
    tag: 'WF · Appeals',
    title: 'Invoice Appeals',
    body: 'Every denial, every portal, every deduction worth chasing, plus the ones below your firm’s floor that nobody chases today. The compounding gain isn’t the big appeals you were already going to fight; it’s the ones you were walking away from.'
  },
  {
    tag: 'WF · Custom',
    title: 'And custom.',
    body: 'Every firm has its own list. Practice innovation provisioning. Billing narrative chasing. AR aging follow-up. Trust account reconciliation. If it’s clerical, operational, or administrative, and it isn’t billable, it’s in scope.',
    custom: true
  }];

  return (
    <section className="s" id="workflows">
      <div className="container">
        <Reveal>
          <div className="section-eyebrow">
            <span className="eyebrow">Workflows We Run</span>
          </div>
          <h2 className="section" style={{ maxWidth: 820 }}>
            Every automation, accountable by name.
          </h2>
          <p className="lead body-muted" style={{ maxWidth: 720, marginBottom: 60 }}>
            Strata operates underneath the billable work, not against it. The workflows on
            this page are clerical, operational, or administrative. You accept the work when
            it meets the bar.
          </p>
        </Reveal>
        <Reveal delay={80}>
          <div className="workflows">
            {items.map((w, i) =>
            <a key={i} href="#demo" className={`workflow ${w.custom ? 'custom' : ''}`}>
                <div className="workflow-tag">{w.tag}</div>
                <div className="workflow-body">
                  <h3>{w.title}</h3>
                  <p>{w.body}</p>
                </div>
                <div className="workflow-arrow">→</div>
              </a>
            )}
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────────────
 * Atlas demo data — four self-running Q/A pairs + graph highlight coords
 * ────────────────────────────────────────────────────────────────────────── */
const ATLAS_QA = [
{
  q: 'Who approves a fee write-off over $5,000?',
  a:
  <React.Fragment>
      Write-offs above <strong>$5,000</strong> route to the{' '}
      <strong>Managing Partner</strong> for sign-off, per your{' '}
      <strong>Fee Write-off Policy</strong>. Below that, the{' '}
      <strong>Billing Partner</strong> on the matter approves.
    </React.Fragment>,
  meta: 'Traced across 4 nodes in your operational map.',
  nodes: [{ x: 40.4, y: 75.6 }, { x: 19, y: 65.9 }, { x: 56, y: 78.3 }]
},
{
  q: 'What has to happen before a new matter can open?',
  a:
  <React.Fragment>
      <strong>Conflicts</strong> must clear, the carrier’s{' '}
      <strong>billing guidelines</strong> have to be attached, and rates have to be
      confirmed in <strong>Legal X</strong>. Only then does the matter go live.
    </React.Fragment>,
  meta: 'Traced across 5 nodes in your operational map.',
  nodes: [{ x: 53.9, y: 85.8 }, { x: 48.4, y: 47.2 }, { x: 30.5, y: 83.2 }, { x: 40.4, y: 75.6 }]
},
{
  q: 'A carrier just reduced one of our invoices. What happens next?',
  a:
  <React.Fragment>
      Atlas drafts an <strong>appeal</strong> citing the specific guideline the
      reduction violated, routes it to the <strong>Billing Partner</strong> for
      sign-off, and tracks it until the amount is recovered or formally written off.
    </React.Fragment>,
  meta: 'Traced across 6 nodes in your operational map.',
  nodes: [{ x: 56.6, y: 57.8 }, { x: 31.9, y: 61.5 }, { x: 51.6, y: 70.1 }, { x: 40.4, y: 75.6 }]
},
{
  q: 'What does onboarding a lateral hire involve?',
  a:
  <React.Fragment>
      <strong>Systems access</strong> gets provisioned, active{' '}
      <strong>matters</strong> transfer, <strong>conflicts</strong> re-run against the
      new book, and the lateral’s client relationships map into the firm’s graph.
    </React.Fragment>,
  meta: 'Traced across 5 nodes in your operational map.',
  nodes: [{ x: 19, y: 65.9 }, { x: 40.4, y: 75.6 }, { x: 53.9, y: 85.8 }, { x: 41.3, y: 50.6 }]
}];

const ATLAS_CONFIRMED = [
{
  label: 'Fee write-off approval',
  rule: 'Write-offs over $5,000 route to the Managing Partner for sign-off.'
},
{
  label: 'Matter intake gate',
  rule: 'Conflicts must clear and billing guidelines attach before a matter opens.'
}];

/* ──────────────────────────────────────────────────────────────────────────
 * Strata Atlas — self-running demo loop + static confirmed nodes
 * ────────────────────────────────────────────────────────────────────────── */
function AtlasDemo() {
  const [index, setIndex] = useState(0);
  const [typed, setTyped] = useState('');
  const [phase, setPhase] = useState('typing'); // typing | asking | answer | clearing

  useEffect(() => {
    let cancelled = false;
    const timers = [];
    const at = (fn, ms) => { timers.push(setTimeout(() => { if (!cancelled) fn(); }, ms)); };
    const q = ATLAS_QA[index].q;

    setTyped('');
    setPhase('typing');

    let ci = 0;
    const typeNext = () => {
      if (cancelled) return;
      ci++;
      setTyped(q.slice(0, ci));
      if (ci < q.length) {
        timers.push(setTimeout(typeNext, 30 + Math.random() * 34));
      } else {
        at(() => setPhase('asking'), 420);
        at(() => setPhase('answer'), 920);
        at(() => setPhase('clearing'), 920 + 4200);
        at(() => setIndex((i) => (i + 1) % ATLAS_QA.length), 920 + 4200 + 620);
      }
    };
    at(typeNext, 650);

    return () => { cancelled = true; timers.forEach(clearTimeout); };
  }, [index]);

  const item = ATLAS_QA[index];
  const showAnswer = phase === 'answer';
  const typing = phase === 'typing';
  const highlight = phase === 'answer' || phase === 'asking';

  return (
    <React.Fragment>
      <Reveal delay={100}>
        <div className="atlas-visual">
          <div className="atlas-visual-frame">
            <image-slot
              id="atlas-map"
              shape="rect"
              fit="contain"
              src="assets/atlas-screenshot.png"
              placeholder="Drop a Strata Atlas screenshot (the firm’s mapped operational landscape)"
              style={{ display: 'block', width: '100%', aspectRatio: '1706 / 1092', height: 'auto' }}>
            </image-slot>
            <div className={'atlas-graph-overlay' + (highlight ? ' on' : '')} aria-hidden="true">
              {item.nodes.map((n, i) =>
              <span
                key={index + '-' + i}
                className="atlas-pulse"
                style={{ left: n.x + '%', top: n.y + '%', animationDelay: i * 0.12 + 's' }} />
              )}
            </div>
          </div>
        </div>
      </Reveal>

      <Reveal delay={140}>
        <AtlasBeats />
      </Reveal>

      <Reveal delay={160}>
        <div className="atlas-interactive">
          <p className="atlas-interactive-lede">
            It’s not a black box. Watch it reason, follow the connections it draws, and
            correct what it gets wrong.
          </p>

          <div className="atlas-ask">
            <div className={'atlas-ask-bar' + (typing ? ' typing' : '')}>
              <svg className="atlas-ask-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="2" />
                <path d="M20 20l-3.2-3.2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
              </svg>
              <div className="atlas-ask-field">
                {typed ?
                <span className="atlas-ask-text">{typed}</span> :
                <span className="atlas-ask-ph">Ask anything about how your firm operates.</span>
                }
                {typing && <span className="atlas-caret" />}
              </div>
              <button
                type="button"
                tabIndex={-1}
                className={'atlas-ask-send' + (phase === 'asking' ? ' pulse' : '')}>
                Ask
              </button>
            </div>

            <div className="atlas-answer-slot">
              {showAnswer &&
              <div className="atlas-answer" key={index}>
                  <div className="atlas-answer-q">{item.q}</div>
                  <p className="atlas-answer-a">{item.a}</p>
                  <div className="atlas-answer-meta">
                    <span className="dot" /> {item.meta}
                  </div>
                </div>
              }
            </div>
          </div>

          <div className="atlas-nodes">
            <div className="atlas-nodes-label">Editable nodes</div>
            <div className="atlas-nodes-row">
              {ATLAS_CONFIRMED.map((n, i) =>
              <div key={i} className="atlas-node state-approved">
                  <div className="atlas-node-head">
                    <span className="atlas-node-dot" />
                    <span className="atlas-node-label">{n.label}</span>
                  </div>
                  <p className="atlas-node-rule">{n.rule}</p>
                  <div className="atlas-node-actions">
                    <span className="atlas-node-confirmed">
                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <path d="M5 13l4 4L19 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                      </svg>
                      Confirmed by your firm
                    </span>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </Reveal>
    </React.Fragment>);

}

function AtlasBeats() {
  const beats = [
  { head: 'Map.', body: 'Atlas learns how your firm actually works.' },
  { head: 'Structure.', body: 'Your knowledge, organized so an agent can act on it.' },
  { head: 'Operate.', body: 'Agents run the work. Recovery reported every week.' },
  { head: 'Refine.', body: 'Ask it anything. Correct what it misses. The map stays yours.' }];

  return (
    <div className="atlas-beats">
      {beats.map((b, i) =>
      <div key={i} className="atlas-beat">
          <h3>{b.head}</h3>
          <p>{b.body}</p>
        </div>
      )}
    </div>);

}

/* ──────────────────────────────────────────────────────────────────────────
 * Strata Atlas section
 * ────────────────────────────────────────────────────────────────────────── */
function WhyStrata() {
  return (
    <section className="s" id="atlas">
      <div className="container">
        <Reveal>
          <div className="section-eyebrow">
            <span className="marker" />
            <span className="eyebrow">Strata Atlas</span>
          </div>
          <h2 className="section atlas-headline" style={{ maxWidth: 'none' }}>
            Your firm’s knowledge, made operational.
          </h2>
          <p className="atlas-subhead">
            The knowledge that runs your firm lives in people’s heads. Atlas puts it to work.
          </p>
        </Reveal>
        <AtlasDemo />
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────────────
 * Platform Diagram — illustrative SVG architecture preview.
 * Three surface plates, connector bundles, Strata Core engine, firm-systems band.
 * ────────────────────────────────────────────────────────────────────────── */
function PlatformDiagram() {
  // Smooth top→bottom curve helper
  const conn = (x1, y1, x2, y2) => {
    const dy = y2 - y1;
    return `M${x1},${y1} C${x1},${y1 + dy * 0.55} ${x2},${y2 - dy * 0.55} ${x2},${y2}`;
  };

  // Top connectors: each surface emits 3 lines that fan toward core top.
  // Surface bottom-centers at x = 185, 540, 895 (y = 196).
  // Core top spans x ≈ 70..1010 at y = 370. Lay 9 targets across.
  const surfaceXs = [185, 540, 895];
  const exitOffsets = [-46, 0, 46];
  const coreTargets = [];
  for (let i = 0; i < 9; i++) coreTargets.push(120 + i * 105);
  const topConn = [];
  surfaceXs.forEach((sx, si) => {
    exitOffsets.forEach((off, li) => {
      topConn.push({ x1: sx + off, y1: 196, x2: coreTargets[si * 3 + li], y2: 370 });
    });
  });

  // Bottom connectors: core→systems, parallel cascade.
  const bottomConn = [];
  const N = 17;
  const xStart = 90,xEnd = 990;
  for (let i = 0; i < N; i++) {
    const x = xStart + (xEnd - xStart) / (N - 1) * i;
    bottomConn.push({ x1: x, y1: 496, x2: x, y2: 588 });
  }

  return (
    <section className="s tight platform-diagram-section" aria-label="Platform architecture">
      <div className="container">
        <Reveal>
          <div className="section-eyebrow">
            <span className="marker" />
            <span className="eyebrow">Architecture</span>
          </div>
        </Reveal>
        <Reveal delay={100}>
          <div className="pdiagram-wrap">
            <svg viewBox="0 0 1080 680" xmlns="http://www.w3.org/2000/svg" role="img"
            className="pdiagram-svg"
            aria-label="Strata Atlas, Nexus, and Canvas sit above Strata Core, the engine that runs every workflow, which connects into your firm’s systems.">
              <defs>
                <linearGradient id="pdGrad" x1="0" y1="0" x2="1" y2="0">
                  <stop offset="0" stopColor="#82B84F" />
                  <stop offset="0.55" stopColor="#2EB872" />
                  <stop offset="1" stopColor="#2486E8" />
                </linearGradient>
                <pattern id="pdHatch" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(45)">
                  <line x1="0" y1="0" x2="0" y2="10" stroke="currentColor" strokeOpacity="0.24" strokeWidth="1" />
                </pattern>
              </defs>

              {/* === TOP CONNECTORS (surfaces → core) === */}
              <g className="pd-conn">
                {topConn.map((c, i) => {
                  const mx = c.x1 + (c.x2 - c.x1) * 0.5;
                  const my = c.y1 + (c.y2 - c.y1) * 0.5;
                  return (
                    <g key={i}>
                      <path d={conn(c.x1, c.y1, c.x2, c.y2)}
                      stroke="currentColor" strokeOpacity="0.32" strokeWidth="1" fill="none" />
                      <circle cx={mx - 28} cy={my - 18} r="1.4" fill="currentColor" opacity="0.55" />
                      <circle cx={mx + 22} cy={my + 22} r="1.4" fill="currentColor" opacity="0.55" />
                    </g>);

                })}
              </g>

              {/* === SURFACE 1: Atlas (node graph) === */}
              <g transform="translate(50, 30)">
                <rect x="0" y="160" width="290" height="6" rx="2" fill="black" fillOpacity="0.05" />
                <rect x="10" y="0" width="270" height="160" rx="10"
                fill="var(--bg)" stroke="currentColor" strokeOpacity="0.20" />
                <text x="24" y="22" fontSize="9.5" fontFamily="ui-monospace, monospace"
                letterSpacing="0.14em" fill="currentColor" opacity="0.45">SURFACE 01</text>
                {/* node graph */}
                <g transform="translate(54, 44)">
                  <g stroke="currentColor" strokeOpacity="0.38" strokeWidth="1" fill="none">
                    <line x1="18" y1="22" x2="78" y2="48" />
                    <line x1="78" y1="48" x2="150" y2="22" />
                    <line x1="78" y1="48" x2="42" y2="92" />
                    <line x1="78" y1="48" x2="152" y2="82" />
                    <line x1="42" y1="92" x2="108" y2="100" />
                    <line x1="108" y1="100" x2="152" y2="82" />
                    <line x1="150" y1="22" x2="152" y2="82" />
                  </g>
                  <g fill="var(--bg)" stroke="currentColor" strokeOpacity="0.6" strokeWidth="1.2">
                    <circle cx="18" cy="22" r="6" />
                    <circle cx="78" cy="48" r="10" />
                    <circle cx="150" cy="22" r="5" />
                    <circle cx="42" cy="92" r="6" />
                    <circle cx="108" cy="100" r="7" />
                    <circle cx="152" cy="82" r="5" />
                  </g>
                </g>
              </g>
              <text x="185" y="218" textAnchor="middle" fontSize="16" fontWeight="500"
              letterSpacing="-0.01em" fill="currentColor">Strata Atlas</text>
              <text x="185" y="238" textAnchor="middle" fontSize="13"
              fill="currentColor" opacity="0.62">Institutional knowledge.</text>

              {/* === SURFACE 2: Nexus (metric tile) === */}
              <g transform="translate(405, 30)">
                <rect x="0" y="160" width="290" height="6" rx="2" fill="black" fillOpacity="0.05" />
                <rect x="10" y="0" width="270" height="160" rx="10"
                fill="var(--bg)" stroke="currentColor" strokeOpacity="0.20" />
                <text x="24" y="22" fontSize="9.5" fontFamily="ui-monospace, monospace"
                letterSpacing="0.14em" fill="currentColor" opacity="0.45">SURFACE 02</text>
                {/* twin numbers + sparkline */}
                <g transform="translate(28, 36)">
                  <text x="0" y="30" fontSize="24" fontFamily="ui-serif, Georgia, serif"
                  fontWeight="400" fill="currentColor">$428K</text>
                  <text x="0" y="46" fontSize="8.5" fontFamily="ui-monospace, monospace"
                  letterSpacing="0.1em" fill="currentColor" opacity="0.55">RECOVERED</text>
                  <text x="130" y="30" fontSize="24" fontFamily="ui-serif, Georgia, serif"
                  fontWeight="400" fill="currentColor">1,284h</text>
                  <text x="130" y="46" fontSize="8.5" fontFamily="ui-monospace, monospace"
                  letterSpacing="0.1em" fill="currentColor" opacity="0.55">RECLAIMED</text>
                  {/* trend bars */}
                  <g transform="translate(0, 64)">
                    {[8, 14, 11, 19, 16, 23, 30].map((h, i) =>
                    <rect key={i} x={i * 32} y={36 - h} width="18" height={h}
                    fill={i === 6 ? "url(#pdGrad)" : "currentColor"}
                    opacity={i === 6 ? 1 : 0.22} rx="1" />
                    )}
                  </g>
                </g>
              </g>
              <text x="540" y="218" textAnchor="middle" fontSize="16" fontWeight="500"
              letterSpacing="-0.01em" fill="currentColor">Strata Nexus</text>
              <text x="540" y="238" textAnchor="middle" fontSize="13"
              fill="currentColor" opacity="0.62">Outcomes and reporting.</text>

              {/* === SURFACE 3: Canvas (workflow nodes) === */}
              <g transform="translate(760, 30)">
                <rect x="0" y="160" width="290" height="6" rx="2" fill="black" fillOpacity="0.05" />
                <rect x="10" y="0" width="270" height="160" rx="10"
                fill="var(--bg)" stroke="currentColor" strokeOpacity="0.20" />
                <text x="24" y="22" fontSize="9.5" fontFamily="ui-monospace, monospace"
                letterSpacing="0.14em" fill="currentColor" opacity="0.45">SURFACE 03</text>
                {/* 4 workflow blocks in a row with arrows */}
                <g transform="translate(30, 60)">
                  {[0, 1, 2, 3].map((i) =>
                  <g key={i} transform={`translate(${i * 58}, 0)`}>
                      <rect x="0" y="0" width="42" height="38" rx="5"
                    fill="var(--bg)" stroke="currentColor" strokeOpacity="0.5" />
                      <circle cx="8" cy="10" r="1.8" fill="currentColor" opacity="0.5" />
                      <line x1="14" y1="10" x2="34" y2="10" stroke="currentColor" strokeOpacity="0.28" />
                      <line x1="8" y1="20" x2="30" y2="20" stroke="currentColor" strokeOpacity="0.18" />
                      <line x1="8" y1="28" x2="26" y2="28" stroke="currentColor" strokeOpacity="0.18" />
                      {i < 3 &&
                    <g stroke="currentColor" strokeOpacity="0.45" fill="none">
                          <line x1="42" y1="19" x2="56" y2="19" />
                          <polyline points="52,15 56,19 52,23" />
                        </g>
                    }
                    </g>
                  )}
                </g>
              </g>
              <text x="895" y="218" textAnchor="middle" fontSize="16" fontWeight="500"
              letterSpacing="-0.01em" fill="currentColor">Canvas</text>
              <text x="895" y="238" textAnchor="middle" fontSize="13"
              fill="currentColor" opacity="0.62">Workflow design.</text>

              {/* === STRATA CORE === */}
              <g transform="translate(50, 370)">
                <rect x="0" y="120" width="980" height="6" rx="2" fill="black" fillOpacity="0.06" />
                <rect x="10" y="0" width="960" height="120" rx="12"
                fill="currentColor" fillOpacity="0.025"
                stroke="currentColor" strokeOpacity="0.22" />
                {/* engine: 4 lanes with dotted tracks and node beads */}
                <g transform="translate(50, 22)">
                  {[0, 1, 2, 3].map((lane) => {
                    const y = lane * 19 + 12;
                    const highlightIdx = lane === 1 ? 3 : lane === 3 ? 5 : -1;
                    return (
                      <g key={lane}>
                        <line x1="0" y1={y} x2="880" y2={y}
                        stroke="currentColor" strokeOpacity="0.16" strokeWidth="1"
                        strokeDasharray="3 4" />
                        {[40, 180, 320, 460, 600, 740, 860].map((x, idx) => {
                          const hot = idx === highlightIdx;
                          return (
                            <circle key={idx} cx={x} cy={y} r={hot ? 4 : 3}
                            fill={hot ? "url(#pdGrad)" : "var(--bg)"}
                            stroke="currentColor"
                            strokeOpacity={hot ? 0 : 0.55}
                            strokeWidth="1" />);

                        })}
                      </g>);

                  })}
                  {/* center badge */}
                  <g transform="translate(430, 50)">
                    <rect x="-66" y="-14" width="132" height="28" rx="5"
                    fill="var(--bg)" stroke="currentColor" strokeOpacity="0.3" />
                    <text x="0" y="5" textAnchor="middle" fontSize="11"
                    fontFamily="ui-monospace, monospace" letterSpacing="0.16em"
                    fill="currentColor" opacity="0.78">STRATA CORE</text>
                  </g>
                </g>
              </g>
              <text x="540" y="516" textAnchor="middle" fontSize="13"
              fill="currentColor" opacity="0.62">The engine that runs every workflow.</text>

              {/* === BOTTOM CONNECTORS (core → systems) === */}
              <g className="pd-conn-bottom">
                {bottomConn.map((c, i) =>
                <g key={i}>
                    <path d={conn(c.x1, c.y1, c.x2, c.y2)}
                  stroke="currentColor" strokeOpacity="0.32" strokeWidth="1" fill="none" />
                    <circle cx={c.x1} cy={c.y1 + (c.y2 - c.y1) * 0.5} r="1.4"
                  fill="currentColor" opacity="0.55" />
                  </g>
                )}
              </g>

              {/* === FIRM SYSTEMS band === */}
              <g transform="translate(50, 588)">
                <rect x="0" y="0" width="980" height="46" rx="6"
                fill="url(#pdHatch)" stroke="currentColor" strokeOpacity="0.28" />
              </g>
              <text x="540" y="662" textAnchor="middle" fontSize="11"
              fontFamily="ui-monospace, monospace" letterSpacing="0.16em"
              fill="currentColor" opacity="0.55">YOUR FIRM’S SYSTEMS</text>
            </svg>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────────────
 * Platform, Briefly
 * ────────────────────────────────────────────────────────────────────────── */
function Platform() {
  const cards = [
  {
    surface: 'Surface 01',
    strata: 'Strata',
    name: 'Atlas',
    body: 'Where your firm’s operational map lives. Data sources connected, knowledge organized, ontology managed, workflows configured. The technical surface, operated by your innovation and IT teams alongside ours.'
  },
  {
    surface: 'Surface 02',
    strata: 'Strata',
    name: 'Nexus',
    body: 'The executive dashboard. Operational Value at the top: Time Saved, Revenue Recovered. Every workflow’s health, every integration’s status, and a Morning Brief in your inbox. Built for the CIO, CFO, COO and Managing Partner.'
  },
  {
    surface: 'Surface 03',
    strata: 'Strata',
    name: 'Canvas',
    body: 'The design surface for new automations. Workflows get built here, by our team and your SMEs together, before they’re promoted into production.'
  }];

  return (
    <section className="s" id="platform">
      <div className="container">
        <Reveal>
          <div className="section-eyebrow">
            <span className="eyebrow">The Platform, Briefly</span>
          </div>
          <h2 className="section" style={{ maxWidth: 720 }}>
            One platform. Three surfaces.
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <div className="platform-grid">
            {cards.map((c, i) =>
            <div key={i} className="platform-card">
                <div className="surface-name">{c.surface}</div>
                <h3>
                  {c.strata && <span className="strata">{c.strata} </span>}
                  {c.name}
                </h3>
                <p>{c.body}</p>
              </div>
            )}
          </div>
          <div className="platform-core">
            <div className="platform-core-name">
              <span className="strata">Strata </span>Core
            </div>
            <p className="platform-core-body">
              The engine underneath. Every workflow runs on it. Every dashboard reads
              from it. Every integration flows through it. One foundation for the work.
            </p>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────────────
 * About
 * ────────────────────────────────────────────────────────────────────────── */
function About() {
  return (
    <section className="s" id="about">
      <div className="container">
        <Reveal>
          <div className="section-eyebrow">
            <span className="eyebrow">About Strata</span>
          </div>
        </Reveal>
        <div className="about-grid">
          <Reveal className="about-prose">
            <h2 className="section" style={{ maxWidth: 660 }}>
              Built to recover the revenue and capacity firms were losing to work nobody had time to do.
            </h2>
            <p>
              We’re a small team of operators, engineers, and legal-industry veterans, with
              production deployments across legal and adjacent verticals proving the platform
              generalizes.
            </p>
          </Reveal>
          <Reveal delay={120}>
            <div className="iltacon-card">
              <div className="when">August 2026</div>
              <div className="where">ILTACON · National Harbor</div>
              <div className="what">
                Our wedge customer’s first deployment will be live in production. Find us at the booth.
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────────────
 * CTA closer · "See what your firm is currently writing off."
 * ────────────────────────────────────────────────────────────────────────── */
function CTAClose() {
  return (
    <section className="cta-closer" id="demo">
      <div className="earth-glow" aria-hidden="true" style={{ position: 'absolute', left: '-220px', bottom: '-180px' }} />
      <div className="container" style={{ position: 'relative' }}>
        <Reveal>
          <div className="section-eyebrow">
            <span className="eyebrow">Get Started</span>
          </div>
          <h2 className="cta-headline">
            See what your firm is currently <span className="accent">writing off</span>.
          </h2>
          <p className="cta-sub">
            Your firm is writing off revenue every minute. Let’s find out how much.
          </p>
          <div className="hero-ctas">
            <a href="book-a-demo.html" className="btn btn-primary">Book a Demo</a>
            <a href="#platform" className="btn btn-link arrow-right">See the platform</a>
          </div>

          <div className="trust-row">
            <div className="trust-cell">
              <div className="l">Hosting</div>
              <div className="v pending">Private LLM · pending verification</div>
            </div>
            <div className="trust-cell">
              <div className="l">Supervision</div>
              <div className="v pending">Attorney-supervised workflows</div>
            </div>
            <div className="trust-cell">
              <div className="l">Residency</div>
              <div className="v pending">US data residency · pending verification</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ──────────────────────────────────────────────────────────────────────────
 * Footer
 * ────────────────────────────────────────────────────────────────────────── */
function Footer() {
  return (
    <footer>
      <div className="container footer-inner">
        <div className="wordmark">
          <img src="assets/strata-logo.svg" alt="Strata" className="wordmark-full" />
        </div>
        <div className="footer-links">
          <a href="#platform">Platform</a>
          <a href="#workflows">Workflows</a>
          <a href="#atlas">Atlas</a>
          <a href="book-a-demo.html">Book a demo</a>
        </div>
        <div>© 2026 Strata AI, Inc.</div>
      </div>
    </footer>);

}

Object.assign(window, {
  Reveal, Nav, Hero, Integrations, Problem, WhatChanges, ValueGrid,
  Workflows, WhyStrata, PlatformDiagram, Platform, About, CTAClose, Footer
});