// sections.jsx — page sections

/* ---------- Reusable bits ---------- */

function Reveal({ as: As = 'div', className = '', children, style, delay = 0 }) {
  const ref = useReveal();
  return (
    <As ref={ref} className={`reveal ${className}`} style={{ ...style, transitionDelay: delay + 'ms' }}>
      {children}
    </As>
  );
}

function Section({ id, label, children, className = '' }) {
  return (
    <section id={id} className={`relative ${className}`}>
      {label && (
        <div className="absolute top-8 left-8 md:left-16 z-10 flex items-center gap-3">
          <span className="w-2 h-2 rounded-full bg-steel" style={{ boxShadow:'0 0 10px #5682B3' }} />
          <span className="label-bp">{label}</span>
        </div>
      )}
      {children}
    </section>
  );
}

function Crosshair({ className = '' }) {
  return (
    <span className={`relative inline-block w-3 h-3 ${className}`}>
      <span className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-px bg-steel" />
      <span className="absolute inset-y-0 left-1/2 -translate-x-1/2 w-px bg-steel" />
    </span>
  );
}

/* ---------- NAV ---------- */

function Nav() {
  const y = useScrollY();
  const shrunk = y > 24;
  const [open, setOpen] = useState(false);

  const close = () => setOpen(false);

  return (
    <>
      <header className={`fixed top-0 inset-x-0 z-50 transition-all duration-500 ${shrunk ? 'py-3 bg-ink/80 backdrop-blur-xl border-b border-line' : 'py-6 bg-transparent border-b border-transparent'}`}>
        <div className="mx-auto max-w-[1640px] px-6 md:px-12 flex items-center justify-between">
          <a href="#top" onClick={close} className="flex items-center gap-3">
            <img src="src/assets/logo.svg" alt="Pentabeam" className="h-8 md:h-10 lg:h-[76px] w-auto block" />
            <span className="hidden lg:inline font-sans text-[40px] tracking-[-0.01em] text-paper"><span className="font-semibold">Penta</span>beam</span>
          </a>

          {/* Desktop nav */}
          <nav className="hidden md:flex items-center gap-10 label-bp">
            <a href="#numbers"  className="ulink hover:text-paper">engineering</a>
            <a href="#modules"  className="ulink hover:text-paper">platform</a>
            <a href="#moat"     className="ulink hover:text-paper">data</a>
            <a href="#pricing"  className="ulink hover:text-paper">pricing</a>
            <a href="#team"     className="ulink hover:text-paper">team</a>
          </nav>

          <div className="flex items-center gap-4">
            <a href="#cta" className="hidden sm:flex label-bp items-center gap-2 px-3 py-2 border border-line2 hover:border-steel transition-colors">
              early access <span className="text-steel">→</span>
            </a>
            {/* Hamburger — mobile only */}
            <button
              onClick={() => setOpen(o => !o)}
              className="md:hidden flex flex-col justify-center gap-[5px] w-8 h-8 p-1"
              aria-label="Toggle menu"
            >
              <span className={`block h-px bg-paper transition-all duration-300 origin-center ${open ? 'rotate-45 translate-y-[6px]' : ''}`} />
              <span className={`block h-px bg-paper transition-all duration-300 ${open ? 'opacity-0' : ''}`} />
              <span className={`block h-px bg-paper transition-all duration-300 origin-center ${open ? '-rotate-45 -translate-y-[6px]' : ''}`} />
            </button>
          </div>
        </div>
      </header>

      {/* Mobile menu overlay */}
      <div
        className={`fixed inset-0 z-40 bg-ink flex flex-col transition-opacity duration-300 md:hidden ${open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}
      >
        <div className="flex-1 flex flex-col justify-center px-8 gap-2">
          {[
            ['Platform',    '#modules'],
            ['Engineering', '#numbers'],
            ['Data',        '#moat'],
            ['Pricing',     '#pricing'],
            ['Team',        '#team'],
          ].map(([label, href]) => (
            <a
              key={href}
              href={href}
              onClick={close}
              className="font-display text-paper border-b border-line py-6 transition-colors hover:text-steel"
              style={{ fontSize: 'clamp(28px, 8vw, 48px)', fontWeight: 300, letterSpacing: '-0.02em' }}
            >
              {label}
            </a>
          ))}
          <a
            href="#cta"
            onClick={close}
            className="mt-8 btn-primary self-start"
          >
            <span>Early access</span><span>→</span>
          </a>
        </div>
        <div className="px-8 pb-10 label-bp text-fog">
          Pentabeam d.o.o. · Ljubljana · Slovenia · EU
        </div>
      </div>
    </>
  );
}

/* ---------- HERO ---------- */

function Hero() {
  const y = useScrollY();
  // Dashboard parallax + rotation tied to scroll
  const target = Math.min(1, y / 900);
  const sTarget = useSpring(target, { stiffness: 70, damping: 22 });
  const rotX = 14 - sTarget * 14;        // starts tilted 14°, settles flat
  const rotZ = -2 + sTarget * 2;
  const ty   = 0 - sTarget * 40;
  const scale = 1 - sTarget * 0.04;

  return (
    <Section id="top" className="flex flex-col pb-10 md:pb-16" style={{ minHeight: '100vh' }}>
      {/* Three.js BIM scene — pinned to first viewport height */}
      <div className="absolute top-0 left-0 right-0 overflow-hidden" style={{ pointerEvents: 'auto', height: '100vh' }}>
        <BIMHero />
      </div>
      {/* overlay grids for texture */}
      <div className="absolute inset-0 grid-bp opacity-40 pointer-events-none" />
      <div className="absolute inset-0 dof-vignette pointer-events-none" />

      {/* Headline block */}
      <div className="pt-44 md:pt-52 px-6 md:px-12 max-w-[1640px] mx-auto w-full">
        {/* corner ticks — aligned with content left edge */}
        <div className="label-bp mb-10 hidden md:block">
          <div>n 46.0569°</div>
          <div>e 14.5058°</div>
          <div className="mt-3 text-paper">Ljubljana · SI · EU</div>
        </div>
        <h1 className="font-light tracking-[-0.03em] leading-[0.92] text-paper" style={{ fontSize:'clamp(56px, 11vw, 168px)' }}>
          <Reveal as="span" className="block">Construction.</Reveal>
          <Reveal as="span" className="block text-fog2" delay={150} style={{ paddingBottom: '0.14em' }}>Finally Intelligent.</Reveal>
        </h1>

        <Reveal delay={300} className="mt-8 max-w-xl">
          <p className="text-mist text-[16px] md:text-[18px] leading-[1.6]">
            AI cost control for mid-market contractors. Pentabeam catches BoQ gaps, invoice errors, and untracked change orders before they reach your margin.
          </p>
        </Reveal>
        <Reveal delay={400} className="mt-8 flex items-center gap-6">
          <a href="#cta" className="btn-primary">
            <span>Request early access</span>
            <span>→</span>
          </a>
          <a href="#modules" className="label-bp ulink hover:text-paper">
            Explore the platform
          </a>
        </Reveal>
      </div>

      {/* Platform UI floating — replaced from buildflow-precision/src/components/Hero.tsx */}
      <div className="relative mt-28 md:mt-36 px-4 md:px-10"
           style={{ perspective: '1400px' }}>
        <div style={{
          transform: `translateY(${ty}px) rotateX(${rotX}deg) rotateZ(${rotZ}deg) scale(${scale})`,
          transformStyle: 'preserve-3d',
          transformOrigin: '50% 0%',
          transition: 'transform 80ms linear',
        }}>
          <PlatformUI />
        </div>
      </div>

      {/* scroll cue */}
      <div className="label-bp flex flex-col items-center gap-2 mt-8">
        <span>Scroll</span>
        <span className="platform-scroll-cue" style={{ height: '24px', width: '1px', background: 'var(--c-line2)', display: 'block' }} />
      </div>
    </Section>
  );
}

/* ---------- INTEGRATION STRIP ---------- */

function Ribbon() {
  const stack = [
    'GAEB', 'Autodesk APS', 'RIB iTWO', 'Nemetschek Allplan',
    'Nevaris', 'MS Dynamics 365 BC', 'IFC 4', 'Gmail', 'Outlook',
  ];
  return (
    <section className="border-t border-line">
      <div className="max-w-[1640px] mx-auto px-6 md:px-12 py-8 flex flex-col md:flex-row md:items-center gap-5 md:gap-10">
        <div className="label-bp shrink-0">works with your existing stack</div>
        <div className="flex flex-wrap items-center gap-x-8 gap-y-3">
          {stack.map(s => (
            <span key={s} className="text-fog2 text-[13px] tracking-[0.04em] whitespace-nowrap">{s}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- INTRO ---------- */

function Intro() {
  return (
    <Section id="intro" className="py-20 md:py-28 border-t border-line">
      <div className="max-w-[1640px] mx-auto px-6 md:px-12">
        <div className="grid grid-cols-12 gap-10 items-end">

          {/* Headline block */}
          <div className="col-span-12 md:col-span-7">
            <Reveal>
              <h2 className="font-light tracking-[-0.03em] leading-[0.96] text-paper" style={{ fontSize: 'clamp(32px, 8vw, 120px)' }}>
                Your margins<br />
                are leaking.<br />
                <span className="text-fog2">Most find out<br />too late.</span>
              </h2>
            </Reveal>
          </div>

          {/* Right column — subheadline + description */}
          <div className="col-span-12 md:col-span-5">
            <Reveal delay={120}>
              <p className="text-paper text-[20px] md:text-[22px] font-light leading-[1.35] tracking-[-0.01em]">
                Pentabeam AI closes the gap between what you quoted and what you paid.
              </p>
            </Reveal>
            <Reveal delay={220} className="mt-8">
              <p className="text-mist leading-[1.7] text-[15px] max-w-md">
                Pentabeam AI is a cost control platform built for mid-market EU contractors: the firms running multiple sites on Excel, chasing change orders by email, and discovering billing errors only when the books close. It replaces the manual reconciliation workflow across BoQ management, subcontractor invoicing, and cost forecasting with a single AI-assisted workspace. You see where every euro is going before it is gone.
              </p>
            </Reveal>
            <Reveal delay={320} className="mt-10 flex items-center gap-6">
              <a href="#modules" className="btn-primary">
                <span>See how it works</span>
                <span>→</span>
              </a>
              <a href="#cta" className="label-bp ulink hover:text-paper">
                Request a pilot
              </a>
            </Reveal>
          </div>

        </div>

        {/* Bottom stat strip */}
        <Reveal delay={200} className="mt-24 pt-10 border-t border-line grid grid-cols-3 md:grid-cols-3 gap-8">
          {[
            ['5–15%', 'of project value lost to cost overruns, billing errors, and undetected BoQ gaps'],
            ['5.5%',  'average EBIT margin for top EU contractors. One missed invoice can erase it.'],
            ['9/10',  'construction projects lose money due to cost leakage from oversight gaps'],
          ].map(([stat, desc]) => (
            <div key={stat} className="flex flex-col gap-3">
              <div className="font-light text-steel tabular" style={{ fontSize: 'clamp(36px, 4vw, 64px)', lineHeight: 1, whiteSpace: 'nowrap' }}>{stat}</div>
              <div className="label-bp leading-[1.7] max-w-[200px]">{desc}</div>
            </div>
          ))}
        </Reveal>
      </div>
    </Section>
  );
}

/* ---------- COMPARE — the manual way vs Pentabeam ---------- */

function Compare() {
  const rows = [
    [
      'BoQ preparation',
      'Built by hand in Excel. Gaps surface on site, priced at claim rates.',
      'AI cross-checks every line against your completed projects before the bid goes out.',
    ],
    [
      'Subcontractor invoices',
      'Spot-checked at month-end. Or never checked at all.',
      'Every line matched against approved cost lists and contract rates. Dispute pack ready.',
    ],
    [
      'Change orders',
      'Negotiated in inboxes. Lost in email history. Disputed a year later.',
      'Detected in the thread, flagged the same day, formalised while everyone still remembers.',
    ],
    [
      'Cost forecast',
      'A spreadsheet someone updates when there is time. Usually optimistic.',
      'Live Cost-to-Complete including detected gaps. Plain-English summary, same day.',
    ],
  ];

  return (
    <Section id="compare" className="py-32 md:py-44 border-t border-line">
      <div className="max-w-[1640px] mx-auto px-6 md:px-12">
        <div className="grid grid-cols-12 gap-10 mb-20">
          <div className="col-span-12 md:col-span-7">
            <Reveal>
              <h2 className="font-light tracking-[-0.02em] leading-[1.02] text-paper" style={{ fontSize:'clamp(40px, 6vw, 96px)' }}>
                Excel got you here.<br /><span className="text-fog">It won't get you further.</span>
              </h2>
            </Reveal>
          </div>
          <div className="col-span-12 md:col-span-5 flex items-end">
            <Reveal delay={120}>
              <p className="text-mist leading-[1.6]">
                Almost right isn't good enough when margins run at 5.5%. Here is the workflow Pentabeam replaces — and what happens instead.
              </p>
            </Reveal>
          </div>
        </div>

        {/* column headers */}
        <Reveal className="hidden md:grid grid-cols-12 gap-8 pb-4 border-b border-line">
          <div className="col-span-2 label-bp">workflow</div>
          <div className="col-span-5 label-bp">the manual way</div>
          <div className="col-span-5 label-bp text-steel">with pentabeam</div>
        </Reveal>

        {rows.map(([k, before, after], i) => (
          <Reveal key={k} delay={i * 80} className="grid grid-cols-12 gap-4 md:gap-8 py-8 border-b border-line items-start">
            <div className="col-span-12 md:col-span-2 text-paper text-[15px]">{k}</div>
            <div className="col-span-12 md:col-span-5 flex items-start gap-3">
              <span className="mt-[9px] w-2 h-px bg-line2 shrink-0 md:hidden" />
              <p className="text-fog2 text-[14.5px] leading-[1.6]">{before}</p>
            </div>
            <div className="col-span-12 md:col-span-5 flex items-start gap-3 border-l-2 pl-4 md:pl-5" style={{ borderColor: 'var(--c-steel)' }}>
              <p className="text-mist text-[14.5px] leading-[1.6]">{after}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

/* ---------- NUMBERS ---------- */

function Numbers() {
  const stats = [
    {
      label: 'Of project value lost to cost overruns',
      target: 15, decimals: 0, suffix: '%',
      sub: 'billing errors · BoQ discrepancies · industry benchmark',
      note: 'Construction firms lose 5–15% of project value to cost overruns, billing errors, and undetected BoQ discrepancies. Most of it invisible until the books close. Source: McKinsey Global Institute, Reinventing Construction, 2017 · KPMG Global Construction Survey, 2023.',
    },
    {
      label: 'EU contractor EBIT margin · average',
      target: 5.5, decimals: 1, suffix: '%',
      sub: 'top European contractors · Deloitte 2024',
      note: 'EBIT margins for top European contractors average 5.5% (Deloitte, 2024). Direct cost of error runs ~5% of project value (GIRI, 2016). With margins this thin, a single missed variation order or duplicate invoice can erase the profit on a project.',
    },
    {
      label: 'Payment-application errors before review',
      target: 8, decimals: 0, suffix: '%',
      sub: 'of contract value · Turner & Townsend · KPMG',
      note: 'Construction-specific audits (Turner & Townsend, KPMG) show payment-application errors of 4–8% on large projects before independent review. ACFE reports ~5% of revenue lost to billing fraud across all industries. Invoice Verification is designed to surface and recover this leakage.',
    },
    {
      label: 'Qualifying EU contractors · TAM €1.33B',
      target: 29500, decimals: 0, suffix: '',
      sub: 'firms ≥€10M revenue · 12 markets · €703B annual output',
      note: 'TAM = ~29,500 building, civil and specialist contractors above €10M revenue across twelve markets that price work from an itemised cost list — €1.33B at our list pricing. Those markets produce €703B of construction output a year. The launch footprint (Slovenia, Austria, Bavaria, Czechia, Croatia, Slovakia) is 9,680 firms, a €436M serviceable market. Europe as a whole builds €3.33T a year, growing 3.3% CAGR to €4.33T by 2033. Sources: Eurostat Structural Business Statistics (NACE F) · European Construction Observatory · Market Data Forecast.',
    },
    {
      label: '9 out of 10 projects lose money',
      target: 9, decimals: 0, suffix: '/10',
      sub: 'cost leakage from oversight gaps · industry-wide',
      note: '9 out of 10 construction projects lose money due to cost leakage from oversight gaps. Three root causes: BoQ gaps & missing items (manual preparation, no automated cross-checks), subcontractor invoice overbilling (checked by hand or never checked), and untracked email change orders (negotiated in inboxes, never reconciled against the contract). Sources: ARCADIS GCDR 2025 · HKA CRUX 2024 · ACFE 2024 · GIRI 2016.',
    },
  ];
  return (
    <Section id="numbers" className="py-32 md:py-44 border-t border-line bg-ink2/30">
      <div className="max-w-[1640px] mx-auto px-6 md:px-12">
        <div className="grid grid-cols-12 gap-10">
          <div className="col-span-12 md:col-span-5">
            <Reveal>
              <h2 className="font-light tracking-[-0.02em] leading-[1.02] text-paper" style={{ fontSize:'clamp(40px, 6vw, 96px)' }}>
                Measured<br /><span className="text-fog">not marketed.</span>
              </h2>
            </Reveal>
            <Reveal delay={120} className="mt-8">
              <p className="text-mist max-w-md leading-[1.6]">
                Every number is sourced from published industry research: McKinsey, Deloitte, KPMG, GIRI, ARCADIS, HKA. This is the problem Pentabeam is built to solve. Hover any metric for the full source.
              </p>
            </Reveal>
          </div>

          <div className="col-span-12 md:col-span-7">
            <div className="border-t border-line">
              {stats.map((s, i) => <StatRow key={i} {...s} idx={i + 1} />)}
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}

function StatRow({ label, target, decimals, suffix, sub, note, idx }) {
  const [ref, val] = useCountUp(target, { decimals, suffix, duration: 1600 + idx * 100 });
  const [open, setOpen] = useState(false);
  return (
    <div
      ref={ref}
      className="stat-row border-b border-line"
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
    >
      <div className="grid grid-cols-12 items-end gap-6 py-8">
        <div className="col-span-1 label-bp">{String(idx).padStart(2, '0')}</div>
        <div className="col-span-7 md:col-span-6">
          <div className="text-paper text-[15px]">{label}</div>
          <div className="label-bp mt-1">{sub}</div>
        </div>
        <div className="col-span-4 md:col-span-5 text-right flex items-end justify-end gap-2">
          <span className="font-light tabular text-paper" style={{ fontSize:'clamp(36px, 4.5vw, 68px)' }}>{val}</span>
          {note && (
            <span className="label-bp text-steel mb-2 hidden md:inline stat-note-trigger" style={{ fontSize: '10px', letterSpacing: '0.2em' }}>
              {open ? '▲ HIDE' : '▼ METHOD'}
            </span>
          )}
        </div>
      </div>
      {note && open && (
        <div className="stat-note pb-6 px-0">
          <div
            className="label-bp leading-[1.9] text-fog2 border-l-2 pl-4"
            style={{ borderColor: 'var(--c-steel)', maxWidth: '560px', fontSize: '11px' }}
          >
            {note}
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------- MODULES ---------- */

const MODULES = [
  {
    n: '01',
    name: 'BoQ AI',
    blurb: 'Spots missing items before the bid goes out.',
    long: 'Detects gaps in a project\'s Bill of Quantities before pricing goes out. The model is trained on your own completed projects, so it learns which items your estimators tend to miss and flags them while there is still time to fix the bid.',
    panel: 'boq',
    spec: [
      ['approach',        'machine learning · gap detection'],
      ['model type',      'per-customer · trained on your projects'],
      ['improves with',   'every completed project'],
      ['prevents',        'under-pricing · missed scope'],
    ],
  },
  {
    n: '02',
    name: 'Cost-to-Complete Analytics',
    blurb: 'Live forecasts of what each project will ultimately cost, in plain English.',
    long: 'Predicts what each project will ultimately cost, flagging budget overruns before they happen. Includes detected BoQ gaps, not only what is formally committed on paper. Replaces manual Excel models with an AI summary the Construction Director can act on the same day.',
    panel: 'cost',
    spec: [
      ['output',      'plain-English AI summary'],
      ['scope',       'committed + detected gaps'],
      ['replaces',    'manual Excel cost models'],
      ['flags',       'budget overruns before they happen'],
    ],
  },
  {
    n: '03',
    name: 'Email Change Detection',
    blurb: 'Negotiated in inboxes. Never reconciled against the contract. Until now.',
    long: 'Plugs into the existing inbox. Detects language that signals scope changes and flags threads that could be turned into formal claims. Catches them before they disappear into email history and become disputed variations worth tens of thousands of euros.',
    panel: 'email',
    spec: [
      ['ingest',       'IMAP · Gmail · Outlook'],
      ['detects',      'scope changes · variation signals'],
      ['output',       'flagged threads ready for formalisation'],
      ['integrations', 'MS Dynamics 365 BC · existing inbox'],
    ],
  },
  {
    n: '04',
    name: 'Invoice Verification',
    blurb: 'Every subcontractor invoice line matched against the approved cost list.',
    long: 'Matches each subcontractor invoice line against the approved cost list, reads the relevant contract clauses with AI, and produces a formatted dispute pack ready for the Construction Director. Catches inflated quantities, unauthorised rate changes, and duplicate billings before a single euro is paid out.',
    panel: 'invoice',
    spec: [
      ['matches',      'invoice line → approved cost list'],
      ['reads',        'contract clauses · AI-assisted'],
      ['output',       'audit-ready dispute pack'],
      ['catches',      'inflated qty · rate changes · duplicates'],
    ],
  },
];

function Modules() {
  return (
    <Section id="modules" className="py-32 md:py-44 border-t border-line">
      <div className="max-w-[1640px] mx-auto px-6 md:px-12">
        <div className="grid grid-cols-12 gap-10 mb-24">
          <div className="col-span-12 md:col-span-6">
            <Reveal>
              <h2 className="font-light tracking-[-0.02em] leading-[1.02] text-paper" style={{ fontSize:'clamp(40px, 6vw, 96px)' }}>
                Four AI modules.<br /><span className="text-fog">One platform.</span>
              </h2>
            </Reveal>
          </div>
          <div className="col-span-12 md:col-span-5 md:col-start-8">
            <Reveal delay={120}>
              <p className="text-paper text-[19px] font-light leading-[1.4] tracking-[-0.01em]">
                AI handles the checking. Your team makes the decisions.
              </p>
              <p className="text-mist leading-[1.6] mt-5">
                Pentabeam replaces the Excel-and-email workflow that still runs most mid-market contracting. Each module fixes one specific failure mode, and all four read from the same place: your drawings, contracts, and email threads.
              </p>
              <p className="label-bp mt-6">All four modules built as working demos · MVP ships Q1 2027</p>
            </Reveal>
          </div>
        </div>

        <div className="space-y-32 md:space-y-48">
          {MODULES.map((m, i) => <ModuleBlock key={m.n} m={m} idx={i} />)}
        </div>

        {/* mid-page CTA strip */}
        <Reveal className="mt-32 md:mt-44 pt-14 border-t border-line flex flex-col md:flex-row md:items-end justify-between gap-8">
          <div>
            <h3 className="font-light tracking-[-0.02em] leading-[1.05] text-paper" style={{ fontSize:'clamp(28px, 3.6vw, 52px)' }}>
              See it run on<br /><span className="text-fog">your own projects.</span>
            </h3>
            <p className="mt-4 text-mist text-[15px] max-w-md leading-[1.6]">
              Pilots start with your own AI model trained on your past projects and a first invoice check within 30 days.
            </p>
          </div>
          <a href="#cta" className="btn-primary shrink-0 self-start md:self-auto">
            <span>Request early access</span>
            <span>→</span>
          </a>
        </Reveal>
      </div>
    </Section>
  );
}

function ModuleBlock({ m, idx }) {
  const [ref, p] = useElementProgress();
  // Spring-smoothed rotation as the block scrolls through view
  const t = useSpring(p, { stiffness: 60, damping: 18 });
  const rot = (t - 0.5) * 14; // -7° → +7°
  const ty  = (0.5 - t) * 40;
  const flipSide = idx % 2 === 1;

  return (
    <div ref={ref} className="grid grid-cols-12 gap-8 md:gap-12 items-center">
      <div className={`col-span-12 md:col-span-5 ${flipSide ? 'md:order-2' : ''}`}>
        <Reveal>
          <h3 className="mt-4 font-light tracking-[-0.02em] text-paper" style={{ fontSize:'clamp(36px, 4.6vw, 64px)', lineHeight: 1.02 }}>
            {m.name}
          </h3>
          <p className="mt-5 text-fog2 text-[19px] leading-[1.4]">{m.blurb}</p>
          <p className="mt-5 text-mist leading-[1.65] max-w-xl">{m.long}</p>

          <dl className="mt-10 border-t border-line">
            {m.spec.map(([k, v]) => (
              <div key={k} className="grid grid-cols-12 gap-4 py-3 border-b border-line/80">
                <dt className="col-span-5 label-bp">{k}</dt>
                <dd className="col-span-7 text-mist font-mono text-[12px]">{v}</dd>
              </div>
            ))}
          </dl>
        </Reveal>
      </div>

      <div className={`col-span-12 md:col-span-7 ${flipSide ? 'md:order-1' : ''}`} style={{ perspective: '2200px' }}>
        <Reveal>
          <div style={{
              transform: `translateY(${ty}px) rotateX(${rot * 0.35}deg) rotateY(${flipSide ? rot : -rot}deg)`,
              transformStyle: 'preserve-3d',
              transition: 'transform 90ms linear',
            }}>
            <Dashboard variant={m.panel} />
          </div>
        </Reveal>
      </div>
    </div>
  );
}

/* ---------- DATA MOAT ---------- */

function Moat() {
  return (
    <Section id="moat" className="py-32 md:py-44 border-t border-line relative overflow-hidden">
      <div className="absolute inset-0 grid-bp opacity-60 pointer-events-none" />
      <div className="max-w-[1640px] mx-auto px-6 md:px-12 relative">
        <div className="grid grid-cols-12 gap-10">
          <div className="col-span-12 md:col-span-7">
            <Reveal>
              <h2 className="font-light tracking-[-0.02em] leading-[1.0] text-paper" style={{ fontSize:'clamp(44px, 7vw, 128px)' }}>
                Trained on<br />
                <span className="text-steel">real site data.</span>
              </h2>
            </Reveal>
            <Reveal delay={120} className="mt-8 max-w-xl">
              <p className="text-mist leading-[1.65]">
                Each customer gets a dedicated AI model trained on their own historical projects. The model learns your cost structure, your trade rates, and your typical scope. It gets sharper with every project completed. The longer you use Pentabeam, the harder it is to leave.
              </p>
              <p className="text-mist leading-[1.65] mt-5">
                No black-box answers. Every flag traces back to its source: the exact contract clause, BoQ line, or email thread that triggered it. When you dispute an invoice, you dispute it with evidence.
              </p>
              <p className="text-mist leading-[1.65] mt-5">
                Built in the EU. Fully compliant with GDPR and the EU AI Act. Your project data never trains models for other customers. It stays yours, under contract.
              </p>
            </Reveal>
          </div>

          <div className="col-span-12 md:col-span-5">
            <Reveal>
              <div className="panel-flat p-8 relative">
                <div className="label-bp mb-6">competitive advantage · zero EU equivalents</div>
                <div className="space-y-5">
                  {[
                    ['BoQ gap detection',        'Machine learning · per-company model'],
                    ['Invoice verification',     'AI-matched · line by line · contract rates'],
                    ['Cost-to-Complete',         'AI-driven · plain English · replaces Excel'],
                    ['Email change detection',   'Language AI · plugs into existing inbox'],
                    ['Source-traceable flags',   'every flag → clause · BoQ line · thread'],
                    ['EU AI Act compliant',      'GDPR · built in EU · ✓'],
                  ].map(([k, v]) => (
                    <div key={k} className="flex items-baseline justify-between gap-6 pb-4 border-b border-line">
                      <div className="text-mist text-[14px] shrink-0">{k}</div>
                      <div className="label-bp text-right">{v}</div>
                    </div>
                  ))}
                </div>

                <div className="mt-8 label-bp flex items-start gap-3">
                  <Crosshair className="mt-1" />
                  <span>Zero identified EU competitors in construction invoice verification as of May 2026.</span>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </Section>
  );
}

/* ---------- COMPETITIVE LANDSCAPE ---------- */

function Compete() {
  const cols = ['Pentabeam', 'Procore', 'Autodesk Build', 'Buildxact', 'Excel + Email'];
  const rows = [
    ['BoQ learning from own historical data', 'per-company AI', '—', '—', '—', '—'],
    ['Cost-list gap detection',               'machine learning', '—', '—', 'estimating only', '—'],
    ['Line-by-line invoice verification',     'contract-aware', '—', '—', '—', 'manual'],
    ['Cost-to-Complete prediction',           'AI-driven', 'basic reporting', 'partial', '—', 'manual'],
    ['Email change detection',                'language AI', 'workflow only', 'limited', '—', '—'],
    ['IFC quantity extraction · no Autodesk licence', 'phase 2', '—', 'requires Autodesk', '—', '—'],
    ['Built in the EU · GDPR & EU AI Act',    'yes', 'US-centric', 'partial', 'Australia / NZ', 'universal'],
    ['German BoQ standards (GAEB)',           'native', '—', 'partial', '—', 'manual'],
  ];

  return (
    <Section id="compete" className="py-32 md:py-44 border-t border-line">
      <div className="max-w-[1640px] mx-auto px-6 md:px-12">
        <div className="grid grid-cols-12 gap-10 mb-16">
          <div className="col-span-12 md:col-span-7">
            <Reveal>
              <h2 className="font-light tracking-[-0.02em] leading-[1.02] text-paper" style={{ fontSize:'clamp(40px, 6vw, 96px)' }}>
                The real competitor<br /><span className="text-fog">is Excel, not Procore.</span>
              </h2>
            </Reveal>
          </div>
          <div className="col-span-12 md:col-span-5 flex items-end">
            <Reveal delay={120}>
              <p className="text-mist leading-[1.6]">
                Procore stores your paperwork. Pentabeam checks it. The market-leading platforms are strong at document storage and workflow, but none of them was built to check what a square metre actually costs you.
              </p>
            </Reveal>
          </div>
        </div>

        <Reveal>
          <div className="overflow-x-auto -mx-6 px-6 md:mx-0 md:px-0">
            <table className="w-full min-w-[860px] border-collapse">
              <thead>
                <tr className="border-y border-line">
                  <th className="text-left label-bp py-4 pr-6 w-[28%]">capability</th>
                  {cols.map((c, i) => (
                    <th key={c} className={`text-left label-bp py-4 px-4 ${i === 0 ? 'text-paper bg-ink2/60' : ''}`}>{c}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {rows.map(([cap, ...cells]) => (
                  <tr key={cap} className="border-b border-line">
                    <td className="py-4 pr-6 text-mist text-[14px] leading-[1.45]">{cap}</td>
                    {cells.map((v, i) => (
                      <td key={i} className={`py-4 px-4 text-[13.5px] ${i === 0 ? 'text-steel bg-ink2/60' : 'text-fog italic'}`}>
                        {i === 0 ? <span className="not-italic">✓ {v}</span> : v}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Reveal>

        <Reveal delay={150} className="mt-10 grid grid-cols-12 gap-10">
          <div className="col-span-12 md:col-span-6">
            <div className="panel-flat p-8 h-full">
              <div className="label-bp mb-5">why it compounds</div>
              <p className="text-mist text-[14px] leading-[1.6]">
                Every project you put through Pentabeam teaches it your rates, your wording and your subcontractors, so the next check is sharper than the last. Procore never learns what a square metre costs you to build.
              </p>
            </div>
          </div>
          <div className="col-span-12 md:col-span-6">
            <div className="panel-flat p-8 h-full">
              <div className="label-bp mb-5">nothing changes on site</div>
              <p className="text-mist text-[14px] leading-[1.6]">
                Pentabeam reads the files you already produce: the priced bill of quantities, the subcontractor invoices, the emails. Nobody has to move onto a new platform first, and nobody has to learn a new way of working.
              </p>
            </div>
          </div>
        </Reveal>

        <Reveal delay={220} className="mt-10 label-bp flex items-start gap-3">
          <Crosshair className="mt-1 shrink-0" />
          <span>Zero identified EU competitors in construction invoice verification or AI BoQ learning from a contractor's own project history, as of May 2026.</span>
        </Reveal>
      </div>
    </Section>
  );
}

/* ---------- PRICING ---------- */

const TIERS = [
  {
    name: 'Starter',
    code: 'S-01',
    price: '€18K',
    per: 'per year · €1,500 / month',
    blurb: 'Contractors €10–30M revenue. 2–5 active sites. Up to €15M verified per year.',
    feats: [
      'BoQ AI · gap detection on your cost lists',
      'Invoice Verification · up to €15M volume',
      'Email Change Detection · 1 inbox',
      'Cost-to-Complete Analytics',
      'Dedicated AI model · trained on your projects',
    ],
  },
  {
    name: 'Growth',
    code: 'G-02',
    price: '€42K',
    per: 'per year · €3,500 / month',
    blurb: 'Contractors €30–70M revenue. 5–12 active sites. Up to €40M verified per year.',
    feats: [
      'Everything in Starter',
      'Up to €40M invoice verification volume',
      'Up to 12 active sites',
      'GAEB · Autodesk APS · RIB iTWO integrations',
      'Dispute pack generation · audit-ready',
    ],
    featured: true,
  },
  {
    name: 'Scale',
    code: 'SC-03',
    price: '€72K',
    per: 'per year · €6,000 / month',
    blurb: 'Contractors €70–150M revenue. 10–25 active sites. Up to €100M verified per year.',
    feats: [
      'Everything in Growth',
      'Up to €100M invoice verification volume',
      'Up to 25 active sites',
      'Nemetschek Allplan · Nevaris · MS Dynamics 365 BC',
      'Priority onboarding · dedicated support',
    ],
  },
  {
    name: 'Enterprise',
    code: 'E-04',
    price: '€120K',
    per: 'per year · €10,000 / month',
    blurb: 'Contractors €150M+ revenue. 25+ active sites. Unlimited verification volume.',
    feats: [
      'Everything in Scale',
      'Unlimited invoice verification volume',
      'Unlimited active sites',
      'Full integration suite · IFC 4 · all ERPs',
      'GDPR DPA · EU AI Act compliance pack',
    ],
  },
];

function Pricing() {
  return (
    <Section id="pricing" className="py-32 md:py-44 border-t border-line">
      <div className="max-w-[1640px] mx-auto px-6 md:px-12">
        <div className="grid grid-cols-12 gap-10 items-end">
          <div className="col-span-12 md:col-span-6">
            <Reveal>
              <h2 className="font-light tracking-[-0.02em] leading-[1.02] text-paper" style={{ fontSize:'clamp(40px, 6vw, 96px)' }}>
                One flat annual fee.<br /><span className="text-fog">Priced against the margin it protects.</span>
              </h2>
            </Reveal>
            <Reveal delay={120} className="mt-8 max-w-lg">
              <p className="text-mist leading-[1.65]">
                Pricing is matched to your company size and active site count. No per-user charges, no usage surprises, no variable components. One flat annual fee, single-line budget approval.
              </p>
              <p className="text-mist leading-[1.65] mt-4">
                Four tiers cover everything from a handful of sites up to €150M+ groups. Pick the band that matches your revenue and that's the price.
              </p>
            </Reveal>
            <Reveal delay={200} className="mt-10">
              <a href="#cta" className="btn-primary inline-flex">
                <span>Request a quote</span>
                <span>→</span>
              </a>
            </Reveal>
            <Reveal delay={280} className="mt-6 label-bp flex items-center gap-3">
              <Crosshair />
              <span>flat annual fee · all prices EUR · ex-VAT · EU entity · GDPR compliant</span>
            </Reveal>
          </div>

          <div className="col-span-12 md:col-span-5 md:col-start-8">
            <Reveal delay={150}>
              <div className="panel-flat p-8">
                <div className="label-bp mb-6">pricing tiers · overview</div>
                <div className="space-y-0">
                  {[
                    ['Starter',    '€18K', '€10–30M revenue · 2–5 active sites'],
                    ['Growth',     '€42K', '€30–70M revenue · 5–12 active sites'],
                    ['Scale',      '€72K', '€70–150M revenue · 10–25 active sites'],
                    ['Enterprise', '€120K', '€150M+ revenue · unlimited sites'],
                  ].map(([tier, price, desc]) => (
                    <div key={tier} className="grid grid-cols-12 items-baseline gap-3 py-4 border-b border-line">
                      <div className="col-span-4 text-paper text-[14px]">{tier}</div>
                      <div className="col-span-3 text-paper text-[15px] tabular">{price}<span className="label-bp ml-1">/yr</span></div>
                      <div className="col-span-5 label-bp">{desc}</div>
                    </div>
                  ))}
                </div>
                <div className="mt-6 label-bp flex items-start gap-3">
                  <Crosshair className="mt-1 shrink-0" />
                  <span>All tiers include BoQ AI, Invoice Verification, Email Change Detection, and Cost-to-Complete Analytics.</span>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </Section>
  );
}

function TierCard({ t }) {
  return (
    <Reveal className="col-span-12 md:col-span-4">
      <div className={`machined relative p-8 h-full border ${t.featured ? 'border-steel/40 bg-ink2' : 'border-line bg-ink2/40'}`}>
        {t.featured && (
          <div className="absolute -top-px left-0 right-0 h-px bg-steel" />
        )}
        <div className="flex items-center justify-between">
          <div className="label-bp">{t.code} · tier</div>
          {t.featured && <div className="label-bp text-steel">recommended</div>}
        </div>

        <div className="mt-8 text-paper text-3xl font-light tracking-[-0.01em]">{t.name}</div>

        <div className="mt-8 flex items-baseline gap-3">
          <span className="font-light tabular text-paper" style={{ fontSize: 'clamp(40px, 4.5vw, 64px)' }}>{t.price}</span>
        </div>
        <div className="label-bp mt-1">{t.per}</div>

        <p className="mt-6 text-mist text-[14px] leading-[1.55]">{t.blurb}</p>

        <ul className="mt-8 space-y-3 border-t border-line pt-6">
          {t.feats.map((f) => (
            <li key={f} className="flex items-start gap-3 text-[13.5px] text-mist">
              <span className="mt-2 w-2 h-px bg-steel shrink-0" />
              <span>{f}</span>
            </li>
          ))}
        </ul>

        <a href="#cta" className={`mt-10 ${t.featured ? 'btn-primary' : 'btn-ghost'} w-full justify-between`}>
          <span>{t.name === 'Enterprise' ? 'Talk to us' : t.featured ? 'Start a pilot' : 'Begin a pilot'}</span>
          <span>→</span>
        </a>
      </div>
    </Reveal>
  );
}

/* ---------- TEAM ---------- */

const FOUNDERS = [
  {
    name: 'Tej Huč',
    role: 'CEO & Co-founder',
    bio: 'Civil engineer. Five years on Slovenian project sites doing project management and cost control for mid-market contractors. Built the Pentabeam prototype himself.',
    facts: [
      ['background', 'civil engineering · site cost control'],
      ['owns', 'product · engineering · pilots'],
    ],
  },
  {
    name: 'Timon Huč',
    role: 'COO & Co-founder',
    bio: 'International business. Sold software to clients across the EU and the US at a development agency before Pentabeam.',
    facts: [
      ['background', 'international business · software sales'],
      ['owns', 'commercial · operations'],
    ],
  },
];

function Team() {
  return (
    <Section id="team" className="py-32 md:py-44 border-t border-line bg-ink2/30">
      <div className="max-w-[1640px] mx-auto px-6 md:px-12">
        <div className="grid grid-cols-12 gap-10 mb-16">
          <div className="col-span-12 md:col-span-7">
            <Reveal>
              <h2 className="font-light tracking-[-0.02em] leading-[1.02] text-paper" style={{ fontSize:'clamp(40px, 6vw, 96px)' }}>
                Two brothers.<br /><span className="text-fog">One from site, one from software.</span>
              </h2>
            </Reveal>
          </div>
          <div className="col-span-12 md:col-span-5 flex items-end">
            <Reveal delay={120}>
              <p className="text-mist leading-[1.6]">
                One of us was running construction sites, the other was selling software. Pentabeam is built full time by the two of us, in Ljubljana. You will be talking to a founder from the first call onwards.
              </p>
            </Reveal>
          </div>
        </div>

        <div className="grid grid-cols-12 gap-10 items-start">
          <Reveal className="col-span-12 md:col-span-6">
            <div className="relative">
              <img
                src="src/assets/team-founders.jpg"
                alt="Tej Huč and Timon Huč on site in Ljubljana"
                className="w-full h-auto block"
              />
              <div className="absolute bottom-0 left-0 right-0 flex items-center justify-between gap-4 px-5 py-4 bg-ink/85 backdrop-blur-sm border-t border-line">
                <span className="label-bp">Ljubljana · SI · EU</span>
                <span className="label-bp text-paper">founders · 2025</span>
              </div>
            </div>
          </Reveal>

          <div className="col-span-12 md:col-span-6">
            {FOUNDERS.map((f, i) => (
              <Reveal key={f.name} delay={i * 120}>
                <div className={`py-8 border-b border-line ${i === 0 ? 'border-t md:border-t-0 md:pt-0' : ''}`}>
                  <div className="flex items-baseline justify-between gap-6">
                    <div className="text-paper text-2xl font-light tracking-[-0.01em]">{f.name}</div>
                    <div className="label-bp text-steel text-right shrink-0">{f.role}</div>
                  </div>
                  <p className="mt-5 text-mist text-[14.5px] leading-[1.6]">{f.bio}</p>
                  <div className="mt-6 space-y-3">
                    {f.facts.map(([k, v]) => (
                      <div key={k} className="grid grid-cols-12 items-baseline gap-3">
                        <div className="col-span-4 label-bp">{k}</div>
                        <div className="col-span-8 text-mist text-[13.5px]">{v}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </Reveal>
            ))}

            <Reveal delay={240} className="mt-8 label-bp flex items-start gap-3">
              <Crosshair className="mt-1 shrink-0" />
              <span>Hiring a senior ML engineer and a construction sales lead · Ljubljana or remote in the EU</span>
            </Reveal>
          </div>
        </div>
      </div>
    </Section>
  );
}

/* ---------- CTA ---------- */

function CTA() {
  const [submitted, setSubmitted] = useState(false);
  return (
    <Section id="cta" className="relative pt-32 md:pt-44 pb-24 border-t border-line overflow-hidden bg-ink">
      {/* steel glow accent */}
      <div className="absolute inset-0 pointer-events-none" style={{
        background: 'radial-gradient(ellipse 60% 50% at 50% 90%, rgba(52,93,138,0.12), rgba(52,93,138,0) 60%), radial-gradient(ellipse 40% 40% at 50% 100%, rgba(52,93,138,0.22), rgba(52,93,138,0) 70%)'
      }} />
      <div className="absolute inset-0 grid-bp opacity-40 pointer-events-none" />

      <div className="relative max-w-[1640px] mx-auto px-6 md:px-12">
        <Reveal>
          <h2 className="font-light tracking-[-0.03em] leading-[0.95] text-paper" style={{ fontSize:'clamp(56px, 11vw, 168px)' }}>
            Request<br />
            <span className="text-steel">early access.</span>
          </h2>
        </Reveal>

        <Reveal delay={150} className="mt-10 max-w-xl">
          <p className="text-mist leading-[1.65]">
            We are staging our first contractor pilots now. Tell us about your portfolio and we'll confirm fit within 48 hours.
          </p>
        </Reveal>

        {/* what happens next — 3-step pilot process */}
        <Reveal delay={200} className="mt-14 grid grid-cols-1 md:grid-cols-3 gap-px bg-line max-w-4xl border border-line">
          {[
            ['01', 'Scoping call', '30 minutes. Your portfolio, your workflow, your ERP. We confirm fit within 48 hours.'],
            ['02', 'Model training', 'Your dedicated AI model is trained on your completed projects. Nothing shared, nothing pooled.'],
            ['03', 'First result', 'First verified invoice check within 30 days. You see the flagged lines and the evidence behind each one.'],
          ].map(([n, title, desc]) => (
            <div key={n} className="bg-ink p-7">
              <div className="label-bp text-steel">{n}</div>
              <div className="mt-4 text-paper text-[17px] font-light">{title}</div>
              <p className="mt-3 text-mist text-[13.5px] leading-[1.65]">{desc}</p>
            </div>
          ))}
        </Reveal>

        <Reveal delay={250} className="mt-16 max-w-2xl">
          {!submitted ? (
            <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }} className="space-y-6">
              <FieldRow code="01" label="name">
                <input className="w-full bg-transparent border-b border-line2 py-3 text-paper outline-none focus:border-steel transition-colors" placeholder="Marko Novak" />
              </FieldRow>
              <FieldRow code="02" label="company">
                <input className="w-full bg-transparent border-b border-line2 py-3 text-paper outline-none focus:border-steel transition-colors" placeholder="Novak gradnje d.o.o." />
              </FieldRow>
              <FieldRow code="03" label="work email">
                <input type="email" required className="w-full bg-transparent border-b border-line2 py-3 text-paper outline-none focus:border-steel transition-colors" placeholder="marko@novak-gradnje.si" />
              </FieldRow>
              <FieldRow code="04" label="portfolio · concurrent">
                <select className="w-full bg-transparent border-b border-line2 py-3 text-paper outline-none focus:border-steel transition-colors appearance-none">
                  <option className="bg-ink">1 to 4 projects</option>
                  <option className="bg-ink">5 to 20 projects</option>
                  <option className="bg-ink">21 to 60 projects</option>
                  <option className="bg-ink">60+ projects</option>
                </select>
              </FieldRow>

              <div className="pt-6 flex items-center justify-between gap-6">
                <div className="label-bp max-w-sm">
                  by submitting, you agree to a 30-minute scoping call. we do not sell, share, or train external models on your project data.
                </div>
                <button type="submit" className="btn-primary">
                  <span>Submit application</span>
                  <span>→</span>
                </button>
              </div>

              {/* trust chips at the point of decision */}
              <div className="pt-6 flex flex-wrap items-center gap-3">
                {['GDPR compliant', 'EU AI Act ready', 'Data stays yours · under contract', 'Built & hosted in the EU'].map(chip => (
                  <span key={chip} className="label-bp border border-line2 px-3 py-2 whitespace-nowrap">{chip}</span>
                ))}
              </div>
            </form>
          ) : (
            <div className="panel-flat p-8 border-steel/40">
              <div className="label-bp text-steel">received</div>
              <div className="mt-5 text-paper text-2xl font-light">Thank you. We'll be in touch within 48 hours.</div>
            </div>
          )}
        </Reveal>
      </div>
    </Section>
  );
}

function FieldRow({ code, label, children }) {
  return (
    <div className="grid grid-cols-12 gap-6 items-center">
      <div className="col-span-12 md:col-span-3 flex items-center gap-4">
        <span className="label-bp">{code}</span>
        <span className="label-bp text-paper">{label}</span>
      </div>
      <div className="col-span-12 md:col-span-9">{children}</div>
    </div>
  );
}

/* ---------- FOOTER ---------- */

function Footer() {
  return (
    <footer className="relative border-t border-line bg-ink">
      <div className="max-w-[1640px] mx-auto px-6 md:px-12 py-16 grid grid-cols-12 gap-10">
        <div className="col-span-12 md:col-span-4">
          <div className="flex items-center gap-3">
            <img src="src/assets/logo.svg" alt="Pentabeam" style={{ height: '40px', width: 'auto', display: 'block' }} />
            <span className="font-sans text-[17px] tracking-[-0.01em] text-paper"><span className="font-semibold">Penta</span>beam</span>
          </div>
          <div className="mt-4 label-bp">Protecting construction margins.</div>
          <p className="mt-6 text-mist text-[14px] leading-[1.6] max-w-sm">
            Cost control for contractors who find out about margin leaks when it's too late to stop them. Built by civil engineers in Ljubljana.
          </p>
        </div>
        {[
          ['Platform', [
            { label: 'BoQ AI', href: '#modules' },
            { label: 'Cost-to-Complete Analytics', href: '#modules' },
            { label: 'Email Change Detection', href: '#modules' },
            { label: 'Invoice Verification', href: '#modules' },
          ]],
          ['Company',  [
            { label: 'About', href: 'about.html' },
            { label: 'Pilots', href: 'pilots.html' },
            { label: 'Press', href: 'press.html' },
            { label: 'Contact', href: 'contact.html' },
          ]],
          ['Legal',    [
            { label: 'Privacy', href: 'privacy.html' },
            { label: 'GDPR & EU AI Act compliance', href: 'gdpr.html' },
            { label: 'Data processing addendum', href: 'data-processing.html' },
          ]],
        ].map(([h, items]) => (
          <div key={h} className="col-span-6 md:col-span-2">
            <div className="label-bp mb-5">{h}</div>
            <ul className="space-y-3">
              {items.map((i) => {
                const label = typeof i === 'string' ? i : i.label;
                const href  = typeof i === 'string' ? null : i.href;
                return href
                  ? <li key={label}><a href={href} className="text-mist text-[13.5px] hover:text-paper transition-colors">{label}</a></li>
                  : <li key={label} className="text-mist text-[13.5px] hover:text-paper transition-colors cursor-pointer">{label}</li>;
              })}
            </ul>
          </div>
        ))}
        <div className="col-span-12 md:col-span-2">
          <div className="label-bp mb-5">contact</div>
          <div className="text-mist text-[13.5px]">tej.huc@pentabeam.com</div>
          <div className="label-bp mt-6">Ljubljana · Slovenia · EU</div>
        </div>
      </div>
      <div className="border-t border-line py-6 px-6 md:px-12 flex items-center justify-between label-bp max-w-[1640px] mx-auto">
        <span>© 2026 Pentabeam d.o.o. · Slovenia · EU</span>
        <span>pentabeam.com</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Ribbon, Intro, Compare, Numbers, Modules, Moat, Compete, Pricing, Team, CTA, Footer });
