---
import AppLayout from '../layouts/AppLayout.astro';
import ProjectLockup from '../components/ProjectLockup.astro';
import { hasJoinRequest } from '../lib/db';
import { homeRouteForRole } from '../lib/routing';
import { existsSync } from 'fs';
import { join } from 'path';

const user = Astro.locals.user;

// Council members (cab) and Fenja team (fenja) land on /pulse; pilots see
// the existing editorial home below — the right audience for that content.
const redirectTo = homeRouteForRole(user.role);
if (redirectTo) return Astro.redirect(redirectTo);

const firstName = user.name.split(' ')[0];
const alreadyJoined = hasJoinRequest(user.id);
const innofoundarLogoExists = existsSync(join(process.cwd(), 'public/innofounder-logo.png'));
---
<AppLayout title="Home" user={user}>
  <div class="page">

    <!-- ── Hero ──────────────────────────────────────────────────── -->
    <section class="hero">
      <ProjectLockup size="hero" alignment="left" />
      <p class="hero-greeting">Welcome, <em>{firstName}.</em></p>
    </section>

    <!-- ── Opening ───────────────────────────────────────────────── -->
    <div class="reading-col opening">
      <p class="opening-statement">
        Secure and sovereign AI for regulated environments.
        Project Bifrost is where we build it — together with the organisations
        who will depend on it.
      </p>
    </div>

    <!-- ── Pulled quote ───────────────────────────────────────────── -->
    <div class="quote-break">
      <blockquote class="pulled-quote">
        <p class="pulled-quote__text">
          We can't build our digital<br />fortress on foreign clouds.
        </p>
        <footer class="pulled-quote__attribution">— The Project Bifrost premise</footer>
      </blockquote>
    </div>

    <!-- ── What Fenja is + 97% stat ──────────────────────────────── -->
    <div class="fenja-row">
      <div class="fenja-text">
        <h2 class="section-label">What Fenja is</h2>
        <p class="body-lg">
          Fenja is a platform for running advanced AI inside the customer's own infrastructure.
          We build for public authorities and regulated industries — pharmaceuticals, defence,
          finance — where standard AI on foreign-owned public clouds is simply not a viable
          or compliant option. Data remains under absolute, localised control,
          with the traceability and documentation the market demands.
        </p>
      </div>
      <figure class="stat-figure" aria-label="Key statistic">
        <p class="stat-figure__number">97%</p>
        <figcaption class="stat-figure__label">
          of AI foundational model usage falls outside EU jurisdiction
        </figcaption>
        <p class="stat-source label-sm">— Stanford AI Index, 2024</p>
      </figure>
    </div>

    <!-- ── What Project Bifrost is ───────────────────────────────── -->
    <div class="reading-col bifrost-block">
      <h2 class="section-label">What Project Bifrost is</h2>
      <div class="prose">
        <p class="body-lg">
          Project Bifrost is the first pilot — a working collaboration between Fenja and five
          organisations who are shaping the platform they will ultimately rely on. Two are running
          paid-but-subsidised pilots; the remaining three are on the Customer Advisory Board,
          following the work closely and shaping direction through quarterly conversations.
        </p>
        <p class="body-lg">
          This is not a focus group. Participants are involved in real decisions — about what
          the minimum viable product looks like, how the traceability layer works, what the
          knowledge base needs to understand. Their input is built in, not bolted on.
        </p>
      </div>
    </div>

    <!-- ── Backed by Innofounder ──────────────────────────────────── -->
    <div class="reading-col innofounder-block">
      <div class="innofounder-logo-row">
        {innofoundarLogoExists ? (
          <img src="/innofounder-logo.png" alt="Innofounder — Innovation Fund Denmark" class="innofounder-logo" />
        ) : (
          <div class="innofounder-placeholder" aria-label="Innofounder logo — add file">
            <span class="label-sm">Innofounder logo — add <code>public/innofounder-logo.png</code></span>
          </div>
        )}
      </div>
      <h2 class="section-label">Backed by Innofounder</h2>
      <div class="prose">
        <p class="body-lg">
          Fenja is backed by Innofounder — Innovation Fund Denmark's programme for
          early-stage deep-tech ventures. This matters for you directly: because this
          work is publicly funded, we are using that funding to subsidise pilot
          participants' own projects.
        </p>
        <p class="body-lg">
          Participants in Project Bifrost are not just getting early access to the platform.
          They are helping to define what the Danish standard for sovereign AI looks like —
          and in return, they receive a substantially discounted sovereign AI deployment for
          their own organisation once we reach the agreed MVP. The public funding creates the
          conditions for a genuine win-win: you shape the platform, and the platform works for you.
        </p>
      </div>
    </div>

    <!-- ── What we ask / What you get ────────────────────────────── -->
    <div class="ask-break">
      <h2 class="ask-headline">
        What we ask.<br /><em>What you get.</em>
      </h2>
      <div class="ask-grid">
        <div class="ask-card">
          <h3 class="ask-card-title">Pilot participants</h3>
          <ul class="ask-list">
            <li>A few hours a month over three to four months</li>
            <li>Running the software in your own environment</li>
            <li>Direct feedback on what works and what does not</li>
            <li>Input into the minimum viable shape of the product</li>
            <li>A fraction of the real value of the deployment, once we reach agreed MVP</li>
          </ul>
        </div>
        <div class="ask-card">
          <h3 class="ask-card-title">Advisory Board members</h3>
          <ul class="ask-list">
            <li>Quarterly conversations to shape direction</li>
            <li>Access to all updates, roadmap, and meetings in this hub</li>
            <li>No software deployment required</li>
            <li>Advisory Board participation is free</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- ── Join CTA ───────────────────────────────────────────────── -->
    <section class="join-section" id="join-section">
      {alreadyJoined ? (
        <div class="join-confirmed">
          <h2 class="join-confirmed-title">
            Welcome to <em>Project Bifrost.</em>
          </h2>
          <p class="body-lg join-confirmed-body">
            We will be in touch shortly to arrange the next step.
          </p>
        </div>
      ) : (
        <div id="join-cta">
          <h2 class="cta-headline">
            Ready to help <em>build this?</em>
          </h2>
          <button class="cta-btn" id="join-btn" type="button">
            I want to join Project Bifrost
          </button>
          <p class="cta-hint body-sm">
            We will follow up personally to discuss the right level of involvement for your organisation.
          </p>
        </div>
      )}
    </section>

  </div>
</AppLayout>

<script>
  const btn = document.getElementById('join-btn');
  if (btn) {
    btn.addEventListener('click', async () => {
      btn.setAttribute('disabled', 'true');
      btn.textContent = 'Registering...';
      try {
        const res = await fetch('/api/join', { method: 'POST' });
        if (res.ok) {
          const cta = document.getElementById('join-cta');
          if (cta) {
            cta.innerHTML = `
              <div class="join-confirmed">
                <h2 class="join-confirmed-title">
                  Welcome to <em>Project Bifrost.</em>
                </h2>
                <p class="body-lg join-confirmed-body">
                  We will be in touch shortly to arrange the next step.
                </p>
              </div>
            `;
          }
        } else {
          btn.removeAttribute('disabled');
          btn.textContent = 'I want to join Project Bifrost';
        }
      } catch {
        btn.removeAttribute('disabled');
        btn.textContent = 'I want to join Project Bifrost';
      }
    });
  }
</script>

<style>
  .page {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--space-20) var(--space-16);
  }

  /* ── Reading column — prose-density sections ─────────────────────── */
  .reading-col {
    max-width: var(--reading-max);
  }

  /* ── Hero ────────────────────────────────────────────────────────── */
  .hero {
    padding-top: var(--space-16);
    padding-bottom: var(--space-10);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .hero-greeting {
    font-family: var(--font-serif);
    font-size: var(--text-headline-md);
    font-style: italic;
    font-weight: 400;
    color: var(--on-surface-variant);
    margin: 0;
    letter-spacing: var(--tracking-snug);
  }

  /* ── Opening ─────────────────────────────────────────────────────── */
  .opening {
    margin-bottom: var(--space-10);
  }

  .opening-statement {
    font-family: var(--font-serif);
    font-size: var(--text-headline-md);
    font-weight: 400;
    letter-spacing: var(--tracking-snug);
    line-height: var(--leading-snug);
    color: var(--on-surface);
    margin: 0;
  }

  /* ── Pulled quote — full-width breakout ──────────────────────────── */
  .quote-break {
    margin: var(--space-20) 0;
  }

  .pulled-quote {
    margin: 0;
    padding: 0 0 0 var(--space-6);
    border-left: 3px solid var(--secondary);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 52rem;
  }

  .pulled-quote__text {
    font-family: var(--font-serif);
    font-size: var(--text-display-md);
    font-style: italic;
    font-weight: 400;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    color: var(--on-surface);
    margin: 0;
  }

  .pulled-quote__attribution {
    font-family: var(--font-sans);
    font-size: var(--text-label-md);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--on-surface-muted);
  }

  /* ── Fenja row — asymmetric two-column ───────────────────────────── */
  .fenja-row {
    display: grid;
    grid-template-columns: 1fr 16rem;
    gap: var(--space-12);
    align-items: start;
    margin-bottom: var(--space-10);
  }

  .fenja-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 36rem;
  }

  .fenja-text .body-lg {
    margin: 0;
    color: var(--on-surface-variant);
    line-height: var(--leading-relaxed);
  }

  /* ── Section label ───────────────────────────────────────────────── */
  .section-label {
    font-family: var(--font-sans);
    font-size: var(--text-label-md);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--on-surface-muted);
    margin: 0 0 var(--space-4);
  }

  /* ── Stat figure ─────────────────────────────────────────────────── */
  .stat-figure {
    margin: var(--space-4) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .stat-figure__number {
    font-family: var(--font-serif);
    font-size: var(--text-display-xl);
    font-weight: 400;
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    color: var(--on-surface-muted);
    margin: 0;
  }

  .stat-figure__label {
    font-family: var(--font-sans);
    font-size: var(--text-body-md);
    color: var(--on-surface-variant);
    max-width: 14rem;
    line-height: var(--leading-relaxed);
  }

  .stat-source {
    color: var(--on-surface-muted);
    letter-spacing: var(--tracking-wide);
    margin: 0;
  }

  /* ── Prose ───────────────────────────────────────────────────────── */
  .prose {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .prose .body-lg {
    margin: 0;
    color: var(--on-surface-variant);
    line-height: var(--leading-relaxed);
  }

  /* ── Bifrost block ───────────────────────────────────────────────── */
  .bifrost-block {
    margin-bottom: var(--space-10);
  }

  /* ── Innofounder block ───────────────────────────────────────────── */
  .innofounder-block {
    margin-bottom: 0;
  }

  .innofounder-logo-row {
    margin-bottom: var(--space-5);
  }

  .innofounder-logo {
    width: 120px;
    height: auto;
    display: block;
  }

  .innofounder-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 40px;
    background: var(--surface-container);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-3);
  }

  .innofounder-placeholder .label-sm {
    color: var(--on-surface-muted);
    letter-spacing: var(--tracking-normal);
    font-size: var(--text-label-sm);
    text-align: center;
    line-height: var(--leading-snug);
  }

  .innofounder-placeholder code {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  /* ── What we ask — full-width breakout ───────────────────────────── */
  .ask-break {
    margin-top: var(--space-24);
    margin-bottom: 0;
  }

  .ask-headline {
    font-family: var(--font-serif);
    font-size: var(--text-display-md);
    font-weight: 400;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    color: var(--on-surface);
    margin: 0 0 var(--space-10);
  }

  .ask-headline em {
    font-weight: 700;
    font-style: italic;
  }

  .ask-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    max-width: 56rem;
  }

  .ask-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-8);
    background: var(--surface-container-lowest);
    border-radius: var(--radius-md);
  }

  .ask-card-title {
    font-family: var(--font-serif);
    font-size: var(--text-headline-sm);
    font-weight: 700;
    font-style: italic;
    letter-spacing: var(--tracking-snug);
    line-height: var(--leading-snug);
    color: var(--on-surface);
    margin: 0;
  }

  .ask-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .ask-list li {
    font-family: var(--font-sans);
    font-size: var(--text-body-lg);
    color: var(--on-surface-variant);
    line-height: var(--leading-relaxed);
    padding-left: var(--space-5);
    position: relative;
  }

  .ask-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--on-surface-muted);
    font-family: var(--font-serif);
  }

  /* ── Join CTA ────────────────────────────────────────────────────── */
  .join-section {
    margin-top: var(--space-24);
    padding-bottom: var(--space-16);
  }

  /* CTA pre-click state */
  #join-cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 44rem;
  }

  .cta-headline {
    font-family: var(--font-serif);
    font-size: var(--text-display-md);
    font-weight: 400;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    color: var(--on-surface);
    margin: 0;
  }

  .cta-headline em {
    font-weight: 700;
    font-style: italic;
  }

  .cta-btn {
    display: inline-block;
    align-self: flex-start;
    background: linear-gradient(180deg, var(--secondary) 0%, var(--secondary-dim) 100%);
    color: var(--on-secondary);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-8);
    font-family: var(--font-sans);
    font-size: var(--text-body-lg);
    font-weight: 600;
    letter-spacing: var(--tracking-snug);
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-standard);
  }
  .cta-btn:hover   { opacity: 0.92; }
  .cta-btn:active  { opacity: 0.82; }
  .cta-btn:disabled { opacity: 0.55; cursor: default; }

  .cta-hint {
    color: var(--on-surface-muted);
    margin: 0;
    max-width: 36rem;
    line-height: var(--leading-relaxed);
  }

  /* Confirmed state — server-rendered or injected by JS */
  .join-confirmed {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 44rem;
  }

  .join-confirmed-title {
    font-family: var(--font-serif);
    font-size: var(--text-display-md);
    font-weight: 400;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    color: var(--on-surface);
    margin: 0;
  }

  .join-confirmed-title em {
    font-weight: 700;
    font-style: italic;
  }

  .join-confirmed-body {
    color: var(--on-surface-variant);
    margin: 0;
    line-height: var(--leading-relaxed);
  }

  /* ── Mobile (≤767px) ────────────────────────────────────────────── */
  @media (max-width: 767px) {
    .page { padding: 0 var(--space-5) var(--space-12); }
    /* Stack the two-column rows. */
    .fenja-row,
    .ask-grid { grid-template-columns: 1fr; }
  }
</style>
