// Legal — shared layout primitives for Terms and Privacy pages.
// Long-form, sentence-case body, mono labels. Matches the rest of the site.

function DraftBanner() {
  return (
    <div style={{
      position: 'sticky', top: 72, zIndex: 40,
      background: 'rgba(248, 120, 120, 0.10)',
      borderTop: '1px solid rgba(248, 120, 120, 0.28)',
      borderBottom: '1px solid rgba(248, 120, 120, 0.28)',
      padding: '10px 0',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap',
      }}>
        <span style={{
          fontFamily: 'var(--font-mono)',
          fontSize: 10.5, letterSpacing: '0.14em',
          color: 'var(--attention)', fontWeight: 600,
          border: '1px solid rgba(248,120,120,0.45)',
          padding: '2px 8px', borderRadius: 2,
        }}>DRAFT v0.1</span>
        <span style={{ fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.5 }}>
          This page is a working draft pending counsel review. Not yet a legally binding document. Final language will be confirmed before any public reliance.
        </span>
      </div>
    </div>
  );
}

function LegalHero({ kicker, title, lede, lastUpdated, effective }) {
  return (
    <section className="flat" style={{ padding: '88px 0 56px' }}>
      <div className="container" style={{ maxWidth: 880 }}>
        <span className="eyebrow" style={{ alignSelf: 'flex-start', color: 'var(--accent)' }}>{kicker}</span>
        <h1 style={{
          fontSize: 'clamp(36px, 4.2vw, 56px)',
          lineHeight: 1.06,
          fontWeight: 700,
          letterSpacing: '-0.024em',
          color: 'var(--fg-1)',
          margin: '14px 0 0 0',
        }}>{title}</h1>
        {lede && (
          <p style={{
            fontSize: 17, lineHeight: 1.6,
            color: 'var(--fg-2)', margin: '20px 0 0', maxWidth: 720,
          }}>{lede}</p>
        )}
        <div style={{
          marginTop: 28, paddingTop: 16,
          borderTop: '1px solid var(--border-1)',
          display: 'flex', gap: 32, flexWrap: 'wrap',
          fontFamily: 'var(--font-mono)', fontSize: 11.5,
          color: 'var(--fg-3)', letterSpacing: '0.06em',
        }}>
          <div>
            <span style={{ color: 'var(--fg-4)' }}>Effective · </span>
            <span style={{ color: 'var(--fg-1)' }}>{effective}</span>
          </div>
          <div>
            <span style={{ color: 'var(--fg-4)' }}>Last updated · </span>
            <span style={{ color: 'var(--fg-1)' }}>{lastUpdated}</span>
          </div>
          <div>
            <span style={{ color: 'var(--fg-4)' }}>Entity · </span>
            <span style={{ color: 'var(--fg-1)' }}>EightbyZero Inc. · Montréal, QC</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function LegalTOC({ items }) {
  return (
    <section className="flat" style={{ paddingTop: 0, paddingBottom: 48 }}>
      <div className="container" style={{ maxWidth: 880 }}>
        <div className="eyebrow" style={{ color: 'var(--fg-3)', marginBottom: 14 }}>Contents</div>
        <ol style={{
          margin: 0, padding: 0, listStyle: 'none',
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '4px 24px',
          borderTop: '1px solid var(--border-1)',
        }}>
          {items.map((it, i) => (
            <li key={it.id} style={{
              borderBottom: '1px solid var(--border-1)',
              padding: '10px 0',
              display: 'grid', gridTemplateColumns: '40px 1fr',
              alignItems: 'baseline',
            }}>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 11,
                color: 'var(--fg-4)', letterSpacing: '0.08em',
              }}>{String(i + 1).padStart(2, '0')}</span>
              <a href={`#${it.id}`} style={{
                fontSize: 14, color: 'var(--fg-2)',
                textDecoration: 'none', letterSpacing: '-0.005em',
                transition: 'color 120ms',
              }}
              onMouseEnter={e => e.currentTarget.style.color = 'var(--accent)'}
              onMouseLeave={e => e.currentTarget.style.color = 'var(--fg-2)'}>{it.title}</a>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function LegalSection({ n, id, title, children }) {
  return (
    <section id={id} className="flat" style={{
      paddingTop: 36, paddingBottom: 36,
      borderTop: '1px solid var(--border-1)',
    }}>
      <div className="container" style={{ maxWidth: 880 }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '60px 1fr',
          gap: 24, alignItems: 'baseline',
        }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 13,
            color: 'var(--accent)', letterSpacing: '0.16em',
          }}>{n}</div>
          <div>
            <h2 style={{
              fontSize: 24, fontWeight: 700,
              letterSpacing: '-0.014em', margin: 0, lineHeight: 1.2,
            }}>{title}</h2>
            <div style={{
              marginTop: 16,
              fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.7,
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>{children}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Mono-style key/value row used in data inventories
function DataRow({ label, value }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '200px 1fr',
      gap: 18, padding: '10px 0',
      borderTop: '1px solid var(--border-1)',
      alignItems: 'baseline',
    }}>
      <span style={{
        fontFamily: 'var(--font-mono)', fontSize: 11.5,
        color: 'var(--fg-3)', letterSpacing: '0.08em',
        textTransform: 'uppercase',
      }}>{label}</span>
      <span style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.6 }}>{value}</span>
    </div>
  );
}

function LegalContact() {
  return (
    <section className="flat" style={{
      background: 'var(--bg-sunken)',
      borderTop: '1px solid var(--border-1)',
      padding: '64px 0',
    }}>
      <div className="container" style={{ maxWidth: 880 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 32 }}>
          <span className="eyebrow" style={{ alignSelf: 'flex-start', color: 'var(--accent)' }}>Questions</span>
          <h2 style={{
            fontSize: 'clamp(24px, 2.6vw, 36px)',
            fontWeight: 700, letterSpacing: '-0.018em',
            margin: 0, lineHeight: 1.15,
          }}>
            Talk to us before you sign anything.
          </h2>
          <p style={{ fontSize: 15, color: 'var(--fg-2)', margin: '4px 0 0', lineHeight: 1.6, maxWidth: 680 }}>
            We answer privacy, security, and contract questions directly. No ticketing, no scripted reply.
          </p>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16,
        }}>
          <ContactCard
            label="Privacy & data-subject requests"
            email="connect@eightbyzero.com"
            note="GDPR, CCPA, Law 25, PIPEDA. We respond within 30 days."
          />
          <ContactCard
            label="Trust, security & contracts"
            email="connect@eightbyzero.com"
            note="SOC 2 report (in audit), DPA, subprocessor list."
          />
        </div>
        <div style={{
          marginTop: 24, fontSize: 12.5, color: 'var(--fg-4)',
          lineHeight: 1.6, fontStyle: 'italic',
        }}>
          EightbyZero Inc. · Montréal, QC, Canada · governed by the laws of the Province of Québec.
        </div>
      </div>
    </section>
  );
}

function ContactCard({ label, email, note }) {
  return (
    <div style={{
      padding: 24, border: '1px solid var(--border-1)', borderRadius: 4,
      background: 'var(--bg-elev-1)',
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 11,
        color: 'var(--fg-3)', letterSpacing: '0.12em',
        textTransform: 'uppercase',
      }}>{label}</div>
      <a href={`mailto:${email}`} style={{
        fontSize: 16, color: 'var(--accent)',
        textDecoration: 'none', fontFamily: 'var(--font-mono)',
        borderBottom: '1px solid rgba(16,200,128,0.45)',
        paddingBottom: 2, alignSelf: 'flex-start',
      }}>{email}</a>
      <div style={{ fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.55, marginTop: 4 }}>{note}</div>
    </div>
  );
}

Object.assign(window, {
  DraftBanner, LegalHero, LegalTOC, LegalSection, DataRow, LegalContact,
});