// Sections: Nav, Hero, Trust, Approach (Consultation + Build), About, FAQ, Contact, Footer
const { useState: useStateS, useMemo: useMemoS } = React;

/* ---------- NAV ---------- */
function CriusMark({ variant = 'dark' }) {
  const src = variant === 'light' ? 'assets/crius-mark-gold.png' : 'assets/crius-mark-ink.png';
  return <img src={src} alt="Crius" />;
}

function Nav({ tab, setTab }) {
  const tabs = [
  { id: 'home', label: 'Home' },
  { id: 'approach', label: 'How We Work' },
  { id: 'lifesciences', label: 'Life Sciences' },
  { id: 'trust', label: 'Trust & Values' },
  { id: 'about', label: 'About' },
  { id: 'contact', label: 'Contact' }];

  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#" onClick={(e) => {e.preventDefault();setTab('home');}} className="logo">
          <span className="logo-mark" aria-hidden="true"><CriusMark /></span>
          <span>Crius <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>AI</em></span>
        </a>
        <div className="nav-links">
          {tabs.map((t) =>
          <a key={t.id} href={`#${t.id}`} onClick={(e) => {e.preventDefault();setTab(t.id);}}
          style={{ color: tab === t.id ? 'var(--accent)' : undefined, fontWeight: tab === t.id ? 500 : 400 }}>
              {t.label}
            </a>
          )}
        </div>
        <div className="nav-cta">
          <a href="#" onClick={(e) => {e.preventDefault();setTab('contact');}} className="btn btn-primary" style={{ padding: '10px 16px' }}>Book a Consultation <IconArrow /></a>
        </div>
      </div>
    </nav>);

}

window.CriusMark = CriusMark;

/* ---------- HERO ---------- */
function Hero() {
  return (
    <section className="hero container">
      <div className="hero-head reveal">
        <span className="eyebrow">AI Consultancy &middot; Legal &amp; Life&nbsp;Sciences</span>
        <h1 style={{ marginTop: 0 }}>
          Consult first. Build<br />
          where it's warranted. <em>Built in Ireland.</em>
        </h1>
        <p className="hero-sub dropcap" style={{ textAlign: 'left', maxWidth: '52ch', margin: '4px auto 0' }}>Crius is an Irish AI consultancy. Every engagement starts with the Crius Consultation, free, and detailed opposite. Where a build is warranted, it's implemented properly and safely, with us alongside you throughout, and shaped around how the organisation already works. Two areas today: legal practices and life sciences.</p>
        <div className="hero-cta">
          <a href="#" onClick={(e) => {e.preventDefault();window.__setTab && window.__setTab('contact');}} className="btn btn-primary btn-lg">Book a Consultation <IconArrow /></a>
          <a href="#" onClick={(e) => {e.preventDefault();window.__setTab && window.__setTab('approach');}} className="btn btn-ghost btn-lg">See how we work</a>
        </div>
      </div>

      <div className="hero-stage reveal d1">
        <BrowserFrame url="crius.ie/consultation" angle>
          <div className="consult-panel">
            <div className="cp-row"><span className="cp-k">Session</span><span className="cp-v">In person or over Teams &middot; 30 minutes to an hour &middot; free</span></div>
            <div className="cp-row"><span className="cp-k">Covers</span><span className="cp-v">How matters move through the practice today</span></div>
            <div className="cp-row"><span className="cp-k">Covers</span><span className="cp-v">Where time and risk concentrate</span></div>
            <div className="cp-row"><span className="cp-k">Covers</span><span className="cp-v">Where AI can responsibly help, and where it can't</span></div>
            <div className="cp-row cp-row-outcome"><span className="cp-k">Outcome</span><span className="cp-v">A written recommendation, build or not</span></div>
          </div>
        </BrowserFrame>
      </div>

      <div className="hero-meta hero-meta-asym reveal">
        <div className="meta-item">
          <div className="k">THE CONSULTATION</div>
          <div className="v">Free, your choice of format</div>
          <div className="s">In person or over Teams, 30 minutes to an hour, a full profile of your practice</div>
        </div>
        <div className="meta-item" style={{ width: 472, height: 193 }}>
          <div className="k">THE BUILD</div>
          <div className="v">If it makes sense</div>
          <div className="s">scoped to your practice, engagement-based, four to six weeks depending on your team's pace</div>
        </div>
        <div className="meta-item">
          <div className="k">Based</div>
          <div className="v">Cork, Ireland</div>
          <div className="s">working directly with legal and life-sciences teams across Ireland</div>
        </div>
      </div>
    </section>);

}

/* ---------- TRUST / SOCIAL PROOF ---------- */
function LogoStrip() {
  return (
    <section className="section" id="customers">
      <div className="container">
        <div className="trust">
          <div className="trust-intro reveal" style={{ position: 'relative' }}>
            <div style={{ position: 'relative', paddingTop: 'clamp(64px, 8vw, 118px)' }}>
              <span className="ghost-num" aria-hidden="true" style={{ position: 'absolute', top: 0, left: '-0.03em', fontSize: 'clamp(70px, 11vw, 170px)', color: 'var(--ink)', opacity: 0.06, lineHeight: 0.78, zIndex: 0, pointerEvents: 'none' }}>01</span>
              <div style={{ position: 'relative', zIndex: 1 }}>
                <span className="eyebrow">Proof, not promises</span>
                <h2 style={{ marginTop: 18 }}>An honest first conversation, not a sales pitch.</h2>
              </div>
            </div>
            <p className="lede">Two external recognitions, both checkable.</p>
          </div>

          <div className="award-hero reveal">
            <div className="award-hero-mark"><img src="assets/award-nfte.png" alt="NFTE" /></div>
            <div className="award-hero-body">
              <span className="k">Won</span>
              <h3>Best Innovation Award, Foróige NFTE Youth Entrepreneur of the Year Finals 2026</h3>
              <p>Foróige's NFTE programme is Ireland's national youth entrepreneurship competition, run through schools nationwide. The 2026 final at Croke Park brought together 24 youth-led businesses selected from thousands of entrants; Crius AI won Best Innovation.</p>
            </div>
          </div>

          <div className="award-hero award-second reveal d1">
            <div className="award-hero-mark"><img src="assets/award-microsoft.png" alt="Microsoft" /></div>
            <div className="award-hero-body">
              <span className="k">Shortlisted</span>
              <h3>Student Enterprise Innovator of the Year, 2026</h3>
              <p>Run by Microsoft Ireland at their Dream Space hub in partnership with the Student Enterprise Programme, as part of Local Enterprise Week, recognising the strongest early-stage student ventures nationally. Crius AI was shortlisted.</p>
            </div>
          </div>

          <div className="trust-bottom-secondary reveal d1">
            <div className="verticals-card">
              <div className="k">Where the approach applies</div>
              <p style={{ margin: 0, fontFamily: 'var(--serif)', fontSize: 17, lineHeight: 1.7, color: 'var(--ink-2)', maxWidth: '58ch' }}>We work across practice areas, from litigation to regulatory to in-house teams. The approach adapts to the practice, not the other way round.</p>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- SECTION HEAD ---------- */
function SecHead({ num, eyebrow, title, lede }) {
  return (
    <div className="sec-head reveal">
      <div>
        <span className="num">{num} · {eyebrow}</span>
        <h2>{title}</h2>
      </div>
      <div>
        <p className="lede">{lede}</p>
      </div>
    </div>);

}

/* ---------- GHOST-NUMERAL HEAD: reserved for the one or two moments per page that should carry more visual weight ---------- */
function GhostHead({ num, eyebrow, title, lede, dark, dropcap }) {
  return (
    <div className={`ghost-head reveal${dark ? ' ghost-head-dark' : ''}`}>
      <span className="ghost-num" aria-hidden="true">{num}</span>
      <div className="ghost-head-inner">
        <span className="eyebrow">{eyebrow}</span>
        <h2 style={{ marginTop: 18 }}>{title}</h2>
        <p className={`lede${dropcap ? ' dropcap' : ''}`} style={{ marginTop: 18 }}>{lede}</p>
      </div>
    </div>);

}

/* ---------- DARK CTA CLOSING BLOCK ---------- */
function CTASection({
  title = 'Book a Consultation, or just say hello.',
  sub = "We'll respond within one business day. The Crius Consultation is free, in person or over Teams, and typically 30 minutes to an hour, on how your practice actually works.",
  label = 'Get started',
  cta = 'Book a Consultation' })
{
  return (
    <section className="cta-section">
      <div className="container">
        <div className="cta-block reveal">
          <span className="eyebrow">{label}</span>
          <h2>{title}</h2>
          <p>{sub}</p>
          <a href="#" onClick={(e) => {e.preventDefault();window.__setTab && window.__setTab('contact');}} className="btn btn-primary btn-lg">{cta} <IconArrow /></a>
        </div>
      </div>
    </section>);

}
window.CTASection = CTASection;

/* ---------- APPROACH: The Consultation + The Build, one journey ---------- */
function Approach() {
  const consultSteps = [
  { n: 'Step 01', t: 'Book', p: 'A short call to understand your practice and find a time that works, in person or over Teams, whichever suits your firm.' },
  { n: 'Step 02', t: 'The session', p: '30 minutes to an hour, free, with a senior member of our team and the people who do the work day to day.' },
  { n: 'Step 03', t: 'The profile', p: "We map how matters move through your practice: where time goes, where risk concentrates, where AI can responsibly help." },
  { n: 'Step 04', t: 'The recommendation', p: "A clear, written view: build, don't build, or wait. No pressure either way." }];

  const buildSteps = [
  { wk: 'Week 1', t: 'Discovery & design', p: 'We map the decisions, deliverables and language of your practice, then design the build around them. You meet a working prototype inside days.' },
  { wk: 'Weeks 2–3', t: 'Build & integrate', p: 'We wire it into Microsoft 365 and the systems you already run on, with persistent memory and your branding throughout.' },
  { wk: 'Week 4', t: 'Deploy', p: 'Your platform goes live in an environment your IT signs off. Your team is working in it, not waiting on a roadmap.' },
  { wk: 'Onward', t: 'Evolve', p: 'We tune, extend and add capability in step with the practice. The platform compounds in value every quarter.' }];

  return (
    <React.Fragment>
      <section className="section" id="approach">
        <div className="container">
          <GhostHead
            num="01"
            eyebrow="How we work"
            title="Consult first. Build if it makes sense."
            lede="Crius is a single engagement, not two separate products. Every relationship starts with the Crius Consultation. Only where it's warranted does that lead to a build." />
          

          <div className="marginalia" style={{ marginTop: 8, marginBottom: 32 }}>
            <div className="studio-head" style={{ marginBottom: 0 }}>
              <span className="eyebrow">The Crius Consultation</span>
              <h3 style={{ fontFamily: 'var(--serif)', fontSize: 28, marginTop: 14, maxWidth: '46ch' }}>One session. A full picture of how you work.</h3>
              <p className="lede" style={{ marginTop: 12, maxWidth: '58ch' }}>The Crius Consultation is a free session with a senior member of our team, typically 30 minutes to an hour, in person or over Teams, whichever suits your firm. We leave with a full profile of how your practice actually works, and you leave with an honest recommendation, whether or not that means building anything.</p>
            </div>
            <div className="marginalia-note">No pitch deck. No proposal until you ask for one. Just the session, and a straight answer afterward.</div>
          </div>

          <div className="steps">
            {consultSteps.map((s, i) =>
            <div key={i} className="step">
                <span className="n">{s.n}</span>
                <h4>{s.t}</h4>
                <p>{s.p}</p>
              </div>
            )}
          </div>

          <div className="section-cta">
            <a href="#" onClick={(e) => {e.preventDefault();window.__setTab && window.__setTab('contact');}} className="btn btn-primary">Book a Consultation <IconArrow /></a>
          </div>
        </div>
      </section>

      <section className="section build-section studio-section" id="build">
        <div className="studio-glow" aria-hidden="true"></div>
        <div className="container">
          <div className="studio-head reveal">
            <span className="eyebrow">§02 · If the Consultation recommends it</span>
            <h2 className="studio-title">
              Consult first.<br />
              Build only <em>where it's warranted.</em>
            </h2>
            <p className="lede">Where the Consultation points to a build, Crius designs, builds and deploys it around the practice you already have, scoped to how the firm works and integrated with the tools it runs on. What gets built varies by engagement; the approach doesn't. Typically four to six weeks from brief to deployment, depending on your team's pace.</p>
          </div>

          <div className="studio-band reveal d1">
            <div className="sb-item">
              <div className="sb-v">4 to 6 weeks</div>
              <div className="sb-k">Brief to deployed, depending on your team's pace</div>
            </div>
            <div className="sb-item">
              <div className="sb-v">Anthropic AI</div>
              <div className="sb-k">A frontier model, engineered</div>
            </div>
            <div className="sb-item">
              <div className="sb-v">100% yours</div>
              <div className="sb-k">Your data, your IP, your brand</div>
            </div>
          </div>

          <div className="studio-timeline reveal d1">
            <div className="st-head">
              <span className="st-eyebrow">The delivery</span>
              <h3>From a brief on Monday to a platform your team relies on.</h3>
            </div>
            <div className="st-rail">
              {buildSteps.map((s, i) =>
              <div className="st-step" key={i}>
                  <div className="st-node"><span></span></div>
                  <div className="st-wk">{s.wk}</div>
                  <div className="st-t">{s.t}</div>
                  <div className="st-p">{s.p}</div>
                </div>
              )}
            </div>
          </div>

          <div className="build-lead">
            <div className="build-k">01 Bespoke</div>
            <h4>Shaped around your practice, not the other way round.</h4>
            <p>Not a chatbot. Not a generic copilot. There's no fixed package here, and what gets built depends on how your practice actually works. What doesn't change is the approach: implemented properly and safely, with Crius guiding the process the whole way, shaped around the practice rather than the other way round.</p>
          </div>
          <div className="build-trio">
            <div className="build-pillar">
              <div className="build-k">02 Integrated</div>
              <h4>In the tools you already use.</h4>
              <p>Microsoft 365 native, with extensions to the systems your practice actually runs on. Persistent memory across conversations. Your data stays yours, deployed in environments your IT can sign off.</p>
            </div>
            <div className="build-pillar">
              <div className="build-k">03 Powered</div>
              <h4>Anthropic's strongest models, with engineering around it.</h4>
              <p>The underlying model is always one of Anthropic's leading models. The platform around it, agents, memory, integrations, branding, is built by Crius to make a frontier model usable inside a serious professional workflow.</p>
            </div>
            <div className="build-pillar">
              <div className="build-k">04 Evolving</div>
              <h4>Built to grow with your practice.</h4>
              <p>Engagement-based, not productised. We tune what's running, extend the integrations and add capability in step with how the practice changes.</p>
            </div>
          </div>

          <p className="pull-quote pull-quote-dark pull-quote-wide"><span className="pull-quote-mark"></span>The platform you have in year two is the one your practice has earned.</p>

          <div className="section-cta">
            <a href="#" onClick={(e) => {e.preventDefault();window.__setTab && window.__setTab('contact');}} className="btn btn-primary">Book a Consultation <IconArrow /></a>
          </div>
        </div>
      </section>
    </React.Fragment>);

}

/* ---------- FAQ ---------- */
function FAQ() {
  const [open, setOpen] = useStateS(0);
  const items = [
  {
    q: 'Is the Consultation really free?',
    a: 'Yes. The first session is free, in person or over Teams, whether or not it leads to a build.'
  },
  {
    q: 'What happens in the Consultation?',
    a: 'A senior member of our team spends 30 minutes to an hour with your practice, in person or over Teams, understanding how matters actually move through the firm. You get a full profile of how you work and a written recommendation.'
  },
  {
    q: 'Does the Consultation always lead to a build?',
    a: "No. Sometimes the answer is not yet, or not this. A build has to earn its place in the practice."
  },
  {
    q: 'How is client data and confidentiality handled?',
    a: 'Data is held in EU region data centres, encrypted in transit and at rest. We are GDPR compliant, and no client data is ever used to train models across engagements.'
  },
  {
    q: "Does the platform replace a lawyer's judgment?",
    a: 'No. Every workflow we build keeps a human sign-off step. Crius is built to support judgment, not replace it.'
  },
  {
    q: 'How long does a build take once agreed?',
    a: 'Typically 4 to 6 weeks from brief to a deployed platform, depending on how quickly we get what we need from your team, and scope varies by practice. Pricing is agreed after the Consultation, based on that scope. There is no cost to find out whether a build makes sense.'
  }];

  return (
    <section className="section-tight" style={{ background: 'var(--bg-sunk)' }}>
      <div className="container">
        <SecHead
          num="§03"
          eyebrow="Frequently asked"
          title="The questions firms ask us first."
          lede="If your question isn't here, our team answers within the business day. Most answers start with 'yes, here's how.'" />
        
        <div className="faq">
          {items.map((it, i) =>
          <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-plus"><IconPlus size={12} /></span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- TRUST & VALUES ---------- */
function TrustValues() {
  const dataPoints = [
  { k: 'Isolation', v: 'Isolated deployment per client. No shared environment, no cross-client exposure.' },
  { k: 'No training', v: 'Client data is never used to train underlying models.' },
  { k: 'Residency', v: 'EU-hosted infrastructure. Data residency maintained throughout.' },
  { k: 'Encryption', v: 'Encrypted in transit and at rest.' },
  { k: 'DPA', v: 'Full GDPR Data Processing Agreement executed prior to any deployment.' }];

  const values = [
  { t: 'No fabricated case studies.', p: 'Every claim on this site is traceable to something real.' },
  { t: 'No lock-in.', p: 'Terms are agreed per scope. If the work isn\u2019t delivering, nothing binds your firm to continue.' },
  { t: 'Understanding before proposing.', p: 'A proper consultation, understanding how the firm actually works, comes before any build is proposed. What gets built follows from that, never from a template.' }];

  return (
    <React.Fragment>
      <section className="section" id="trust-values">
        <div className="container">
          <GhostHead
            num="01"
            eyebrow="Data handling & security"
            title="Trust & Values."
            lede="This page exists for your IT and compliance function, not as decoration. Every line here is something Crius can stand behind today."
            dropcap />
          

          <div className="faq" style={{ marginTop: 8 }}>
            {dataPoints.map((d, i) =>
            <div key={i} className="faq-item open" style={{ padding: '24px 0' }}>
                <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 24, alignItems: 'baseline' }}>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--accent)' }}>{d.k}</span>
                  <p style={{ margin: 0, fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.6 }}>{d.v}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-sunk)' }}>
        <div className="container">
          <div style={{ position: 'relative', paddingTop: 'clamp(64px, 8vw, 118px)' }}>
            <span className="ghost-num" aria-hidden="true" style={{ position: 'absolute', top: 0, left: '-0.03em', fontSize: 'clamp(70px, 11vw, 170px)', color: 'var(--ink)', opacity: 0.06, lineHeight: 0.78, zIndex: 0, pointerEvents: 'none' }}>02</span>
            <div style={{ position: 'relative', zIndex: 1 }}>
              <SecHead
                num="§02"
                eyebrow="Why this works for you, not just for us"
                title="We only succeed if your engagement does."
                lede="There's no product being sold here, regardless of outcome, no fixed package, and no incentive to overbuild. The commercial structure is built so that Crius only benefits when your firm genuinely does." />
            </div>
          </div>
          

          <div className="tv-lead">
            <div className="build-k" style={{ color: 'var(--accent)', fontFamily: 'var(--serif)', fontSize: 14, fontVariant: 'small-caps', letterSpacing: '0.03em' }}>02 &middot; Scoped and agreed upfront</div>
            <h4 style={{ fontFamily: 'var(--serif)' }}>No vague retainer, no surprise invoices.</h4>
            <p style={{ color: 'var(--ink-3)', fontFamily: 'var(--sans)' }}>Where the Consultation points to a build, we scope it properly and agree terms before any work begins.</p>
          </div>
          <div className="tv-trio">
            {[
            { k: '01', t: 'A free Consultation, always first.', p: 'Before anything is proposed, we spend time understanding the practice. That session is free, regardless of outcome.' },
            { k: '03', t: 'Built to the agreed brief.', p: 'Delivery against what was actually agreed, not a suite of extras we\u2019re incentivised to pad in.' },
            { k: '04', t: 'Ongoing advisory, not a handoff.', p: 'The relationship continues after go-live. We\u2019re not paid to disappear after a launch.' }].
            map((s, i) =>
            <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', color: 'var(--accent)' }}>{s.k}</span>
                <h4 style={{ margin: 0, fontFamily: 'var(--serif)', fontSize: 19, lineHeight: 1.3 }}>{s.t}</h4>
                <p style={{ margin: 0, fontSize: 14, fontFamily: 'var(--sans)', color: 'var(--ink-3)', lineHeight: 1.6 }}>{s.p}</p>
              </div>
            )}
          </div>

          <p className="pull-quote"><span className="pull-quote-mark"></span>An honest "you don't need us" costs us a sale. We say it anyway, because the incentive isn't to sell, it's to be right.</p>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <SecHead
            num="§03"
            eyebrow="Certification roadmap"
            title="Where we are, stated plainly."
            lede="ISO 27001: not yet certified. The route to certification is already underway, with the full stack roughly twelve months out." />
          

          <div className="marginalia">
            <div style={{ borderTop: '1px solid var(--rule)', paddingTop: 32, display: 'flex', flexDirection: 'column', gap: 22 }}>
              <p style={{ margin: 0, fontSize: 16, lineHeight: 1.7, color: 'var(--ink-2)', maxWidth: '48ch' }}>
                <strong style={{ color: 'var(--ink)' }}>ISO 27001</strong> is the route we're taking to demonstrate NIS2 compliance.
              </p>
              <p style={{ margin: 0, fontSize: 16, lineHeight: 1.7, color: 'var(--ink-2)', maxWidth: '48ch' }}>
                The full certification stack, including the audit around it, is roughly a twelve-month build, already in motion.
              </p>
            </div>
            <div className="marginalia-note" style={{ paddingTop: 32 }}>Isolated deployment, no training on client data, encryption in transit and at rest, and EU hosting throughout &mdash; already true today, regardless of certification status.</div>
          </div>
        </div>
      </section>

      <section className="section-tight" style={{ background: 'var(--bg-sunk)' }}>
        <div className="container">
          <SecHead
            num="§04"
            eyebrow="How we work"
            title="Values drawn from practice, not a poster."
            lede="Each of these is how we already operate." />
          

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 0, borderTop: '1px solid var(--rule)', borderLeft: '1px solid var(--rule)' }}>
            {values.map((v, i) =>
            <div key={i} style={{ borderRight: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', padding: 28, display: 'flex', flexDirection: 'column', gap: 12 }}>
                <h4 style={{ margin: 0, fontFamily: 'var(--serif)', fontSize: 21, lineHeight: 1.3 }}>{v.t}</h4>
                <p style={{ margin: 0, fontSize: 14, fontFamily: 'var(--sans)', color: 'var(--ink-3)', lineHeight: 1.6 }}>{v.p}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <SecHead
            num="§05"
            eyebrow="Engagement terms"
            title="How the commercial side actually works."
            lede="High-level, and meant to be reassuring. The detail lives in the engagement agreement, not on this page." />
          

          <div style={{ borderTop: '1px solid var(--rule)', paddingTop: 32 }}>
            <p style={{ margin: 0, fontSize: 17, fontFamily: 'var(--serif)', lineHeight: 1.75, color: 'var(--ink-2)', maxWidth: '68ch' }}>
              Where the Consultation points to a build, we scope it properly and agree terms before any work begins. Pricing reflects the scope of your practice, not a fixed package.
            </p>
          </div>

          <div className="section-cta">
            <a href="#" onClick={(e) => {e.preventDefault();window.__setTab && window.__setTab('contact');}} className="btn btn-primary">Book a Consultation <IconArrow /></a>
          </div>
        </div>
      </section>
    </React.Fragment>);

}

/* ---------- ATMOSPHERIC PHOTOGRAPHY (sparing) ---------- */
function PhotoBand({ id, caption, tight }) {
  return (
    <div className={`photo-band ${tight ? 'photo-band-tight' : ''}`}>
      <image-slot id={id} shape="rect" fit="cover" placeholder="Drop a photograph of Cork here"></image-slot>
      <span className="photo-caption">{caption}</span>
    </div>);

}

/* ---------- ABOUT ---------- */
function About() {
  return (
    <section className="section" id="about">
      <div className="container">
        <GhostHead
          num="01"
          eyebrow="About Crius"
          title="An Irish AI consultancy. Consult first, build where it&rsquo;s warranted."
          lede="Crius is based in Cork. Every engagement starts with the Crius Consultation, and what gets built is shaped around how the organisation already works, with us alongside the team throughout. Two areas today: legal practices and life sciences." />
        

        <div className="section-cta">
          <a href="#" onClick={(e) => {e.preventDefault();window.__setTab && window.__setTab('contact');}} className="btn btn-primary">Book a Consultation <IconArrow /></a>
        </div>
      </div>

      <PhotoBand id="photo-cork-about" tight caption="Cork, Ireland — home of Crius" />
    </section>);

}

/* ---------- CONSULTATION REQUEST FORM ---------- */
function DemoForm() {
  const [sent, setSent] = useStateS(false);
  const [sending, setSending] = useStateS(false);
  const [error, setError] = useStateS('');
  const [form, setForm] = useStateS({
    name: '', role: '', email: '', phone: '', company: '',
    solicitors: '', practiceAreas: [], tools: '', format: 'In person',
    availability: '', message: ''
  });

  const practiceAreaOptions = ['Commercial litigation', 'Corporate & M&A', 'Private client', 'Regulatory & compliance', 'In-house legal teams'];

  const togglePracticeArea = (pa) => {
    setForm((f) => ({
      ...f,
      practiceAreas: f.practiceAreas.includes(pa) ? f.practiceAreas.filter((x) => x !== pa) : [...f.practiceAreas, pa]
    }));
  };

  // Forminit form — submissions land in the Forminit inbox tied to roryoleary@crius.ie.
  const FORM_ID = 'sq4wha3h235';

  const submit = async (e) => {
    e.preventDefault();
    if (sending) return;
    setError('');
    setSending(true);
    try {
      if (typeof window.Forminit === 'undefined') {
        throw new Error("Forminit SDK didn't load. Check your connection and try again.");
      }
      const forminit = new window.Forminit();
      const fd = new FormData();
      fd.append('fi-sender-fullName', form.name);
      fd.append('fi-sender-email', form.email);
      fd.append('fi-sender-company', form.company);
      fd.append('fi-text-role', form.role);
      fd.append('fi-text-phone', form.phone);
      fd.append('fi-text-solicitors', form.solicitors);
      fd.append('fi-text-practiceAreas', form.practiceAreas.join(', '));
      fd.append('fi-text-tools', form.tools);
      fd.append('fi-text-format', form.format);
      fd.append('fi-text-availability', form.availability);
      fd.append('fi-text-message', form.message);

      const { error: submitError } = await forminit.submit(FORM_ID, fd);
      if (submitError) {
        throw new Error(submitError.message || 'Submission failed');
      }
      setSent(true);
    } catch (err) {
      setError(err && err.message ? err.message : "Sorry — we couldn't send that. Please email contactus@crius.ie or try again.");
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="section" id="demo">
      <div className="container">
        <div className="demo demo-asym">
          <div className="demo-copy">
            <span className="eyebrow">Book a Consultation</span>
            <h2 style={{ marginTop: 20 }}>Tell us about your firm.</h2>
            <p className="lede dropcap" style={{ marginTop: 18 }}>
              A senior member of our team will get in touch within one business day to arrange a time. The Crius Consultation is free, in person or over Teams, and typically 30 minutes to an hour.
            </p>

            <div className="contact-card">
              <div className="contact-row">
                <div className="contact-k">Email</div>
                <div className="contact-v">
                  <a href="mailto:contactus@crius.ie">contactus@crius.ie</a>
                  <div className="contact-sub">general enquiries, consultations and partnerships</div>
                </div>
              </div>
              <div className="contact-row">
                <div className="contact-k">Based</div>
                <div className="contact-v">
                  <div>Cork, Ireland</div>
                  <div className="contact-sub">working with legal and life-sciences teams across Ireland</div>
                </div>
              </div>
            </div>
          </div>

          {!sent ?
          <form className="demo-form" onSubmit={submit}>
              <div className="form-row">
                <div className="form-field">
                  <label>Firm name</label>
                  <input required value={form.company} onChange={(e) => setForm({ ...form, company: e.target.value })} placeholder="Your firm" />
                </div>
                <div className="form-field">
                  <label>Solicitors at the firm</label>
                  <select required value={form.solicitors} onChange={(e) => setForm({ ...form, solicitors: e.target.value })}>
                    <option value="">Select</option>
                    <option>1–5</option>
                    <option>6–15</option>
                    <option>16–50</option>
                    <option>50+</option>
                  </select>
                </div>
              </div>
              <div className="form-row">
                <div className="form-field">
                  <label>Your name</label>
                  <input required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Full name" />
                </div>
                <div className="form-field">
                  <label>Your role</label>
                  <input required value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })} placeholder="e.g. Managing Partner" />
                </div>
              </div>
              <div className="form-row">
                <div className="form-field">
                  <label>Work email</label>
                  <input required type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="you@yourfirm.ie" />
                </div>
                <div className="form-field">
                  <label>Phone number</label>
                  <input type="tel" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} placeholder="Optional" />
                </div>
              </div>

              <div className="form-row-full">
                <div className="form-field">
                  <label>Main practice areas</label>
                  <div className="pa-pills">
                    {practiceAreaOptions.map((pa) =>
                    <button type="button" key={pa} className={`pa-pill ${form.practiceAreas.includes(pa) ? 'selected' : ''}`} onClick={() => togglePracticeArea(pa)}>
                        {pa}
                      </button>
                    )}
                  </div>
                </div>
              </div>

              <div className="form-row-full">
                <div className="form-field">
                  <label>Current tools in use</label>
                  <input value={form.tools} onChange={(e) => setForm({ ...form, tools: e.target.value })} placeholder="e.g. Keyhouse, Vincent AI" />
                </div>
              </div>

              <div className="form-row">
                <div className="form-field">
                  <label>Preferred format</label>
                  <div className="fmt-toggle">
                    <button type="button" className={form.format === 'In person' ? 'active' : ''} onClick={() => setForm({ ...form, format: 'In person' })}>In person</button>
                    <button type="button" className={form.format === 'Zoom' ? 'active' : ''} onClick={() => setForm({ ...form, format: 'Zoom' })}>Zoom</button>
                  </div>
                </div>
                <div className="form-field">
                  <label>Preferred contact time</label>
                  <select value={form.availability} onChange={(e) => setForm({ ...form, availability: e.target.value })}>
                    <option value="">No preference</option>
                    <option>Mornings</option>
                    <option>Afternoons</option>
                    <option>This week</option>
                    <option>Next week</option>
                  </select>
                </div>
              </div>

              <div className="form-row-full">
                <div className="form-field">
                  <label>Anything else (optional)</label>
                  <textarea value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} placeholder="A few lines on what you'd like to discuss." rows="3"></textarea>
                </div>
              </div>

              <button type="submit" className="btn btn-primary form-submit" disabled={sending}>
                {sending ? 'Sending…' : <React.Fragment>Request a Consultation <IconArrow /></React.Fragment>}
              </button>
              {error ? <div className="form-note" style={{ color: '#b54545' }}>{error}</div> : <div className="form-note">We'll respond within one business day. The Consultation is free and typically 30 minutes to an hour.</div>}
            </form> :

          <div className="demo-form">
              <div className="form-success">
                <div style={{ width: 40, height: 40, border: '1px solid var(--accent)', display: 'grid', placeItems: 'center', margin: '0 0 20px', color: 'var(--accent)' }}>
                  <IconCheck />
                </div>
                <h4>Request received.</h4>
                <p>Thanks {form.name ? form.name.split(' ')[0] : ''}, we'll be in touch within one business day to arrange a time.</p>
              </div>
            </div>
          }
        </div>
      </div>
    </section>);

}

/* ---------- FOOTER ---------- */
function Footer({ setTab }) {
  const go = (e, tab) => {
    e.preventDefault();
    if (setTab) setTab(tab);
  };
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <a href="#" onClick={(e) => go(e, 'home')} className="logo">
              <span className="logo-mark" aria-hidden="true"><CriusMark variant="light" /></span>
              <span>Crius <em style={{ color: 'rgba(246,237,224,0.55)' }}>AI</em></span>
            </a>
            <p>AI consultancy built in Cork, working with legal practices and life-sciences teams across Ireland.</p>
          </div>
          <div>
            <h5>SERVICES</h5>
            <ul>
              <li><a href="#" onClick={(e) => go(e, 'approach')}>The Consultation</a></li>
              <li><a href="#" onClick={(e) => go(e, 'approach')}>The Build</a></li>
              <li><a href="#" onClick={(e) => go(e, 'lifesciences')}>Life Sciences &amp; Pharma</a></li>
              <li><a href="#" onClick={(e) => go(e, 'contact')}>Book a Consultation</a></li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="#" onClick={(e) => go(e, 'about')}>About</a></li>
              <li><a href="#" onClick={(e) => go(e, 'trust')}>Trust & Values</a></li>
              <li><a href="#" onClick={(e) => go(e, 'contact')}>Contact</a></li>
            </ul>
          </div>
          <div>
            <h5>Get in touch</h5>
            <ul>
              <li><a href="mailto:contactus@crius.ie">contactus@crius.ie</a></li>
              <li>Cork, Ireland</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Crius AI Ltd · Registered in Ireland</span>
          <span><a href="mailto:contactus@crius.ie" style={{ color: 'inherit' }}>contactus@crius.ie</a></span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Nav, Hero, LogoStrip, Approach, TrustValues, FAQ, About, DemoForm, Footer, PhotoBand });