/* global React */
/* Adim landing page — for business owners, lawyers, and operations leads.
   Plain language. No light backgrounds. Privacy is featured. */

function LandingBoard() {
  return (
    <div className="adim-page" style={{ background: 'var(--obsidian)' }}>
      <Nav current="products" />
      <LandingHero />
      <OutcomesGrid />
      <ServicesGrid />
      <MethodSection />
      <ProductsSection />
      <PrivacyFeature />
      <ClosingCTA />
      <Footer />
    </div>
  );
}

/* ============================================================
   HERO — plain language, business framing
   ============================================================ */

function LandingHero() {
  return (
    <section style={{
      position: 'relative',
      padding: '120px 40px 96px',
      overflow: 'hidden',
      borderBottom: '1px solid var(--hairline)',
    }}>
      <GridBackground kind="dot" opacity={0.18} />

      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 64, flexWrap: 'wrap' }}>
          <RegMark />
          <span className="ad-micro" style={{ color: 'var(--text-mute)' }}>
            AI studio &middot; Vilnius, LT
          </span>
          <div style={{ flex: 1, height: 1, background: 'var(--hairline)', marginLeft: 8, minWidth: 40 }} />
          <span className="ad-micro ad-nav-meta" style={{ color: 'var(--text-mute)' }}>
            Open for new engagements
          </span>
        </div>

        <h1 className="ad-display-xl" style={{ marginBottom: 32, maxWidth: 1080, fontWeight: 500 }}>
          Bring <span style={{ color: 'var(--accent)' }}>AI into your business</span><br />
          without the chaos.
        </h1>

        <div className="ad-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'end', marginBottom: 72 }}>
          <p className="ad-body-lg" style={{ maxWidth: 560, color: 'var(--text)' }}>
            We are a small studio that builds AI tools for serious teams —
            law firms, finance, healthcare, regulated industries. We come in, we listen,
            we build, and we leave you with software that quietly does its job.
          </p>
          <div className="ad-btn-group" style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <button className="ad-btn ad-btn-lg ad-btn-accent">Book a 30-min call</button>
            <button className="ad-btn ad-btn-lg ad-btn-secondary">
              See what we build <Icon name="arrow-down" size={16} />
            </button>
          </div>
        </div>

        <HeroOutcomeStrip />
      </div>
    </section>
  );
}

function HeroOutcomeStrip() {
  // Honest, qualitative descriptors of what our work is like.
  // No fabricated metrics.
  const cells = [
    { label: 'Quiet',   desc: 'Does its job in the background' },
    { label: 'Cited',   desc: 'Every claim is sourced' },
    { label: 'Audited', desc: 'Every action is logged & reversible' },
    { label: 'Yours',   desc: 'Code & data stay with you' },
  ];
  return (
    <div className="ad-stack-2" style={{
      border: '1px solid var(--hairline)',
      background: 'rgba(20, 23, 28, 0.5)',
      backdropFilter: 'blur(8px)',
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
    }}>
      {cells.map((c, i) => (
        <div key={i} style={{
          padding: '28px 32px',
          borderRight: i < 3 ? '1px solid var(--hairline)' : 'none',
        }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 500,
            fontSize: 32, lineHeight: 1, letterSpacing: '-0.02em',
            color: 'var(--text-bright)', marginBottom: 10,
          }}>{c.label}</div>
          <div className="ad-body-sm" style={{ color: 'var(--text-mute)' }}>{c.desc}</div>
        </div>
      ))}
    </div>
  );
}

/* ============================================================
   TRUST STRIP
   ============================================================ */

function TrustStrip() {
  const clients = ['LIETUVOS BANKAS', 'TELE2', 'OMNITEL', 'IGNITIS', 'PAYSERA', 'VINTED'];
  return (
    <section style={{
      borderBottom: '1px solid var(--hairline)',
      padding: '32px 40px',
      background: 'var(--obsidian-rich)',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32,
      }}>
        <span className="ad-micro" style={{ color: 'var(--text-dim)', whiteSpace: 'nowrap' }}>
          TRUSTED BY TEAMS AT —
        </span>
        <div style={{ display: 'flex', gap: 48, flex: 1, justifyContent: 'space-around' }}>
          {clients.map(c => (
            <span key={c} style={{
              fontFamily: 'var(--font-mono)',
              fontSize: 12,
              letterSpacing: '0.18em',
              color: 'var(--text-mute)',
              fontWeight: 500,
            }}>{c}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   OUTCOMES — what AI actually does for your business
   Plain-language framing, no tech jargon
   ============================================================ */

function OutcomesGrid() {
  const rows = [
    {
      n: '01',
      who: 'Law firms',
      pain: 'Junior associates spend hours searching for the right precedent.',
      fix: 'An AI assistant inside Word and Outlook that finds the relevant law, drafts the citation, and pulls past matters — in seconds.',
    },
    {
      n: '02',
      who: 'Finance teams',
      pain: 'Month-end close is buried under spreadsheets and reconciliation.',
      fix: 'An agent that reads your invoices, matches them to bank lines, drafts the journal entries, and waits for you to approve.',
    },
    {
      n: '03',
      who: 'Operations',
      pain: 'The same 40 emails get answered the same way every week.',
      fix: 'A quiet assistant that drafts replies in your inbox, learns your tone, and only asks for help when something is unusual.',
    },
    {
      n: '04',
      who: 'Compliance',
      pain: 'Audit prep eats two weeks of senior people\'s time.',
      fix: 'Always-on systems that log every action, flag drift, and assemble the evidence the auditor will ask for.',
    },
  ];

  return (
    <section style={{ padding: '120px 40px', borderBottom: '1px solid var(--hairline)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div className="ad-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, marginBottom: 72, alignItems: 'end' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
              <RegMark />
              <span className="ad-label">§ 01 · What we actually build</span>
            </div>
            <h2 className="ad-display-l">
              Quiet AI that does the boring work.
            </h2>
          </div>
          <p className="ad-body-lg" style={{ color: 'var(--text-mute)', maxWidth: 460 }}>
            We do not sell you a platform or a chatbot. We sit with your team,
            find where the hours are going, and build something specific that takes those
            hours back. Here is the kind of thing we have built.
          </p>
        </div>

        <div style={{ border: '1px solid var(--hairline)' }}>
          {rows.map((r, i) => (
            <div key={r.n} className="ad-stack" style={{
              display: 'grid', gridTemplateColumns: '80px 200px 1fr 1.2fr',
              gap: 48, padding: '40px 40px',
              borderTop: i > 0 ? '1px solid var(--hairline)' : 'none',
              alignItems: 'start',
            }}>
              <div className="ad-num" style={{ fontSize: 13, color: 'var(--accent)' }}>{r.n}</div>
              <div className="ad-h3" style={{ color: 'var(--text-bright)' }}>{r.who}</div>
              <div>
                <div className="ad-micro" style={{ color: 'var(--text-dim)', marginBottom: 8 }}>THE PAIN</div>
                <p style={{ color: 'var(--text)', fontSize: 15, lineHeight: 1.55 }}>{r.pain}</p>
              </div>
              <div>
                <div className="ad-micro" style={{ color: 'var(--accent)', marginBottom: 8 }}>WHAT WE BUILD</div>
                <p style={{ color: 'var(--text-bright)', fontSize: 15, lineHeight: 1.55 }}>{r.fix}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   SERVICES — broad capability cards, plain language
   ============================================================ */

function ServicesGrid() {
  const services = [
    {
      n: '01', tag: 'AI ASSISTANTS',
      title: 'AI that knows your business',
      body: 'A custom assistant trained on your files, contracts, past work, and house style. Lives inside the tools your team already uses — Word, Outlook, your CRM. Never the public internet.',
      icon: 'sparkles',
    },
    {
      n: '02', tag: 'AUTOMATION',
      title: 'Automate the repetitive work',
      body: 'The 40 emails that come every week. The contract reviews that follow the same pattern. The reports nobody enjoys writing. We build agents that handle them — and ask for help when something is genuinely unusual.',
      icon: 'workflow',
    },
    {
      n: '03', tag: 'INTERNAL TOOLS',
      title: 'Tools your team will actually use',
      body: 'Small, focused tools that fit how your business actually works. Not another dashboard nobody opens. We design them with your team, ship them in weeks, and improve them as you go.',
      icon: 'wrench',
    },
    {
      n: '04', tag: 'PRIVATE DEPLOYMENT',
      title: 'On your servers, on your terms',
      body: 'For firms whose data cannot live in a public cloud. We deploy your AI on your hardware, your network, your country. Fully offline if you need. Audited. Reversible. Yours.',
      icon: 'shield-check',
    },
  ];

  return (
    <section style={{ padding: '120px 40px', borderBottom: '1px solid var(--hairline)', background: 'var(--obsidian-rich)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div className="ad-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, marginBottom: 80, alignItems: 'end' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
              <RegMark />
              <span className="ad-label">§ 02 · How we help</span>
            </div>
            <h2 className="ad-display-l">
              Four ways<br />we work with you.
            </h2>
          </div>
          <p className="ad-body-lg" style={{ color: 'var(--text-mute)', maxWidth: 460 }}>
            Engagements run four to twelve weeks. We scope tightly, ship working software,
            and either hand it over to your team — or stay on as your AI partner.
          </p>
        </div>

        <div className="ad-stack-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'var(--hairline-strong)', border: '1px solid var(--hairline-strong)' }}>
          {services.map(s => <ServiceCard key={s.n} {...s} />)}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ n, tag, title, body, icon }) {
  return (
    <div style={{
      background: 'var(--obsidian-rich)',
      padding: '48px 40px',
      position: 'relative',
      transition: 'background 240ms ease',
    }}
      onMouseEnter={e => e.currentTarget.style.background = 'var(--carbon)'}
      onMouseLeave={e => e.currentTarget.style.background = 'var(--obsidian-rich)'}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 32 }}>
        <div>
          <div className="ad-micro" style={{ color: 'var(--accent)', marginBottom: 4 }}>{n}</div>
          <div className="ad-micro" style={{ color: 'var(--text-dim)' }}>{tag}</div>
        </div>
        <div style={{
          width: 44, height: 44,
          border: '1px solid var(--hairline-strong)',
          borderRadius: 2,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--text-bright)',
        }}>
          <Icon name={icon} size={20} />
        </div>
      </div>

      <h3 style={{
        fontFamily: 'var(--font-display)', fontWeight: 500,
        fontSize: 30, lineHeight: 1.15, letterSpacing: '-0.02em',
        color: 'var(--text-bright)', marginBottom: 16,
      }}>{title}</h3>

      <p className="ad-body" style={{ marginBottom: 32, color: 'var(--text)' }}>{body}</p>

      <a href="#" style={{
        color: 'var(--text-bright)', borderBottom: '1px solid var(--hairline-strong)',
        paddingBottom: 4, fontSize: 14, fontWeight: 500,
        display: 'inline-flex', alignItems: 'center', gap: 8,
      }}>
        Read more <Icon name="arrow-up-right" size={14} />
      </a>
    </div>
  );
}

/* ============================================================
   METHOD — four phases, business framing, on DARK
   ============================================================ */

function MethodSection() {
  const steps = [
    {
      n: '01', label: 'We listen',
      body: 'Two weeks. We sit with your team, watch how the work actually happens, and write a plan in plain language. If we are not the right fit, you keep the plan.',
    },
    {
      n: '02', label: 'We build',
      body: 'Two to four weeks. A working version using real examples from your business. You see it, your team uses it, you tell us where it is wrong.',
    },
    {
      n: '03', label: 'We deploy',
      body: 'On your servers if you want, on ours if you do not. With documentation written for humans, and a runbook your IT team will understand.',
    },
    {
      n: '04', label: 'We stay close',
      body: 'Optional, but most clients pick this. We keep the system honest — fixing things as they break, adding what is missing, training your team.',
    },
  ];

  return (
    <section style={{ padding: '120px 40px', borderBottom: '1px solid var(--hairline)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 32 }}>
          <RegMark />
          <span className="ad-label">§ 03 · How an engagement runs</span>
        </div>

        <h2 className="ad-display-l" style={{ maxWidth: 880, marginBottom: 72 }}>
          Built like infrastructure.<br />
          Delivered like a piece of writing.
        </h2>

        <div className="ad-stack-2" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 0, borderTop: '1px solid var(--hairline-strong)',
          borderBottom: '1px solid var(--hairline-strong)',
        }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              padding: '48px 28px 56px',
              paddingLeft: i === 0 ? 0 : 28,
              borderRight: i < 3 ? '1px solid var(--hairline)' : 'none',
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 24 }}>
                <span className="ad-num" style={{ color: 'var(--accent)', fontSize: 13 }}>{s.n}</span>
                <span style={{ flex: 1, height: 1, background: 'var(--hairline-strong)', marginTop: 12 }} />
              </div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 500,
                fontSize: 32, lineHeight: 1.05, letterSpacing: '-0.02em',
                color: 'var(--text-bright)', marginBottom: 20,
              }}>{s.label}</h3>
              <p style={{ color: 'var(--text)', fontSize: 14, lineHeight: 1.6 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   PRODUCTS — Adim's product family. Lex featured. Click → lex.adim.ai.
   ============================================================ */

function ProductsSection() {
  return (
    <section style={{
      padding: '120px 40px',
      borderBottom: '1px solid var(--hairline)',
      background: 'var(--obsidian-rich)',
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div className="ad-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, marginBottom: 56, alignItems: 'end' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
              <RegMark />
              <span className="ad-label">§ 04 · Products</span>
            </div>
            <h2 className="ad-display-l">
              Built once. Refined.<br />
              Now yours to buy.
            </h2>
          </div>
          <p className="ad-body-lg" style={{ color: 'var(--text-mute)', maxWidth: 460 }}>
            Some of the systems we build are general enough to sell as products.
            They are finished, supported, and used in production by paying firms today —
            with new ones in the pipeline.
          </p>
        </div>

        {/* Featured product — Adim Lex */}
        <LexProductCard />

        {/* Coming soon grid */}
        <div className="ad-stack" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 24 }}>
          <ComingSoonCard
            name="Adim Fiscalis"
            tag="FINANCE · FOR ACCOUNTANTS"
            body="Month-end close on autopilot. Reads invoices, matches them to bank lines, drafts journal entries — waits for you to approve."
            eta="Q4 2026"
          />
          <ComingSoonCard
            name="Adim Curatio"
            tag="HEALTHCARE · FOR CLINICS"
            body="A private medical assistant for Baltic clinics. Drafts patient notes, codes diagnoses, prepares insurance claims — fully offline."
            eta="2027"
          />
          <ComingSoonCard
            name="Adim Custos"
            tag="COMPLIANCE · FOR REGULATED FIRMS"
            body="Always-on audit prep. Watches your systems, flags drift, and assembles the evidence the auditor will ask for next quarter."
            eta="2027"
          />
        </div>
      </div>
    </section>
  );
}

function LexProductCard() {
  return (
    <a
      href="https://lex.adim.ai"
      target="_blank"
      rel="noopener noreferrer"
      style={{
        display: 'block',
        textDecoration: 'none',
        color: 'inherit',
        borderBottom: 'none',
        border: '1px solid var(--hairline-strong)',
        background: 'var(--carbon)',
        position: 'relative',
        transition: 'border-color 200ms ease, background 200ms ease',
        cursor: 'pointer',
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.borderColor = 'var(--accent)';
        const arrow = e.currentTarget.querySelector('[data-arrow]');
        if (arrow) arrow.style.transform = 'translate(4px, -4px)';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.borderColor = 'var(--hairline-strong)';
        const arrow = e.currentTarget.querySelector('[data-arrow]');
        if (arrow) arrow.style.transform = 'translate(0, 0)';
      }}
    >
      {/* Top label bar */}
      <div style={{
        padding: '14px 24px',
        borderBottom: '1px solid var(--hairline)',
        display: 'flex', alignItems: 'center', gap: 12,
        background: 'var(--obsidian)',
      }}>
        <span className="ad-tag ad-tag-accent" style={{ height: 22 }}>FLAGSHIP &middot; SHIPPING</span>
        <span style={{ flex: 1 }} />
        <span className="ad-mono" style={{ color: 'var(--text-mute)', fontSize: 12 }}>
          lex.adim.ai
        </span>
        <span data-arrow style={{
          color: 'var(--accent)', display: 'inline-flex', transition: 'transform 200ms ease',
        }}>
          <Icon name="arrow-up-right" size={16} />
        </span>
      </div>

      <div className="ad-stack" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, padding: '48px 48px', alignItems: 'start' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24 }}>
            <div style={{
              width: 56, height: 56,
              background: 'var(--obsidian)',
              border: '1px solid var(--hairline-strong)',
              borderRadius: 4,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <img src="assets/logo-mark.png" alt=""
                width={40} height={40}
                style={{ filter: 'brightness(0) invert(1)', display: 'block' }} />
            </div>
            <div>
              <div className="ad-micro" style={{ color: 'var(--accent)', marginBottom: 4 }}>FLAGSHIP PRODUCT · 01</div>
              <div style={{
                fontFamily: 'var(--font-display)', fontWeight: 500,
                fontSize: 36, lineHeight: 1, letterSpacing: '-0.02em',
                color: 'var(--text-bright)',
              }}>Adim Lex</div>
            </div>
          </div>

          <h3 style={{
            fontFamily: 'var(--font-display)', fontWeight: 500,
            fontSize: 24, lineHeight: 1.2, letterSpacing: '-0.015em',
            color: 'var(--text-bright)', marginBottom: 16,
          }}>
            An AI assistant for Lithuanian lawyers.
          </h3>

          <p className="ad-body" style={{ color: 'var(--text)', marginBottom: 32, maxWidth: 460 }}>
            Sits inside Word and Outlook. Ask a question in plain Lithuanian — it finds
            the relevant statute, pulls the case law, drafts the citation in your firm's
            style. Used by Lithuanian lawyers every day.
          </p>

          {/* Feature pills — product characteristics, not metrics */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 32 }}>
            {['Cited', 'Versioned', 'Current', 'On-prem option', 'Word & Outlook'].map(f => (
              <span key={f} className="ad-tag">{f}</span>
            ))}
          </div>

          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '12px 18px',
            background: 'var(--accent)', color: 'var(--accent-ink)',
            fontWeight: 500, fontSize: 14,
            borderRadius: 4,
          }}>
            Visit lex.adim.ai
            <Icon name="arrow-up-right" size={16} />
          </div>
        </div>

        {/* Word doc mock */}
        <div style={{
          border: '1px solid var(--hairline)',
          background: 'var(--obsidian)',
          overflow: 'hidden',
          position: 'relative',
        }}>
          <CornerBrackets inset={8} color="var(--accent)" size={10} />

          <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--hairline)', display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 7, height: 7, borderRadius: 99, background: 'var(--accent)' }} />
            <span className="ad-mono" style={{ color: 'var(--text-mute)', fontSize: 11 }}>Lex · in your sidebar</span>
            <span style={{ flex: 1 }} />
            <span className="ad-micro" style={{ color: 'var(--success)' }}>● READY</span>
          </div>

          <div style={{ padding: '24px 22px' }}>
            <div className="ad-micro" style={{ color: 'var(--text-dim)', marginBottom: 8 }}>YOU ASKED</div>
            <div style={{ color: 'var(--text-bright)', fontSize: 13, marginBottom: 20, lineHeight: 1.55 }}>
              "Klientas teigia, kad sutartis negalioja dėl sąžiningumo trūkumo."
            </div>

            <div className="ad-micro" style={{ color: 'var(--accent)', marginBottom: 8 }}>LEX FOUND</div>
            {[
              { cite: 'CK 6.158 str.',  title: 'Sąžiningumo principas',           tag: 'STATUTE' },
              { cite: 'CK 6.193 str.',  title: 'Sutarties aiškinimo taisyklės',   tag: 'STATUTE' },
              { cite: 'LAT 3K-3-291',   title: 'Kasacinio teismo nutartis 2024',  tag: 'CASE'    },
            ].map(r => (
              <div key={r.cite} style={{
                padding: '12px 0', borderTop: '1px solid var(--hairline)',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8, marginBottom: 3 }}>
                  <span className="ad-mono" style={{ color: 'var(--accent)', fontSize: 11 }}>{r.cite}</span>
                  <span className="ad-micro" style={{ color: 'var(--text-dim)' }}>{r.tag}</span>
                </div>
                <div style={{ color: 'var(--text-bright)', fontSize: 12 }}>{r.title}</div>
              </div>
            ))}

            <div style={{ marginTop: 16, padding: '10px 12px', background: 'var(--accent-soft)', borderLeft: '2px solid var(--accent)' }}>
              <div className="ad-micro" style={{ color: 'var(--accent)', marginBottom: 4 }}>DRAFT FOR YOUR DOCUMENT</div>
              <div style={{ color: 'var(--text-bright)', fontSize: 12, lineHeight: 1.55, fontStyle: 'italic' }}>
                "Sutarties galiojimo klausimas turi būti vertinamas atsižvelgiant į CK 6.158 ir 6.193 str.…"
              </div>
            </div>
          </div>
        </div>
      </div>
    </a>
  );
}

function ComingSoonCard({ name, tag, body, eta }) {
  return (
    <div style={{
      border: '1px solid var(--hairline)',
      background: 'var(--obsidian)',
      padding: '28px 28px 32px',
      position: 'relative',
      transition: 'border-color 200ms ease',
    }}
    onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--hairline-strong)'; }}
    onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--hairline)'; }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
        <span className="ad-micro" style={{ color: 'var(--text-dim)' }}>{tag}</span>
        <span className="ad-tag" style={{
          background: 'transparent', borderColor: 'var(--hairline-strong)',
          color: 'var(--text-mute)',
        }}>· {eta}</span>
      </div>
      <h3 style={{
        fontFamily: 'var(--font-display)', fontWeight: 500,
        fontSize: 24, lineHeight: 1.15, letterSpacing: '-0.015em',
        color: 'var(--text)', marginBottom: 12,
      }}>{name}</h3>
      <p className="ad-body-sm" style={{ color: 'var(--text-mute)' }}>{body}</p>
    </div>
  );
}

/* ============================================================
   PRIVACY FEATURE — major, business-language section
   ============================================================ */

function PrivacyFeature() {
  const pillars = [
    {
      label: '01',
      title: 'Stays in your country',
      body: 'EU data stays in the EU. Lithuanian client data stays in Lithuania. We deploy to your data centre, your VPS, or a sovereign provider you trust.',
    },
    {
      label: '02',
      title: 'Stays in your office',
      body: 'For sensitive work we install the AI on hardware you own. Your laptops, your server rack. Nothing reaches the public internet — ever.',
    },
    {
      label: '03',
      title: 'Stays in the room',
      body: 'For the rooms that need it, fully air-gapped. The model runs on a machine with the network cable pulled. No outside contact. Available on demand.',
    },
    {
      label: '04',
      title: 'Stays accountable',
      body: 'Every question asked, every document touched, every action taken is logged. You can review what the AI did, why it did it, and roll back any change.',
    },
  ];

  return (
    <section style={{ padding: '140px 40px', borderBottom: '1px solid var(--hairline)', position: 'relative', overflow: 'hidden' }}>
      <GridBackground kind="line" opacity={0.10} />

      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 32 }}>
          <RegMark color="var(--accent)" />
          <span className="ad-label" style={{ color: 'var(--accent)' }}>§ 05 · Privacy first</span>
        </div>

        <div className="ad-stack" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'start', marginBottom: 80 }}>
          <div>
            <h2 className="ad-display-l" style={{ marginBottom: 32, maxWidth: 720 }}>
              Your data never has<br />
              to leave the building.
            </h2>
            <p className="ad-body-lg" style={{ color: 'var(--text)', maxWidth: 600, marginBottom: 24 }}>
              Most AI tools ship your client files to someone else's servers. For a law firm,
              that is malpractice. For a finance team, it is a compliance breach. For a hospital,
              it is illegal.
            </p>
            <p className="ad-body-lg" style={{ color: 'var(--text-bright)', maxWidth: 600, fontWeight: 500 }}>
              We are built differently. On request, every system we ship can be deployed
              fully on-premises — and when it has to be, fully air-gapped.
            </p>
          </div>

          {/* Compliance badges — business-language */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              { name: 'GDPR',                desc: 'Data sovereignty &amp; right to erasure' },
              { name: 'ISO 27001',           desc: 'Information-security management' },
              { name: 'BDAR / VDAI',         desc: 'Lithuanian data protection' },
              { name: 'Attorney-client',     desc: 'Privilege preserved end-to-end' },
              { name: 'NIS2-ready',          desc: 'For critical-infrastructure clients' },
            ].map(b => (
              <div key={b.name} style={{
                display: 'flex', alignItems: 'center', gap: 16,
                padding: '14px 20px',
                background: 'var(--carbon)',
                border: '1px solid var(--hairline)',
              }}>
                <Icon name="shield-check" size={18} style={{ color: 'var(--accent)' }} />
                <div style={{ flex: 1 }}>
                  <div style={{ color: 'var(--text-bright)', fontSize: 14, fontWeight: 500 }}>{b.name}</div>
                  <div className="ad-body-sm" style={{ color: 'var(--text-mute)' }} dangerouslySetInnerHTML={{ __html: b.desc }} />
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Four pillars */}
        <div className="ad-stack-2" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          border: '1px solid var(--hairline-strong)',
          marginBottom: 56,
        }}>
          {pillars.map((p, i) => (
            <div key={p.label} style={{
              padding: '36px 28px 44px',
              borderRight: i < 3 ? '1px solid var(--hairline)' : 'none',
              background: 'var(--carbon)',
              position: 'relative',
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 20 }}>
                <span className="ad-num" style={{ color: 'var(--accent)' }}>{p.label}</span>
                <span style={{ flex: 1, height: 1, background: 'var(--hairline)', marginTop: 8 }} />
              </div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 500,
                fontSize: 22, lineHeight: 1.2, letterSpacing: '-0.015em',
                color: 'var(--text-bright)', marginBottom: 16,
              }}>{p.title}</h3>
              <p className="ad-body-sm" style={{ color: 'var(--text)' }}>{p.body}</p>
            </div>
          ))}
        </div>

        {/* Air-gap callout */}
        <AirgapCallout />
      </div>
    </section>
  );
}

function AirgapCallout() {
  return (
    <div className="ad-stack" style={{
      border: '1px solid var(--accent)',
      background: 'var(--accent-soft)',
      padding: '40px 48px',
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center',
      position: 'relative',
    }}>
      <CornerBrackets inset={10} color="var(--accent)" size={12} />

      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
          <Icon name="unplug" size={18} style={{ color: 'var(--accent)' }} />
          <span className="ad-micro" style={{ color: 'var(--accent)' }}>ON DEMAND · FULLY AIR-GAPPED</span>
        </div>
        <h3 style={{
          fontFamily: 'var(--font-display)', fontWeight: 500,
          fontSize: 32, lineHeight: 1.1, letterSpacing: '-0.02em',
          color: 'var(--text-bright)', marginBottom: 16,
        }}>
          For the rooms with the door closed.
        </h3>
        <p className="ad-body" style={{ color: 'var(--text)' }}>
          When the work demands it, we ship AI that runs completely off the network.
          Local model, local files, no internet — the same way you would lock a sensitive file
          in a drawer. Available for any engagement, on request.
        </p>
      </div>

      {/* Visual: cable unplugged diagram */}
      <AirgapVisual />
    </div>
  );
}

function AirgapVisual() {
  return (
    <svg viewBox="0 0 460 200" width="100%" height="200" style={{ display: 'block' }}>
      {/* Inside box — secure */}
      <rect x="20" y="30" width="200" height="140" rx="3"
        fill="var(--obsidian)" stroke="var(--accent)" strokeWidth="1.5" />
      <text x="120" y="58" textAnchor="middle" fontSize="11"
        fontFamily="var(--font-mono)" letterSpacing="0.14em" fill="var(--accent)">YOUR OFFICE</text>

      {/* Server icon inside */}
      <g transform="translate(60, 80)">
        <rect width="120" height="14" rx="2" fill="none" stroke="var(--text-bright)" strokeWidth="1.5" />
        <circle cx="8" cy="7" r="1.5" fill="var(--accent)" />
        <rect y="22" width="120" height="14" rx="2" fill="none" stroke="var(--text-bright)" strokeWidth="1.5" />
        <circle cx="8" cy="29" r="1.5" fill="var(--accent)" />
        <rect y="44" width="120" height="14" rx="2" fill="none" stroke="var(--text-bright)" strokeWidth="1.5" />
        <circle cx="8" cy="51" r="1.5" fill="var(--accent)" />
      </g>

      {/* Cable, unplugged */}
      <line x1="220" y1="100" x2="285" y2="100" stroke="var(--text-mute)" strokeWidth="2" />
      <circle cx="290" cy="100" r="4" fill="var(--text-mute)" />
      {/* Gap with an "x" */}
      <g transform="translate(310, 92)">
        <line x1="0" y1="0" x2="16" y2="16" stroke="var(--accent)" strokeWidth="2" />
        <line x1="16" y1="0" x2="0" y2="16" stroke="var(--accent)" strokeWidth="2" />
      </g>
      {/* Other cable end */}
      <circle cx="350" cy="100" r="4" fill="var(--text-mute)" />
      <line x1="355" y1="100" x2="420" y2="100" stroke="var(--text-mute)" strokeWidth="2" strokeDasharray="2 4" />

      {/* Outside cloud — disabled */}
      <rect x="380" y="60" width="60" height="80" rx="3"
        fill="none" stroke="var(--hairline-strong)" strokeWidth="1" strokeDasharray="3 3" opacity="0.6" />
      <text x="410" y="105" textAnchor="middle" fontSize="9"
        fontFamily="var(--font-mono)" letterSpacing="0.10em" fill="var(--text-dim)" opacity="0.6">
        CLOUD
      </text>

      {/* Label */}
      <text x="120" y="190" textAnchor="middle" fontSize="10"
        fontFamily="var(--font-mono)" letterSpacing="0.12em" fill="var(--text-mute)">
        DATA NEVER LEAVES
      </text>
    </svg>
  );
}

/* ============================================================
   CLOSING CTA
   ============================================================ */

function ClosingCTA() {
  return (
    <section style={{
      padding: '160px 40px',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <GridBackground kind="dot" opacity={0.20} />

      <div style={{ maxWidth: 1080, margin: '0 auto', position: 'relative', textAlign: 'center' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 32 }}>
          <RegMark />
          <span className="ad-label">Get in touch</span>
          <RegMark />
        </div>

        <h2 className="ad-display-xl" style={{ marginBottom: 32, fontWeight: 500 }}>
          Have a problem<br />
          worth solving?
        </h2>

        <p className="ad-body-lg" style={{
          maxWidth: 540, margin: '0 auto 48px',
          color: 'var(--text-mute)',
        }}>
          We take on a small number of engagements each quarter. Two-week scoping,
          fixed price. If we are not the right fit, we will tell you in the first call.
        </p>

        <div className="ad-btn-group" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16 }}>
          <button className="ad-btn ad-btn-lg ad-btn-accent">
            Book a 30-min call
            <Icon name="arrow-right" size={16} />
          </button>
          <button className="ad-btn ad-btn-lg ad-btn-secondary">
            hello@adim.ai
          </button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LandingBoard });