// legal.jsx — shared layout for Terms and Privacy pages.

const LEGAL_ACCENT = '#F5A623';

function LegalLayout({ title, eyebrow, kicker, lastUpdated, intro, sections, current }) {
  return (
    <div style={{
      background: T.deep, color: T.warm, minHeight: '100vh',
      fontFamily: sans,
    }}>
      <TopStrap accent={LEGAL_ACCENT} />
      <SiteHeader accent={LEGAL_ACCENT} theme="dark" current={current} />

      <LegalHero
        title={title}
        eyebrow={eyebrow}
        kicker={kicker}
        lastUpdated={lastUpdated}
        intro={intro}
      />

      <LegalBody sections={sections} />

      <ClosingIndex />

      <SiteFooter accent={LEGAL_ACCENT} />
    </div>
  );
}

function LegalHero({ title, eyebrow, kicker, lastUpdated, intro }) {
  return (
    <section style={{
      padding: '88px 56px 72px',
      borderBottom: `1px solid ${T.hair}`,
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 14, marginBottom: 28,
      }}>
        <span style={{
          fontFamily: mono, fontSize: 11, letterSpacing: '0.18em',
          textTransform: 'uppercase', color: LEGAL_ACCENT,
        }}>{eyebrow}</span>
        <Rule color={T.hair} style={{ flex: 1, maxWidth: 240 }} />
        <span style={{
          fontFamily: mono, fontSize: 11, letterSpacing: '0.16em',
          textTransform: 'uppercase', color: T.dim,
        }}>Last updated · {lastUpdated}</span>
      </div>

      <h1 style={{
        fontFamily: serif, fontWeight: 400,
        fontSize: 'clamp(48px, 6vw, 88px)',
        lineHeight: 0.98, letterSpacing: '-0.025em',
        color: T.warm, margin: 0, textWrap: 'pretty',
        maxWidth: 1000,
      }}>
        {title}{' '}
        <em style={{ fontStyle: 'italic', color: LEGAL_ACCENT, fontWeight: 400 }}>
          {kicker}
        </em>
      </h1>

      <p style={{
        fontFamily: serif, fontSize: 19, lineHeight: 1.55,
        color: T.dim, marginTop: 32, maxWidth: 720, textWrap: 'pretty',
      }}>
        {intro}
      </p>
    </section>
  );
}

function LegalBody({ sections }) {
  // Side-rail of section anchors + main long-form column
  return (
    <section style={{
      padding: '72px 56px 96px',
      display: 'grid',
      gridTemplateColumns: '240px 1fr',
      gap: 80,
      alignItems: 'start',
    }}>
      <aside style={{
        position: 'sticky', top: 24,
        display: 'flex', flexDirection: 'column', gap: 10,
      }}>
        <span style={{
          fontFamily: mono, fontSize: 10, letterSpacing: '0.18em',
          textTransform: 'uppercase', color: T.dimer,
        }}>Contents</span>
        {sections.map((s, i) => (
          <a key={s.id} href={`#${s.id}`} style={{
            fontFamily: mono, fontSize: 11, letterSpacing: '0.14em',
            textTransform: 'uppercase', color: T.dim,
            textDecoration: 'none',
            display: 'grid', gridTemplateColumns: '24px 1fr', gap: 8,
            padding: '4px 0',
          }}>
            <span style={{ color: T.dimer }}>{String(i + 1).padStart(2, '0')}</span>
            <span>{s.title}</span>
          </a>
        ))}
      </aside>

      <div style={{ maxWidth: 760 }}>
        {sections.map((s, i) => (
          <article key={s.id} id={s.id} style={{
            paddingTop: i === 0 ? 0 : 56,
            paddingBottom: 8,
            borderTop: i === 0 ? 'none' : `1px solid ${T.hair}`,
          }}>
            <div style={{
              display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 18,
              paddingTop: i === 0 ? 0 : 40,
            }}>
              <span style={{
                fontFamily: mono, fontSize: 12, letterSpacing: '0.16em',
                color: LEGAL_ACCENT,
              }}>§ {String(i + 1).padStart(2, '0')}</span>
              <h2 style={{
                fontFamily: serif, fontWeight: 400,
                fontSize: 32, lineHeight: 1.08,
                letterSpacing: '-0.018em',
                color: T.warm, margin: 0,
              }}>{s.title}</h2>
            </div>
            <LegalContent blocks={s.blocks} />
          </article>
        ))}
      </div>
    </section>
  );
}

function LegalContent({ blocks }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      {blocks.map((b, i) => {
        if (typeof b === 'string') {
          return (
            <p key={i} style={{
              fontFamily: serif, fontSize: 17, lineHeight: 1.6,
              color: T.dim, margin: 0, textWrap: 'pretty',
            }}>{b}</p>
          );
        }
        if (b.type === 'list') {
          return (
            <ul key={i} style={{
              margin: 0, padding: 0, listStyle: 'none',
              display: 'flex', flexDirection: 'column', gap: 10,
            }}>
              {b.items.map((it, j) => (
                <li key={j} style={{
                  display: 'grid', gridTemplateColumns: '24px 1fr', gap: 12,
                  fontFamily: serif, fontSize: 17, lineHeight: 1.55,
                  color: T.dim,
                }}>
                  <span style={{
                    fontFamily: mono, fontSize: 11, letterSpacing: '0.14em',
                    color: LEGAL_ACCENT, paddingTop: 4,
                  }}>—</span>
                  <span>{it}</span>
                </li>
              ))}
            </ul>
          );
        }
        if (b.type === 'callout') {
          return (
            <div key={i} style={{
              background: T.surfaceDark,
              border: `1px solid ${T.hair}`,
              borderLeft: `2px solid ${LEGAL_ACCENT}`,
              borderRadius: 6,
              padding: '20px 24px',
              fontFamily: serif, fontSize: 16, lineHeight: 1.55,
              color: T.warm,
            }}>
              {b.label && (
                <div style={{
                  fontFamily: mono, fontSize: 10, letterSpacing: '0.18em',
                  textTransform: 'uppercase', color: LEGAL_ACCENT, marginBottom: 8,
                }}>{b.label}</div>
              )}
              {b.text}
            </div>
          );
        }
        if (b.type === 'kv') {
          return (
            <dl key={i} style={{
              margin: 0, display: 'grid',
              gridTemplateColumns: '180px 1fr', gap: '14px 24px',
              fontFamily: serif, fontSize: 16, lineHeight: 1.5,
            }}>
              {b.items.map((it, j) => (
                <React.Fragment key={j}>
                  <dt style={{
                    fontFamily: mono, fontSize: 11, letterSpacing: '0.14em',
                    textTransform: 'uppercase', color: T.dim,
                  }}>{it.k}</dt>
                  <dd style={{ margin: 0, color: T.warm }}>{it.v}</dd>
                </React.Fragment>
              ))}
            </dl>
          );
        }
        if (b.type === 'h3') {
          return (
            <h3 key={i} style={{
              fontFamily: serif, fontSize: 22, fontWeight: 500,
              letterSpacing: '-0.01em', color: T.warm,
              margin: '8px 0 0',
            }}>{b.text}</h3>
          );
        }
        return null;
      })}
    </div>
  );
}

function ClosingIndex() {
  return (
    <section style={{
      padding: '32px 56px 80px',
      borderTop: `1px solid ${T.hair}`,
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center',
      }}>
        <div>
          <span style={{
            fontFamily: mono, fontSize: 11, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: T.dimer,
          }}>Questions</span>
          <div style={{
            fontFamily: serif, fontSize: 22, lineHeight: 1.4,
            color: T.warm, marginTop: 8,
          }}>
            Write to{' '}
            <a href="mailto:hello@kevlex.digital" style={{
              color: LEGAL_ACCENT, textDecoration: 'none',
              borderBottom: `1px solid ${LEGAL_ACCENT}`, paddingBottom: 1,
            }}>hello@kevlex.digital</a>.
          </div>
        </div>
        <a href="index.html" style={{
          fontFamily: mono, fontSize: 12, letterSpacing: '0.18em',
          textTransform: 'uppercase', color: LEGAL_ACCENT, textDecoration: 'none',
          justifySelf: 'end',
          border: `1px solid ${LEGAL_ACCENT}`,
          padding: '14px 22px', borderRadius: 6,
        }}>KevlexOS Index ↗</a>
      </div>
    </section>
  );
}

Object.assign(window, { LegalLayout });