// Shared legal pages (Imprint + Privacy) — used by both variants

function ImprintPage({ t, palette, onBack, variant }) {
  return (
    <div style={pageStyles.root}>
      <BackLink onClick={onBack} hue={palette.hue} label={t.back} />
      <h2 style={pageStyles.h1}>{t.imprint_title}</h2>
      <div style={pageStyles.rule(palette.hue)} />

      <section style={pageStyles.section}>
        <h3 style={pageStyles.h3}>{t.imprint_h1}</h3>
        <p style={pageStyles.p}>
          <span style={pageStyles.muted}>{t.imprint_operator}</span><br />
          <strong style={pageStyles.strong}>SolvraOne LLC</strong><br />
          30 N Gould St Ste R<br />
          Sheridan, WY 82801<br />
          United States of America
        </p>
      </section>

      <section style={pageStyles.section}>
        <h3 style={pageStyles.h3}>{t.imprint_contact_h}</h3>
        <p style={pageStyles.p}>
          <span style={pageStyles.muted}>E-Mail: </span>
          <a href="mailto:info@k-dna.io" style={{ ...pageStyles.link, color: palette.hue }}>info@k-dna.io</a>
        </p>
      </section>

      <section style={pageStyles.section}>
        <h3 style={pageStyles.h3}>{t.imprint_responsible}</h3>
        <p style={pageStyles.p}>{t.imprint_responsible_name} — 30 N Gould St Ste R, Sheridan, WY 82801, USA</p>
      </section>

      <section style={pageStyles.section}>
        <h3 style={pageStyles.h3}>{t.imprint_disclaimer_h}</h3>
        <p style={pageStyles.p}>{t.imprint_disclaimer_body}</p>
      </section>

      <section style={pageStyles.section}>
        <h3 style={pageStyles.h3}>{t.imprint_links_h}</h3>
        <p style={pageStyles.p}>{t.imprint_links_body}</p>
      </section>
    </div>
  );
}

function PrivacyPage({ t, palette, onBack, variant }) {
  return (
    <div style={pageStyles.root}>
      <BackLink onClick={onBack} hue={palette.hue} label={t.back} />
      <h2 style={pageStyles.h1}>{t.privacy_title}</h2>
      <div style={pageStyles.rule(palette.hue)} />

      <section style={pageStyles.section}>
        <h3 style={pageStyles.h3}>{t.privacy_h1}</h3>
        <p style={pageStyles.p}>{t.privacy_intro}</p>
      </section>

      {[1, 2, 3, 4].map(i => (
        <section key={i} style={pageStyles.section}>
          <h3 style={pageStyles.h3}>{t[`privacy_s${i}_h`]}</h3>
          <p style={pageStyles.p}>{t[`privacy_s${i}_body`]}</p>
        </section>
      ))}
    </div>
  );
}

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

const pageStyles = {
  root: {
    width: '100%', maxWidth: 640, margin: '0 auto',
    maxHeight: 'calc(100vh - 160px)', overflow: 'auto',
    padding: '10px 6px 40px',
    scrollbarWidth: 'thin',
  },
  h1: {
    margin: 0, fontFamily: '"Space Grotesk", sans-serif',
    fontWeight: 500, fontSize: 48, letterSpacing: '-0.03em',
    color: '#fff',
  },
  rule: (hue) => ({
    width: 40, height: 2, background: hue, marginTop: 14, marginBottom: 32,
    boxShadow: `0 0 12px ${hue}`,
  }),
  section: { marginBottom: 26 },
  h3: {
    margin: '0 0 10px 0', fontFamily: 'JetBrains Mono, monospace',
    fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.55)', fontWeight: 500,
  },
  p: {
    margin: 0, fontSize: 14, lineHeight: 1.7,
    color: 'rgba(255,255,255,0.78)',
    fontFamily: '"Space Grotesk", sans-serif',
  },
  muted: { color: 'rgba(255,255,255,0.5)' },
  strong: { color: '#fff', fontWeight: 600 },
  link: { textDecoration: 'none', transition: 'text-shadow .2s' },
};

Object.assign(window, { ImprintPage, PrivacyPage, BackLink });