// Variant A (final) — Centered, monolithic. Now with terminal prompt,
// system metadata, corner brackets and scanlines absorbed from Variant B.
// No top-bar brandmark — the hero itself is the logo.

function VariantA({ palette }) {
  const [page, setPage] = React.useState('home'); // home | imprint | privacy
  const [copied, setCopied] = React.useState(false);
  const [now, setNow] = React.useState(new Date());
  const t = (window.KDNA_CONTENT || {}).en || {};

  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  const copyEmail = () => {
    navigator.clipboard?.writeText('info@k-dna.io');
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };

  const clock = now.toISOString().slice(11, 19);

  return (
    <div style={varAStyles.root}>
      <HelixBackground intensity={palette.intensity} hue={palette.hue} hueAlt={palette.hueAlt} />
      <div style={varAStyles.scanlines} />
      <div style={varAStyles.vignette} />
      <div style={varAStyles.noise} />

      {/* Corner brackets */}
      <CornerBrackets hue={palette.hue} />

      {/* Top bar — only meta, no logo */}
      <header style={varAStyles.topbar}>
        <div style={varAStyles.metaCluster}>
          <div style={varAStyles.metaBit}>
            <span style={varAStyles.metaBitLabel}>NODE</span>
            <span style={varAStyles.metaBitValue}>k-dna.io</span>
          </div>
          <div style={varAStyles.metaBit}>
            <span style={varAStyles.metaBitLabel}>UTC</span>
            <span style={{ ...varAStyles.metaBitValue, color: palette.hue, textShadow: `0 0 8px ${palette.hue}66` }}>{clock}</span>
          </div>
        </div>
      </header>

      {/* Content stage */}
      <main style={varAStyles.stage}>
        {page === 'home' && <HomeA t={t} palette={palette} copied={copied} copyEmail={copyEmail} />}
        {page === 'imprint' && <ImprintPage t={t} palette={palette} onBack={() => setPage('home')} variant="A" />}
        {page === 'privacy' && <PrivacyPage t={t} palette={palette} onBack={() => setPage('home')} variant="A" />}
      </main>

      {/* Footer */}
      <footer style={varAStyles.footer}>
        <span style={varAStyles.footerCopy}>{t.footer_copyright}</span>
        <nav style={varAStyles.footerNav}>
          <FooterLink active={page === 'home'} onClick={() => setPage('home')} hue={palette.hue}>01 · {t.nav_home}</FooterLink>
          <FooterLink active={page === 'imprint'} onClick={() => setPage('imprint')} hue={palette.hue}>02 · {t.nav_imprint}</FooterLink>
          <FooterLink active={page === 'privacy'} onClick={() => setPage('privacy')} hue={palette.hue}>03 · {t.nav_privacy}</FooterLink>
        </nav>
      </footer>
    </div>
  );
}

function FooterLink({ active, onClick, hue, children }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: 'none', border: 'none', cursor: 'pointer', padding: '6px 10px',
        color: active || hover ? hue : 'rgba(255,255,255,0.5)',
        fontFamily: 'JetBrains Mono, ui-monospace, monospace',
        fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
        transition: 'color .2s, text-shadow .2s',
        textShadow: active || hover ? `0 0 8px ${hue}80` : 'none',
      }}
    >{children}</button>
  );
}

function HomeA({ t, palette, copied, copyEmail }) {
  return (
    <div style={varAStyles.hero}>
      {/* Terminal prompt */}
      <div style={varAStyles.promptLine}>
        <span style={{ color: palette.hue }}>$</span>
        <span style={{ color: 'rgba(255,255,255,0.55)' }}>decrypt</span>
        <span style={{ color: 'rgba(255,255,255,0.35)' }}>--strand=k-dna</span>
        <span style={{ color: 'rgba(255,255,255,0.35)' }}>--depth=∞</span>
        <span style={{ ...varAStyles.cursor, background: palette.hue }} />
      </div>

      <h1 style={varAStyles.headline}>
        <span style={{ color: '#fff' }}>K</span>
        <span style={{ color: palette.hue, textShadow: `0 0 24px ${palette.hue}66` }}>—</span>
        <span style={{ color: '#fff' }}>DNA</span>
      </h1>
      <div style={varAStyles.subline}>{t.hero_subtitle}</div>

      <div style={varAStyles.teaser}>
        <p style={varAStyles.teaserLine}>{t.hero_teaser_a}</p>
        <p style={varAStyles.teaserLine}>{t.hero_teaser_b}</p>
        <p style={{ ...varAStyles.teaserLine, color: palette.hue }}>{t.hero_teaser_c}</p>
      </div>

      <div style={varAStyles.metaRow}>
        <div style={varAStyles.metaItem}>
          <div style={varAStyles.metaLabel}>{t.status_label}</div>
          <div style={varAStyles.metaValue}>
            <span style={{ ...varAStyles.pulseDot, background: palette.hue, boxShadow: `0 0 10px ${palette.hue}` }} />
            {t.status_value}
          </div>
        </div>
        <div style={varAStyles.metaDiv} />
        <div style={varAStyles.metaItem}>
          <div style={varAStyles.metaLabel}>{t.signal_label}</div>
          <div style={varAStyles.metaValue}>{t.signal_value}</div>
        </div>
        <div style={varAStyles.metaDiv} />
        <div style={varAStyles.metaItem}>
          <div style={varAStyles.metaLabel}>LOC</div>
          <div style={varAStyles.metaValue}>WY · US</div>
        </div>
      </div>

      <button
        onClick={copyEmail}
        style={{
          ...varAStyles.mailBtn,
          borderColor: `${palette.hue}66`,
          color: palette.hue,
          boxShadow: `inset 0 0 0 1px ${palette.hue}33, 0 0 24px ${palette.hue}1a`,
        }}
        onMouseEnter={e => {
          e.currentTarget.style.boxShadow = `inset 0 0 0 1px ${palette.hue}, 0 0 32px ${palette.hue}55`;
          e.currentTarget.style.background = `${palette.hue}0f`;
        }}
        onMouseLeave={e => {
          e.currentTarget.style.boxShadow = `inset 0 0 0 1px ${palette.hue}33, 0 0 24px ${palette.hue}1a`;
          e.currentTarget.style.background = 'transparent';
        }}
      >
        <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'rgba(255,255,255,0.4)', marginRight: 8 }}>
          {t.contact_label.toUpperCase()} /
        </span>
        <span style={{ fontFamily: 'JetBrains Mono, ui-monospace, monospace' }}>
          {copied ? '✓ copied' : 'info@k-dna.io'}
        </span>
        <span style={{ marginLeft: 14, fontFamily: 'JetBrains Mono, monospace' }}>↗</span>
      </button>
    </div>
  );
}

// Helix glyph — a small double-helix icon
function HelixGlyph({ color = '#00e5ff', colorAlt = '#ff2bd6', size = 20 }) {
  const w = size, h = size * 1.4;
  return (
    <svg width={w} height={h} viewBox="0 0 20 28" style={{ overflow: 'visible' }}>
      <defs>
        <filter id="hg-glow">
          <feGaussianBlur stdDeviation="0.6" />
        </filter>
      </defs>
      {[0, 1, 2, 3, 4, 5, 6].map(i => {
        const y = 2 + i * 4;
        const p = Math.sin(i * 0.9) * 7;
        const p2 = Math.sin(i * 0.9 + Math.PI) * 7;
        return (
          <line key={'r' + i} x1={10 + p} y1={y} x2={10 + p2} y2={y} stroke={color} strokeOpacity={0.25} strokeWidth={0.6} />
        );
      })}
      <path d="M10,1 C 3,6 17,12 10,18 C 3,24 17,26 10,27" fill="none" stroke={color} strokeWidth={1.4} filter="url(#hg-glow)" />
      <path d="M10,1 C 17,6 3,12 10,18 C 17,24 3,26 10,27" fill="none" stroke={colorAlt} strokeWidth={1.4} strokeOpacity={0.85} filter="url(#hg-glow)" />
    </svg>
  );
}

function CornerBrackets({ hue }) {
  const size = 22, off = 24, w = 1;
  const base = {
    position: 'absolute', width: size, height: size,
    borderColor: `${hue}aa`, pointerEvents: 'none', zIndex: 4,
  };
  return (
    <>
      <div style={{ ...base, top: off, left: off, borderTop: `${w}px solid`, borderLeft: `${w}px solid` }} />
      <div style={{ ...base, top: off, right: off, borderTop: `${w}px solid`, borderRight: `${w}px solid` }} />
      <div style={{ ...base, bottom: off, left: off, borderBottom: `${w}px solid`, borderLeft: `${w}px solid` }} />
      <div style={{ ...base, bottom: off, right: off, borderBottom: `${w}px solid`, borderRight: `${w}px solid` }} />
    </>
  );
}

const varAStyles = {
  root: {
    position: 'relative', width: '100%', height: '100%', overflow: 'hidden',
    background: 'radial-gradient(ellipse at 50% 40%, #0a0a0d 0%, #050507 60%, #000 100%)',
    color: 'rgba(255,255,255,0.92)',
    fontFamily: '"Space Grotesk", system-ui, sans-serif',
    display: 'flex', flexDirection: 'column',
  },
  vignette: {
    position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 1,
    background: 'radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(0,0,0,0.55) 80%)',
  },
  scanlines: {
    position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 1, opacity: 0.25,
    backgroundImage: 'repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px)',
  },
  noise: {
    position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.16, zIndex: 1,
    mixBlendMode: 'overlay',
    backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.45'/></svg>\")",
  },
  topbar: {
    position: 'relative', zIndex: 3,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '32px 56px 10px',
  },
  metaCluster: {
    display: 'flex', alignItems: 'center', gap: 28, whiteSpace: 'nowrap',
  },
  metaBit: {
    display: 'inline-flex', alignItems: 'baseline', gap: 8,
    fontFamily: 'JetBrains Mono, ui-monospace, monospace', fontSize: 11, letterSpacing: '0.05em',
  },
  metaBitLabel: { color: 'rgba(255,255,255,0.35)' },
  metaBitValue: { color: 'rgba(255,255,255,0.85)' },
  langToggle: {
    display: 'flex', alignItems: 'center', gap: 6,
    fontFamily: 'JetBrains Mono, ui-monospace, monospace',
    fontSize: 11, letterSpacing: '0.08em',
  },
  langBtn: {
    background: 'none', border: 'none', cursor: 'pointer', padding: '4px 6px',
    color: 'rgba(255,255,255,0.4)', fontFamily: 'inherit', fontSize: 'inherit',
    letterSpacing: 'inherit', transition: 'color .2s, text-shadow .2s',
  },
  langBtnActive: (hue) => ({ color: hue, textShadow: `0 0 8px ${hue}80` }),
  langSep: { color: 'rgba(255,255,255,0.2)' },

  stage: {
    position: 'relative', zIndex: 2, flex: 1,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    padding: '0 56px',
  },

  hero: {
    display: 'flex', flexDirection: 'column', alignItems: 'center',
    maxWidth: 720, textAlign: 'center', gap: 0,
  },
  promptLine: {
    display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 24,
    fontFamily: 'JetBrains Mono, monospace', fontSize: 12, letterSpacing: '0.02em',
    whiteSpace: 'nowrap',
  },
  cursor: {
    display: 'inline-block', width: 8, height: 13, marginLeft: 2,
    animation: 'kdna-blink 1s steps(2) infinite',
  },
  eyebrow: {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    fontFamily: 'JetBrains Mono, ui-monospace, monospace',
    fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.55)', marginBottom: 28,
  },
  eyebrowDot: {
    width: 6, height: 6, borderRadius: '50%',
    animation: 'kdna-pulse 2s ease-in-out infinite',
  },
  headline: {
    margin: 0, fontWeight: 500, letterSpacing: '-0.04em',
    fontSize: 152, lineHeight: 0.95, whiteSpace: 'nowrap',
    fontFamily: '"Space Grotesk", system-ui, sans-serif',
  },
  subline: {
    marginTop: 20, fontSize: 18, fontWeight: 400,
    color: 'rgba(255,255,255,0.62)', letterSpacing: '0.01em',
  },
  teaser: {
    marginTop: 36, display: 'flex', flexDirection: 'column', gap: 10,
    fontFamily: 'JetBrains Mono, ui-monospace, monospace',
    fontSize: 13, letterSpacing: '0.02em',
    color: 'rgba(255,255,255,0.72)', maxWidth: 640,
  },
  teaserLine: { margin: 0, lineHeight: 1.55 },

  metaRow: {
    marginTop: 48, display: 'flex', alignItems: 'stretch', gap: 24,
    paddingTop: 22, borderTop: '1px solid rgba(255,255,255,0.07)', width: '100%',
    justifyContent: 'center',
  },
  metaItem: { display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-start' },
  metaLabel: {
    fontFamily: 'JetBrains Mono, ui-monospace, monospace',
    fontSize: 10, letterSpacing: '0.2em', color: 'rgba(255,255,255,0.35)',
  },
  metaValue: {
    fontFamily: 'JetBrains Mono, ui-monospace, monospace',
    fontSize: 13, color: 'rgba(255,255,255,0.85)',
    display: 'inline-flex', alignItems: 'center', gap: 8, whiteSpace: 'nowrap',
  },
  metaDiv: { width: 1, background: 'rgba(255,255,255,0.1)' },
  pulseDot: {
    width: 7, height: 7, borderRadius: '50%',
    animation: 'kdna-pulse 1.8s ease-in-out infinite',
  },

  mailBtn: {
    marginTop: 36, display: 'inline-flex', alignItems: 'center',
    padding: '14px 22px', borderRadius: 2,
    background: 'transparent', border: '1px solid transparent',
    cursor: 'pointer', fontSize: 14, letterSpacing: '0.02em',
    transition: 'all .25s ease', whiteSpace: 'nowrap',
  },

  footer: {
    position: 'relative', zIndex: 3,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '20px 56px 28px',
    borderTop: '1px solid rgba(255,255,255,0.06)',
  },
  footerCopy: {
    fontFamily: 'JetBrains Mono, ui-monospace, monospace',
    fontSize: 11, color: 'rgba(255,255,255,0.35)', letterSpacing: '0.05em',
  },
  footerNav: { display: 'flex', gap: 4 },
};

Object.assign(window, { VariantA, HelixGlyph, CornerBrackets });