/* ATC Homepage — sections, interactions, modal, tweaks */
const { useState, useEffect, useRef, useCallback } = React;

/* Shared carousel hook — measures actual card width so navigation snaps correctly
   even when card width is a fraction of container (for "1/3 peek" effect). */
const useCarousel = (itemCount) => {
  const [idx, setIdx] = useState(0);
  const [perView, setPerView] = useState(3);
  const [dragOffset, setDragOffset] = useState(0);
  const wrapRef = useRef(null);
  const trackRef = useRef(null);
  const [cardW, setCardW] = useState(404);
  const touchState = useRef({ startX: 0, currentX: 0, dragging: false, startIdx: 0 });

  useEffect(() => {
    const measure = () => {
      const w = window.innerWidth;
      setPerView(w < 720 ? 1 : w < 1100 ? 2 : 3);
      const firstCard = trackRef.current?.firstElementChild;
      if (firstCard) {
        setCardW(firstCard.offsetWidth + 24); // card + gap
      }
    };
    measure();
    window.addEventListener('resize', measure);
    const ro = new ResizeObserver(measure);
    if (trackRef.current?.firstElementChild) ro.observe(trackRef.current.firstElementChild);
    return () => {
      window.removeEventListener('resize', measure);
      ro.disconnect();
    };
  }, [itemCount]);

  const max = Math.max(0, itemCount - perView);
  const safeIdx = Math.min(idx, max);

  const goTo = useCallback((newIdx) => {
    setIdx(Math.max(0, Math.min(max, newIdx)));
    setDragOffset(0);
  }, [max]);

  const handleTouchStart = useCallback((e) => {
    const touch = e.touches[0];
    touchState.current = { startX: touch.clientX, currentX: touch.clientX, dragging: true, startIdx: idx };
    setDragOffset(0);
  }, [idx]);

  const handleTouchMove = useCallback((e) => {
    if (!touchState.current.dragging) return;
    const touch = e.touches[0];
    touchState.current.currentX = touch.clientX;
    const delta = touchState.current.currentX - touchState.current.startX;
    setDragOffset(delta);
  }, []);

  const handleTouchEnd = useCallback(() => {
    if (!touchState.current.dragging) return;
    const delta = touchState.current.currentX - touchState.current.startX;
    const threshold = cardW * 0.25;
    if (delta < -threshold && idx < max) {
      goTo(idx + 1);
    } else if (delta > threshold && idx > 0) {
      goTo(idx - 1);
    } else {
      setDragOffset(0);
    }
    touchState.current.dragging = false;
  }, [cardW, idx, max, goTo]);

  return {
    wrapRef, trackRef, idx: safeIdx, max, cardW, dragOffset,
    next: () => goTo(idx + 1),
    prev: () => goTo(idx - 1),
    handlers: { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd },
  };
};

const HEADLINE_VARIANTS = [
  { key: 'enterprise', main: 'Enterprise AI', accent: 'Engineering &', stroke: 'Automation' },
  { key: 'future', main: 'We Build', accent: 'The Future', stroke: 'Of AI' },
  { key: 'legacy', main: 'Stop Paying', accent: 'The Legacy', stroke: 'Tax' },
  { key: 'forms', main: 'Oracle Forms', accent: 'To APEX.', stroke: 'Automated.' }];


const FONT_VARIANTS = [
  { key: 'archivo', name: 'Archivo Narrow', stack: "'Archivo Narrow', sans-serif" },
  { key: 'barlow', name: 'Barlow Condensed', stack: "'Barlow Condensed', sans-serif" },
  { key: 'oswald', name: 'Oswald', stack: "'Oswald', sans-serif" },
  { key: 'antonio', name: 'Antonio', stack: "'Antonio', sans-serif" }];


const ACCENT_VARIANTS = {
  orange: { c: '#f97316', c2: '#fb923c' },
  amber: { c: '#fbbf24', c2: '#fcd34d' },
  red: { c: '#ef4444', c2: '#f87171' },
  electric: { c: '#3b82f6', c2: '#60a5fa' }
};

const BG_VARIANTS = {
  black: { bg: '#0a0a0f', bg2: '#171723', bg3: '#16161e' },
  charcoal: { bg: '#141416', bg2: '#1c1c1f', bg3: '#232327' },
  blueblack: { bg: '#080a14', bg2: '#10131f', bg3: '#161b2c' }
};

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "enterprise",
  "font": "archivo",
  "productVisual": "pipeline",
  "bg": "black",
  "density": "default",
  "accent": "orange"
} /*EDITMODE-END*/;

/* ---------- Reveal hook ---------- */
const useReveal = () => {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.1, rootMargin: '0px 0px -80px 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
};

/* ---------- Counter ---------- */
const Counter = ({ to, suffix = '', duration = 1800 }) => {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(Math.round(to * eased));
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, [to, duration]);
  return <span ref={ref}>{val.toLocaleString()}{suffix && <span className="suffix">{suffix}</span>}</span>;
};

/* ---------- Nav ---------- */
const Nav = ({ onDemoClick }) => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <a href="#" className="logo">
          <img src="assets/atc-mark.png" alt="ATC" />
          <span className="logo-text">ATC<span className="dim">·</span></span>
        </a>
        <div className="nav-links">
          <a className="nav-link" href="#products">Products</a>
          <a className="nav-link" href="#tech">Technology</a>
          <a className="nav-link" href="#solutions">Solutions</a>
          <a className="nav-link" href="#customers">Customers</a>
          <a className="nav-link" href="#news">News</a>
          <button className="btn btn-primary nav-cta" onClick={onDemoClick}>Request Demo →</button>
        </div>
      </div>
    </nav>);

};

/* ---------- Hero ---------- */
const Hero = ({ headlineKey, onDemoClick }) => {
  const h = HEADLINE_VARIANTS.find((v) => v.key === headlineKey) || HEADLINE_VARIANTS[0];
  return (
    <section className="hero" style={{ padding: "200px 0px 20px" }}>
      <div className="hero-grid" />
      <div className="container hero-inner">
        <div className="hero-eyebrow">
          <span className="dot" />
          <span className="mono" style={{ fontSize: 16, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600 }}>
            ATC · For AI That Counts
          </span>
        </div>
        <h1>
          {h.main}<br />
          <span className="accent">{h.accent}</span><br />
          <span className="stroke">{h.stroke}</span>
        </h1>
        <p className="hero-sub">
          A suite of proprietary AI platforms — from document intelligence and onboarding to AI assistants
          and enterprise super apps. Built on agentic AI, hybrid GraphRAG, and machine learning.
          Powering finance, telecom, government, higher education, and construction —
          where outcomes show up on the P&amp;L.
        </p>
        <div className="hero-actions">
          <button className="btn btn-primary" onClick={onDemoClick}>Request a Demo →</button>
          <a className="btn btn-ghost" href="platform.html">Explore the Platform</a>
        </div>

      </div>
    </section>);

};

/* ---------- Product portfolio ---------- */
const PRODUCTS = [
  {
    id: 'curio', tag: 'CURIO / FRONTLINE AGENT', name: 'CURIO', kicker: '/ Agentic AI for Frontline Teams',
    lede: <>A <span className="hl">multimodal agentic AI</span> — not a chatbot. Curio reads text, voice, images, and documents; reasons over emotion, sentiment, and intent; and <span className="hl">takes action and follow ups</span>. It runs the frontline: sales, customer service, internal support — checking inventory, negotiating pricing, raising work orders, closing loops. Think OpenClaw for the enterprise.</>,
    features: [
      { t: 'Multimodal', d: 'Text · voice · image · documents' },
      { t: 'Emotion-aware', d: 'Reads sentiment, tone, intent' },
      { t: 'Self-learning', d: 'Improves from every closed case' },
      { t: 'Auditable', d: 'Every action logged + reversible' }],

    primary: { href: '#contact', label: 'Request access →' }
  },
  {
    id: 'historian', tag: 'PROJECT HISTORIAN', name: 'HISTORIAN', kicker: '/ Institutional Memory Engine',
    lede: <>Twenty years from now, someone will ask <span className="hl">"why was that pillar there?"</span> or <span className="hl">"why was this valve replaced?"</span> Project Historian answers. It builds a living knowledge graph of every decision, change, and actor across a project's lifetime — so explainability survives staff turnover, vendor change, and the passing of decades.</>,
    features: [
      { t: 'Knowledge graph', d: 'Projects · subprojects · issues · work orders · people' },
      { t: 'Decision trail', d: 'Why a change was made — not just what changed' },
      { t: 'Built for decades', d: 'Construction · utilities · infrastructure · regulated assets' },
      { t: 'Queryable', d: 'Natural language traces back through time' }],

    primary: { href: '#contact', label: 'Talk to us →' }
  },
  {
    id: 'corebridge', tag: 'CORE_BRIDGE / SUPER APP', name: 'CORE_BRIDGE', kicker: '/ Your Org, Your Own AI Super App',
    lede: <>One <span className="hl">native mobile super app and SDK</span> — your departments build their own AI-powered Micro-Apps inside it. Develop apps easily on the <span className="hl">free Oracle APEX</span> low-code platform while leveraging the security and scalability of <span className="hl">Oracle AI Cloud</span>. Every team gets an intelligent assistant in the palm of their hands; plus your data never leaves your private cloud.</>,
    features: [
      { t: 'Do what you do best', d: 'You design the workflows and features, we handle the technicals.' },
      { t: 'Native mobile experience', d: 'Biometric login · offline · push notifications · GPS · Camera Access' },
      { t: 'Micro-Apps per dept', d: 'HR · Finance · Ops · Field — each their own' },
      { t: 'Private OCI hosting', d: 'Cloud and On-Prem · private · zero data egress' }],

    primary: { href: '#contact', label: 'See it in action →' }
  },
  {
    id: 'apexbridge', tag: 'APEXBRIDGE / AUTOMATED MIGRATIONS WITH AI', name: 'APEX_BRIDGE', kicker: '/ Flagship · Migration',
    lede: <>Automated migration from <span className="hl">Oracle Forms</span> and <span className="hl">VBCS</span> to <span className="hl">Oracle APEX</span> with AI. <span className="hl">Cut years off your migration timeline</span> — without the consultant army.</>,
    stats: [
      { num: '99', suf: '%', lab: 'automation' },
      { num: '3–9', suf: 'mo', lab: 'timeline' },
      { num: '60', suf: '%', lab: 'faster vs manual' },
      { num: '0', suf: '$', lab: 'runtime license' }],

    primary: { href: 'platform.html', label: 'See the Platform →' }
  },
  {
    id: 'hyperassist', tag: 'HYPERASSIST / HUB', name: 'HYPERASSIST', kicker: '/ AI Tools Hub',
    lede: <>A privately-hosted orchestration hub for every AI tool in your org. <span className="hl">One governance plane, one audit trail, one bill</span> — for sectors where data sovereignty is non-negotiable.</>,
    stats: [
      { num: '24', suf: '+', lab: 'tools routed' },
      { num: '100', suf: '%', lab: 'private hosting' },
      { num: '1', suf: '', lab: 'governance plane' },
      { num: 'SOC2', suf: '', lab: 'ready' }],

    primary: { href: '#contact', label: 'Book a briefing →' }
  },
  {
    id: 'certiflow', tag: 'CERTIFLOW / ONBOARDING', name: 'CERTIFLOW', kicker: '/ Secure Onboarding Engine',
    lede: <>AI-vision document validation for <span className="hl">KYC, clearance, and benefits intake.</span> Replace human intermediation without compromising sensitive personal information.</>,
    stats: [
      { num: '92', suf: '%', lab: 'auto-approved' },
      { num: '4.2', suf: 'min', lab: 'avg case time' },
      { num: '50', suf: '+', lab: 'ID document types' },
      { num: 'eKYC', suf: '', lab: 'ready' }],

    primary: { href: '#contact', label: 'See onboarding flow →' }
  },
  {
    id: 'docreference', tag: 'DOCREFERENCE / IDP', name: 'DOC_REFERENCE', kicker: '/ Document Intelligence Engine',
    lede: <>Beyond OCR. <span className="hl">Human-level understanding</span> of contracts, intelligence reports, and bank statements — cleansed, formatted, and linked to downstream systems.</>,
    stats: [
      { num: '99.4', suf: '%', lab: 'extraction accuracy' },
      { num: '300', suf: '+', lab: 'doc templates' },
      { num: '24', suf: '×', lab: 'faster vs manual' },
      { num: 'AST', suf: '', lab: 'cross-ref engine' }],

    primary: { href: '#contact', label: 'Try a sample →' }
  },
  {
    id: 'insightscore', tag: 'INSIGHTSCORE / ASSESSMENT', name: 'INSIGHT_SCORE', kicker: '/ Transparent AI Assessment',
    lede: <>Standardize and accelerate scoring for loans, grants, and clearance applications. <span className="hl">Every decision comes with evidence-based reasoning</span> — fair, auditable, regulator-ready.</>,
    stats: [
      { num: '100', suf: '%', lab: 'auditable' },
      { num: '5', suf: '×', lab: 'faster decisions' },
      { num: '0.04', suf: '', lab: 'bias delta' },
      { num: '5+', suf: '', lab: 'weighted factors' }],

    primary: { href: '#contact', label: 'Request a pilot →' }
  }];


const ProductSection = ({ p, index }) => {
  const Visual = window.ProductVisuals?.[p.id];
  const reverse = index % 2 === 1;
  return (
    <div className={`product-card reveal ${reverse ? 'reverse' : ''}`}>
      <div className="info">
        <div className="info-top">
          <div className="product-tag">
            <span className="accent">●</span> {p.tag}
          </div>
          <h3>{p.name}</h3>
          <p className="lede">{p.lede}</p>
          {p.features ?
            <div className="proof feature-proof">
              {p.features.map((f) =>
                <div className="feature-stat" key={f.t}>
                  <div className="t">{f.t}</div>
                  <div className="d">{f.d}</div>
                </div>
              )}
            </div> :

            <div className="proof">
              {p.stats.map((s) =>
                <div className="proof-stat" key={s.lab}>
                  <div className="num">{s.num}<span style={{ fontSize: '0.5em' }}>{s.suf}</span></div>
                  <div className="lab">{s.lab}</div>
                </div>
              )}
            </div>
          }
        </div>
        <div className="info-bottom">
          <a className="btn btn-primary" href={p.primary.href}>{p.primary.label}</a>
          <a className="btn-arrow" href="#tech">Built on <span className="arrow">→</span></a>
        </div>
      </div>
      <div className="visual">
        {Visual ? <Visual /> : null}
      </div>
    </div>);

};

const ProductPortfolio = () => {
  return (
    <section id="products">
      <div className="container">
        <div className="section-header reveal" style={{ gap: "48px" }}>
          <div className="left">
            <span className="eyebrow eyebrow-accent">/ Product Portfolio</span>
            <h2>AI solutions<br />that pay for themselves.</h2>
          </div>
          <div className="right">
            Mission-critical AI for the enterprises and agencies where off-the-shelf tools fail.
            Each product is privately hosted, fully auditable, and engineered to ship into production —
            not slideware, not a pilot that never scales.
          </div>
        </div>
        <div className="products-stack">
          {PRODUCTS.map((p, i) => <ProductSection p={p} index={i} key={p.id} />)}
        </div>
      </div>
    </section>);

};

/* ---------- Stats ---------- */
const StatsBanner = () =>
  <section className="stats-banner reveal" id="stats">
    <div className="container">
      <div className="stats-grid">
        <div className="stat-cell">
          <div className="num"><Counter to={8} /></div>
          <div className="label">Proprietary AI platforms in production</div>
        </div>
        <div className="stat-cell">
          <div className="num"><Counter to={6} /></div>
          <div className="label">Regulated industries deployed</div>
        </div>
        <div className="stat-cell">
          <div className="num"><Counter to={100} suffix="%" /></div>
          <div className="label">Privately hosted · sovereign-ready</div>
        </div>
        <div className="stat-cell">
          <div className="num"><Counter to={0} suffix="$" /></div>
          <div className="label">Customer data leaves your tenant</div>
        </div>
      </div>
    </div>
  </section>;


/* ---------- Technologies (cross-cutting tech under the products) ---------- */
const TECHNOLOGIES = [
  { n: '01', t: 'Agentic AI', d: 'Tool-calling agents that plan, execute, and self-correct. Powering DocReference\'s repair loops, Curio\'s multi-step research, and Hyperassist\'s tool routing.' },
  { n: '02', t: 'Hybrid GraphRAG', d: 'Knowledge graphs fused with vector retrieval — every answer is grounded, cited, and traceable. The substrate behind Curio, Historian, and DocReference.' },
  { n: '03', t: 'Machine Learning', d: 'Custom ML models for predictive scoring, document classification, and computer vision. Fine-tuned on your data, deployed on your infrastructure.' },
  { n: '04', t: 'Analytics & Data Foundations', d: 'Modern lakehouse architecture, MLOps pipelines, and synthetic data generation. The data plumbing that makes the rest of the platform possible.' }];

const Technologies = () =>
  <section id="tech">
    <div className="container">
      <div className="section-header reveal">
        <div className="left">
          <span className="eyebrow eyebrow-accent">/ Technologies</span>
          <h2>The substrate<br />under every product.</h2>
        </div>
        <div className="right">
          Our products aren't wrappers around someone else's API. They run on a shared technology stack
          we built and operate ourselves — so we can ship into regulated, sovereign, on-premise environments where most AI vendors can't follow.
        </div>
      </div>
      <div className="benefit-grid reveal">
        {TECHNOLOGIES.map((b) =>
          <div className="benefit-card" key={b.n}>
            <div className="num">{b.n}</div>
            <div className="accent-bar" />
            <h4>{b.t}</h4>
            <p>{b.d}</p>
          </div>
        )}
      </div>
    </div>
  </section>;


/* ---------- Use cases ---------- */
const USE_CASES = [
  {
    industry: 'Banking',
    product: 'Certiflow + Insightscore',
    title: 'Tier-1 retail bank — loan origination',
    desc: 'AI-vision document validation and transparent credit assessment. KYC compressed from days to minutes; every decision audit-traced for the regulator.',
    outcome: '92%', label: 'auto-approved · day one',
    bg: 'banking'
  },
  {
    industry: 'Telecom',
    product: 'Core Bridge + Curio',
    title: 'National carrier — unified ops surface',
    desc: 'Twelve internal tools collapsed into one super app. Engineers ask Curio in natural language; answers come back cited from billing, CRM, and network data.',
    outcome: '$1.2M', label: 'annual tooling savings',
    bg: 'telecom'
  },
  {
    industry: 'Government',
    product: 'Hyperassist + DocReference',
    title: 'Federal agency — sovereign AI hub',
    desc: 'Privately-hosted AI orchestration with intelligence-grade document processing. Zero data egress; full lineage on every model invocation.',
    outcome: '100%', label: 'on-prem · sovereign',
    bg: 'gov'
  },
  {
    industry: 'Insurance',
    product: 'DocReference + Historian',
    title: 'Multi-line carrier — claims intelligence',
    desc: 'Contract clauses, policy schedules, and adjuster notes parsed and cross-referenced. The institutional memory that survives staff turnover.',
    outcome: '24×', label: 'faster contract review',
    bg: 'banking'
  },
  {
    industry: 'Healthcare',
    product: 'Certiflow + Insightscore',
    title: 'Public health authority — benefits intake',
    desc: 'Identity-gated benefits applications with transparent eligibility scoring. Caseworkers review, they don\'t rekey.',
    outcome: '4.2 min', label: 'avg case processing',
    bg: 'gov'
  },
  {
    industry: 'Enterprise IT',
    product: 'ApexBridge',
    title: 'Insurance group — Oracle Forms migration',
    desc: '180 Forms screens migrated to Oracle APEX in 7 months. Zero Java SE fees, Oracle-endorsed path, no consultant army.',
    outcome: '180 forms', label: 'migrated · 7 months',
    bg: 'telecom'
  }];

const UseCaseImage = ({ kind }) => {
  // abstract per-industry visual
  const fills = {
    banking: 'linear-gradient(135deg, #1a1a24 0%, #0a0a0f 100%)',
    telecom: 'linear-gradient(135deg, #1a1820 0%, #0a0a0f 100%)',
    gov: 'linear-gradient(135deg, #181a22 0%, #0a0a0f 100%)'
  };
  return (
    <div style={{ position: 'absolute', inset: 0, background: fills[kind] }}>
      <svg width="100%" height="100%" viewBox="0 0 400 220" preserveAspectRatio="xMidYMid slice">
        <defs>
          <pattern id={`grid-${kind}`} width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="1" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill={`url(#grid-${kind})`} />
        {kind === 'banking' &&
          <g>
            <rect x="40" y="60" width="60" height="100" fill="rgba(249,115,22,0.6)" />
            <rect x="110" y="40" width="60" height="120" fill="rgba(249,115,22,0.4)" />
            <rect x="180" y="80" width="60" height="80" fill="rgba(249,115,22,0.5)" />
            <rect x="250" y="50" width="60" height="110" fill="rgba(249,115,22,0.3)" />
            <line x1="20" y1="180" x2="380" y2="180" stroke="rgba(255,255,255,0.2)" strokeWidth="1" />
          </g>
        }
        {kind === 'telecom' &&
          <g>
            <circle cx="200" cy="110" r="6" fill="var(--accent)" />
            <circle cx="200" cy="110" r="40" fill="none" stroke="rgba(249,115,22,0.4)" />
            <circle cx="200" cy="110" r="70" fill="none" stroke="rgba(249,115,22,0.25)" />
            <circle cx="200" cy="110" r="100" fill="none" stroke="rgba(249,115,22,0.15)" />
            <circle cx="120" cy="80" r="3" fill="var(--accent)" />
            <circle cx="280" cy="140" r="3" fill="var(--accent)" />
            <circle cx="260" cy="60" r="3" fill="var(--accent)" />
            <circle cx="140" cy="160" r="3" fill="var(--accent)" />
          </g>
        }
        {kind === 'gov' &&
          <g>
            <polygon points="200,40 240,70 240,140 200,170 160,140 160,70" fill="none" stroke="rgba(249,115,22,0.6)" strokeWidth="1.5" />
            <polygon points="200,70 220,85 220,125 200,140 180,125 180,85" fill="rgba(249,115,22,0.3)" />
            <line x1="80" y1="110" x2="160" y2="110" stroke="rgba(255,255,255,0.15)" />
            <line x1="240" y1="110" x2="320" y2="110" stroke="rgba(255,255,255,0.15)" />
          </g>
        }
      </svg>
    </div>);

};
const UseCases = () => {
  const { wrapRef, trackRef, idx, max, cardW, dragOffset, next, prev, handlers } = useCarousel(USE_CASES.length);
  return (
    <section id="solutions" className="news">
      <div className="container">
        <div className="section-header reveal">
          <div className="left">
            <span className="eyebrow eyebrow-accent">/ Use Cases</span>
            <h2>Production<br />deployments.</h2>
          </div>
          <div className="right">
            Selected programs across regulated industries — banking, telecom, public sector, insurance, healthcare —
            where downtime is a board-level event and the audit trail is the product.
          </div>
        </div>
        <div className="news-track-wrap reveal" ref={wrapRef}>
          <div className="news-track" ref={trackRef} {...handlers} style={{ transform: `translateX(${-idx * cardW + dragOffset}px)`, touchAction: 'pan-y' }}>
            {USE_CASES.map((u, i) => (
              <div className="news-card usecase-news-card" key={u.title}>
                <div className="image"><UseCaseImage kind={u.bg} /></div>
                <div className="body">
                  <div className="meta">
                    <span className="cat">{u.industry}</span>
                    <span style={{ color: 'var(--accent)' }}>{u.product}</span>
                  </div>
                  <h4>{u.title}</h4>
                  <p>{u.desc}</p>
                  <div className="usecase-outcome">
                    <div className="v">{u.outcome}</div>
                    <div className="l">{u.label}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="news-controls">
          <button className="news-btn" onClick={prev} disabled={idx === 0} aria-label="Previous">←</button>
          <button className="news-btn" onClick={next} disabled={idx === max} aria-label="Next">→</button>
        </div>
      </div>
    </section>
  );
};


/* ---------- Logo wall ---------- */
const LogoWall = () =>
  <section className="logo-wall reveal" id="customers">
    <div className="container">
      <div className="logo-wall-eyebrow">
        <span className="eyebrow">Trusted by enterprise teams running Oracle Forms in production</span>
      </div>
      <div className="logos">
        {['NORDBANK', 'TELCO·X', 'MERIDIAN', 'AURORA', 'FEDERAL·9', 'INTRAVIA'].map((l) =>
          <div className="logo-item" key={l}>{l}</div>
        )}
      </div>
    </div>
  </section>;


/* ---------- Testimonials ---------- */
const TESTIMONIALS = [
  {
    quote: <>ApexBridge cut our Oracle Forms migration timeline from <span className="hl">28 months to 7</span>. The economics weren't even close.</>,
    name: 'CIO',
    role: 'European retail bank · 41,000 employees',
    avatar: 'EB'
  },
  {
    quote: <>We killed a multi-million-dollar OutSystems contract and shipped to APEX in two quarters. <span className="hl">Zero runtime fees</span>, full team buy-in.</>,
    name: 'VP, Engineering',
    role: 'National telecommunications carrier',
    avatar: 'TC'
  },
  {
    quote: <>The deterministic core matters. We could review every line, prove every trigger. Our auditors were <span className="hl">comfortable on day one</span>.</>,
    name: 'Director, Digital Modernization',
    role: 'Federal civilian agency',
    avatar: 'FA'
  },
  {
    quote: <>Most "AI migration" tools are demos. ApexBridge is a <span className="hl">production system</span> that actually compiles, tests, and deploys.</>,
    name: 'Chief Architect',
    role: 'Insurance group · 14M policyholders',
    avatar: 'IG'
  }];

const Testimonials = () => {
  const { wrapRef, trackRef, idx, max, cardW, dragOffset, next, prev, handlers } = useCarousel(TESTIMONIALS.length);
  return (
    <section id="voices" className="news">
      <div className="container">
        <div className="section-header reveal">
          <div className="left">
            <span className="eyebrow eyebrow-accent">/ In Their Words</span>
            <h2>Engineers<br />talking to engineers.</h2>
          </div>
          <div className="right">
            Operators in regulated industries — banking, telecom, public sector, insurance — on what they shipped and why it stuck.
          </div>
        </div>
        <div className="news-track-wrap reveal" ref={wrapRef}>
          <div className="news-track" ref={trackRef} {...handlers} style={{ transform: `translateX(${-idx * cardW + dragOffset}px)`, touchAction: 'pan-y' }}>
            {TESTIMONIALS.map((t, i) => (
              <div className="news-card testimonial-news-card" key={i}>
                <div className="image">
                  <NewsImage kind={['a', 'b', 'c', 'd'][i % 4]} />
                  <div className="testimonial-avatar">{t.avatar}</div>
                </div>
                <div className="body">
                  <div className="meta">
                    <span className="cat">Field Report</span>
                    <span>{t.role.split('·')[0].trim()}</span>
                  </div>
                  <div className="quote">{t.quote}</div>
                  <div className="attrib">
                    <div className="name">{t.name}</div>
                    <div className="role">{t.role}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="news-controls">
          <button className="news-btn" onClick={prev} disabled={idx === 0} aria-label="Previous">←</button>
          <button className="news-btn" onClick={next} disabled={idx === max} aria-label="Next">→</button>
        </div>
      </div>
    </section>
  );
};


/* ---------- News carousel ---------- */
const NEWS = [
  { cat: 'Product', date: 'Apr 2026', title: 'ApexBridge v2.4 — incremental sync for live cutover', body: 'New incremental sync mode keeps source Forms running during migration. Read the release notes.', kind: 'a' },
  { cat: 'Customer', date: 'Mar 2026', title: 'How a retail bank migrated 180 forms in 7 months', body: 'Field report from a Tier-1 European bank running ApexBridge in production.', kind: 'b' },
  { cat: 'Engineering', date: 'Feb 2026', title: 'Why we built a deterministic AST core, not a chatbot', body: 'A look inside the ApexBridge architecture and our agentic repair loop.', kind: 'c' },
  { cat: 'Event', date: 'Jan 2026', title: 'ATC at Oracle CloudWorld 2026 — booth K412', body: 'Live ApexBridge demos and our keynote on agentic AI for legacy systems.', kind: 'd' },
  { cat: 'Product', date: 'Dec 2025', title: 'VBCS support reaches general availability', body: 'Visual Builder Cloud Service migration is now production-ready in ApexBridge.', kind: 'e' },
  { cat: 'Customer', date: 'Nov 2025', title: 'Federal agency cuts citizen-portal load time by 4x', body: 'Replatforming a Forms-era VBCS app onto APEX delivered measurable performance gains.', kind: 'f' }];

const NewsImage = ({ kind }) => {
  const colors = { a: '#f97316', b: '#fb923c', c: '#16a8b8', d: '#f97316', e: '#fb923c', f: '#16a8b8' };
  return (
    <div style={{ position: 'absolute', inset: 0, background: 'var(--bg-3)' }}>
      <svg width="100%" height="100%" viewBox="0 0 380 200" preserveAspectRatio="xMidYMid slice">
        <rect width="100%" height="100%" fill="var(--bg-3)" />
        {Array.from({ length: 30 }).map((_, i) => {
          const x = i * 37 % 380;
          const y = i * 53 % 200;
          const s = 4 + i % 5;
          return <rect key={i} x={x} y={y} width={s} height={s} fill={colors[kind]} opacity={0.05 + i % 7 * 0.03} />;
        })}
        <circle cx="320" cy="60" r="40" fill={colors[kind]} opacity="0.15" />
        <circle cx="320" cy="60" r="20" fill={colors[kind]} opacity="0.4" />
      </svg>
    </div>);

};
const NewsCarousel = () => {
  const { wrapRef, trackRef, idx, max, cardW, dragOffset, next, prev, handlers } = useCarousel(NEWS.length);
  return (
    <section id="news" className="news">
      <div className="container">
        <div className="section-header reveal">
          <div className="left">
            <span className="eyebrow eyebrow-accent">/ News & Field Reports</span>
            <h2>What we're<br />shipping.</h2>
          </div>
          <div className="right">
            Product releases, customer stories, and engineering deep-dives from the ATC team.
          </div>
        </div>
        <div className="news-track-wrap reveal" ref={wrapRef}>
          <div className="news-track" ref={trackRef} {...handlers} style={{ transform: `translateX(${-idx * cardW + dragOffset}px)`, touchAction: 'pan-y' }}>
            {NEWS.map((n, i) =>
              <a className="news-card" key={i} href="#">
                <div className="image"><NewsImage kind={n.kind} /></div>
                <div className="body">
                  <div className="meta">
                    <span className="cat">{n.cat}</span>
                    <span>{n.date}</span>
                  </div>
                  <h4>{n.title}</h4>
                  <p>{n.body}</p>
                </div>
              </a>
            )}
          </div>
        </div>
        <div className="news-controls">
          <button className="news-btn" onClick={prev} disabled={idx === 0} aria-label="Previous">←</button>
          <button className="news-btn" onClick={next} disabled={idx === max} aria-label="Next">→</button>
        </div>
      </div>
    </section>);

};

/* ---------- FAQ ---------- */
const FAQS = [
  { q: 'How is privacy ensured for our data?', a: <>Every ATC platform is <strong>privately hosted</strong> — on-prem, in your cloud tenant, or in a sovereign region you choose. Customer data <strong>never leaves your environment</strong>. Models run inside your perimeter; prompts, documents, and outputs stay where your firewall is. We don't train shared models on your data — full stop.</> },
  { q: 'Where do the AI models run? Are they yours or third-party?', a: <>Both, your call. ATC platforms run on a <strong>model-agnostic substrate</strong> — open-weight models hosted in your tenant, or commercial APIs (Anthropic, OpenAI, Azure) routed through Hyperassist with your governance and audit policies applied. For sovereign workloads, everything stays self-hosted.</> },
  { q: 'How do these platforms integrate with our existing stack?', a: <>Through standard connectors — REST, SOAP, ODBC, SAP, Salesforce, ServiceNow, Microsoft 365, Oracle EBS, plus file ingestion (S3, SharePoint, on-prem shares). Curio's tool-calling layer plugs directly into your CRM/ERP. Custom integrations are built per program — typically a 1–3 week effort.</> },
  { q: 'What does deployment look like and how long does it take?', a: <>Most engagements deliver a working pilot in <strong>weeks, not quarters</strong>. A typical timeline: week 1–2 environment + integrations, week 3–4 pilot use case, week 6–10 expansion to adjacent workflows. We deploy on your infrastructure or run a managed sovereign environment for you.</> },
  { q: 'How do we measure ROI?', a: <>Every deployment ships with <strong>baseline metrics agreed up front</strong> — case-handling time, deflection rate, conversion lift, audit cycle time, headcount avoided. We instrument the platforms so the numbers come out of the system itself, not consulting decks. Most customers reach payback inside 12 months.</> },
  { q: 'What about audit, compliance, and explainability?', a: <>Every action — every model call, every tool invocation, every decision — is <strong>logged, reversible, and traceable</strong>. Insightscore and Curio output evidence-based reasoning per case. We support GDPR, SOC 2, ISO 27001, and sector-specific regimes (banking, healthcare, public sector) on request.</> },
  { q: 'Can these be customized to our domain and workflows?', a: <>Yes — that's the deployment model, not a bolt-on. Each platform ships with sector-specific blueprints (banking, telecom, public sector, insurance, healthcare) and we tailor agents, workflows, and data schemas to your processes. <strong>You own the configuration; we maintain the platform.</strong></> },
  { q: 'Are we locked in to ATC?', a: <>No. Outputs are <strong>standard, portable, and inspectable</strong> — Oracle APEX applications, standard knowledge graphs, plain documents, structured exports. You can take what we built and run it without us. Vendor lock-in is what most enterprise AI quietly sells you. We refuse to.</> }];

const FAQ = ({ onDemoClick }) => {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq">
      <div className="container">
        <div className="section-header reveal">
          <div className="left">
            <span className="eyebrow eyebrow-accent">/ Hard Questions</span>
            <h2>Objections,<br />answered.</h2>
          </div>
          <div className="right">
            The questions every Oracle Forms shop asks before they sign. We answer them up front.
          </div>
        </div>
        <div className="faq-wrap reveal">
          {FAQS.map((f, i) =>
            <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{f.q}</span>
                <span className="icon" />
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{f.a}</div>
              </div>
            </div>
          )}
          <div style={{ marginTop: 32, textAlign: 'center' }}>
            <button className="btn-arrow" onClick={onDemoClick}>Still have questions? Talk to an engineer <span className="arrow">→</span></button>
          </div>
        </div>
      </div>
    </section>);

};

/* ---------- Final CTA ---------- */
const FinalCTA = ({ onDemoClick }) =>
  <section className="final-cta">
    <div className="final-cta-bg" />
    <div className="container">
      <div className="final-cta-inner reveal">
        <h2>Bring us your<br /><span className="accent">hardest problems</span>.</h2>
        <p>30-minute call with our engineering team.<br />No slides, no consultants — bring a real problem, leave with a roadmap.</p>
        <div className="actions">
          <button className="btn btn-primary" onClick={onDemoClick}>Request a Demo →</button>
          <a className="btn btn-ghost" href="mailto:hello@aitechcloud.com">hello@aitechcloud.com</a>
        </div>
      </div>
    </div>
  </section>;


/* ---------- Footer ---------- */
const Footer = () =>
  <footer className="footer" id="about">
    <div className="container">
      <div className="footer-grid">
        <div className="footer-brand">
          <a href="#" className="logo">
            <img src="assets/atc-mark.png" alt="ATC" />
            <span className="logo-text">ATC<span className="dim">·</span></span>
          </a>
          <p>AI Tech Cloud. Enterprise AI engineering & automation. We build the future of AI for the systems that already run the world.</p>
        </div>
        <div className="footer-col">
          <h5>Products</h5>
          <ul>
            <li><a href="platform.html">ApexBridge</a></li>
            <li><a href="#products">Curio</a></li>
            <li><a href="#products">Project Historian</a></li>
            <li><a href="#products">Core Bridge</a></li>
            <li><a href="#products">Hyperassist</a></li>
            <li><a href="#products">Certiflow</a></li>
            <li><a href="#products">DocReference</a></li>
            <li><a href="#products">Insightscore</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Technology</h5>
          <ul>
            <li><a href="#tech">Agentic AI</a></li>
            <li><a href="#tech">Hybrid GraphRAG</a></li>
            <li><a href="#tech">Machine Learning</a></li>
            <li><a href="#tech">Analytics</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Solutions</h5>
          <ul>
            <li><a href="#solutions">Banking</a></li>
            <li><a href="#solutions">Telecom</a></li>
            <li><a href="#solutions">Government</a></li>
            <li><a href="#solutions">Insurance</a></li>
            <li><a href="#solutions">Healthcare</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Company</h5>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 AI Tech Cloud · ATC. All rights reserved.</div>
        <div className="legal">
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
          <a href="#">Cookies</a>
        </div>
      </div>
    </div>
  </footer>;


/* ---------- Demo Modal ---------- */
const DemoModal = ({ open, onClose }) => {
  const [form, setForm] = useState({ name: '', email: '', company: '', forms: '', notes: '' });
  const [errors, setErrors] = useState({});
  const [submitted, setSubmitted] = useState(false);

  useEffect(() => {
    if (open) document.body.style.overflow = 'hidden'; else
      document.body.style.overflow = '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  useEffect(() => {
    if (!open) {
      setTimeout(() => { setSubmitted(false); setForm({ name: '', email: '', company: '', forms: '', notes: '' }); setErrors({}); }, 250);
    }
  }, [open]);

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Required';
    if (!form.email.trim()) e.email = 'Required'; else
      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = 'Valid email required';
    if (!form.company.trim()) e.company = 'Required';
    if (!form.forms) e.forms = 'Pick a range';
    setErrors(e);
    return Object.keys(e).length === 0;
  };
  const submit = (ev) => {
    ev.preventDefault();
    if (validate()) setSubmitted(true);
  };

  return (
    <div className={`modal-overlay ${open ? 'open' : ''}`} onClick={onClose}>
      <div className="modal" onClick={(ev) => ev.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">✕</button>
        {!submitted ?
          <>
            <h3>Request a Demo</h3>
            <p className="sub">30-minute scoping call. We'll bring an engineer, you bring your Forms repo.</p>
            <form onSubmit={submit} noValidate>
              <div className="field-row">
                <div className={`field ${errors.name ? 'error' : ''}`}>
                  <label>Name</label>
                  <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
                  {errors.name && <div className="err">{errors.name}</div>}
                </div>
                <div className={`field ${errors.email ? 'error' : ''}`}>
                  <label>Work email</label>
                  <input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
                  {errors.email && <div className="err">{errors.email}</div>}
                </div>
              </div>
              <div className={`field ${errors.company ? 'error' : ''}`}>
                <label>Company</label>
                <input value={form.company} onChange={(e) => setForm({ ...form, company: e.target.value })} />
                {errors.company && <div className="err">{errors.company}</div>}
              </div>
              <div className={`field ${errors.forms ? 'error' : ''}`}>
                <label>Forms in scope</label>
                <select value={form.forms} onChange={(e) => setForm({ ...form, forms: e.target.value })}>
                  <option value="">Select a range…</option>
                  <option value="1-25">1–25 forms</option>
                  <option value="25-100">25–100 forms</option>
                  <option value="100-500">100–500 forms</option>
                  <option value="500+">500+ forms</option>
                  <option value="vbcs">VBCS application</option>
                </select>
                {errors.forms && <div className="err">{errors.forms}</div>}
              </div>
              <div className="field">
                <label>Anything else? <span style={{ textTransform: 'none', letterSpacing: 0, color: 'var(--text-3)' }}>(optional)</span></label>
                <textarea rows="3" value={form.notes} onChange={(e) => setForm({ ...form, notes: e.target.value })} />
              </div>
              <div className="submit-row">
                <button type="submit" className="btn btn-primary">Submit Request →</button>
                <span style={{ fontSize: 12, color: 'var(--text-3)' }}>We reply within 1 business day.</span>
              </div>
            </form>
          </> :

          <div className="success">
            <div className="check">✓</div>
            <h3 style={{ textAlign: 'center' }}>Request received</h3>
            <p className="sub" style={{ textAlign: 'center' }}>An ATC engineer will reach out to <strong style={{ color: 'var(--text)' }}>{form.email}</strong> within 1 business day.</p>
            <div style={{ textAlign: 'center', marginTop: 24 }}>
              <button className="btn btn-ghost" onClick={onClose}>Close</button>
            </div>
          </div>
        }
      </div>
    </div>);

};

/* ---------- Tweaks ---------- */
const Tweaks = ({ tweaks, setTweak }) =>
  <TweaksPanel title="Tweaks">
    <TweakSection title="Headline">
      <TweakSelect label="Copy" value={tweaks.headline} onChange={(v) => setTweak('headline', v)}
        options={HEADLINE_VARIANTS.map((h) => ({ value: h.key, label: `${h.main} ${h.accent} ${h.stroke}` }))} />
      <TweakSelect label="Display font" value={tweaks.font} onChange={(v) => setTweak('font', v)}
        options={FONT_VARIANTS.map((f) => ({ value: f.key, label: f.name }))} />
    </TweakSection>
    <TweakSection title="Visual">
      <TweakRadio label="Product visual" value={tweaks.productVisual} onChange={(v) => setTweak('productVisual', v)}
        options={[{ value: 'pipeline', label: 'Pipeline' }, { value: 'before-after', label: 'Before/After' }, { value: 'terminal', label: 'Terminal' }]} />
      <TweakRadio label="Accent" value={tweaks.accent} onChange={(v) => setTweak('accent', v)}
        options={[{ value: 'orange', label: 'Orange' }, { value: 'amber', label: 'Amber' }, { value: 'red', label: 'Red' }, { value: 'electric', label: 'Electric' }]} />
      <TweakRadio label="Background" value={tweaks.bg} onChange={(v) => setTweak('bg', v)}
        options={[{ value: 'black', label: 'Black' }, { value: 'charcoal', label: 'Charcoal' }, { value: 'blueblack', label: 'Blue-black' }]} />
      <TweakRadio label="Density" value={tweaks.density} onChange={(v) => setTweak('density', v)}
        options={[{ value: 'compact', label: 'Compact' }, { value: 'default', label: 'Default' }, { value: 'spacious', label: 'Spacious' }]} />
    </TweakSection>
  </TweaksPanel>;


/* ---------- App ---------- */
const App = () => {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);
  const [demoOpen, setDemoOpen] = useState(false);

  // Apply tweaks to root
  useEffect(() => {
    const root = document.documentElement;
    const font = FONT_VARIANTS.find((f) => f.key === tweaks.font) || FONT_VARIANTS[0];
    root.style.setProperty('--font-display', font.stack);
    const accent = ACCENT_VARIANTS[tweaks.accent] || ACCENT_VARIANTS.orange;
    root.style.setProperty('--accent', accent.c);
    root.style.setProperty('--accent-2', accent.c2);
    const bg = BG_VARIANTS[tweaks.bg] || BG_VARIANTS.black;
    root.style.setProperty('--bg', bg.bg);
    root.style.setProperty('--bg-2', bg.bg2);
    root.style.setProperty('--bg-3', bg.bg3);
    root.setAttribute('data-density', tweaks.density);
  }, [tweaks]);

  useReveal();

  const onDemoClick = useCallback(() => setDemoOpen(true), []);

  return (
    <>
      <Nav onDemoClick={onDemoClick} />
      <Hero headlineKey={tweaks.headline} onDemoClick={onDemoClick} />
      <ProductPortfolio />
      <StatsBanner />
      <Technologies />
      <UseCases />
      <LogoWall />
      <Testimonials />
      <NewsCarousel />
      <FAQ onDemoClick={onDemoClick} />
      <FinalCTA onDemoClick={onDemoClick} />
      <Footer />
      <DemoModal open={demoOpen} onClose={() => setDemoOpen(false)} />
      <Tweaks tweaks={tweaks} setTweak={setTweak} />
    </>);

};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);