// Petit Béret — shared sub-page shell
// Requires site.jsx to be loaded first (provides Nav, Footer, tokens, fonts, useBreakpoint)

function PageShell({ kicker, title, titleItalic, lede, children, T, lang, setLang, theme, setTheme }) {
  const dark = T.bg === '#0B1220';
  const { isMobile, isTablet } = window.useBreakpoint();
  return (
    <div style={{ background: T.bg, color: T.ink, minHeight: '100vh', fontFamily: window.SF_FONT }}>
      <window.Nav T={T} lang={lang} setLang={setLang} isRoot={false} theme={theme} setTheme={setTheme}/>

      <section style={{
        background: T.bgGrad,
        borderBottom: `1px solid ${T.hair}`,
        padding: isMobile ? '50px 20px 40px' : '90px 28px 70px',
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', left: '-8%', top: -40,
          width: 480, height: 480, borderRadius: '50%',
          background: dark
            ? 'radial-gradient(closest-side, rgba(10,132,255,0.10), transparent 70%)'
            : 'radial-gradient(closest-side, rgba(10,132,255,0.06), transparent 70%)',
          pointerEvents: 'none',
        }}/>
        <div style={{
          position: 'absolute', right: '-6%', top: -60, width: 540, height: 540, borderRadius: '50%',
          background: dark
            ? 'radial-gradient(closest-side, rgba(232,168,74,0.08), transparent 70%)'
            : 'radial-gradient(closest-side, rgba(232,168,74,0.12), transparent 70%)',
          pointerEvents: 'none',
        }}/>

        <div style={{ maxWidth: 760, margin: '0 auto', position: 'relative' }}>
          {kicker && (
            <div style={{
              display: 'flex', alignItems: 'center', gap: 12,
              fontFamily: window.JB_MONO, fontSize: 10.5, fontWeight: 700,
              color: dark ? '#B6C0D1' : T.ink3,
              letterSpacing: 1.6, textTransform: 'uppercase',
            }}>
              <span>{kicker}</span>
              <span style={{ width: 24, height: 1, background: T.hairStrong }}/>
              <span>Petit Béret</span>
            </div>
          )}
          <h1 style={{
            fontFamily: window.SF_FONT,
            fontSize: isMobile ? 38 : isTablet ? 50 : 64,
            fontWeight: 600,
            letterSpacing: isMobile ? -1 : -2, lineHeight: 1.02,
            color: T.ink, margin: '20px 0 0',
          }}>
            {title}
            {titleItalic && (
              <>
                <br/>
                <span style={{
                  fontFamily: window.NY_SERIF, fontStyle: 'italic',
                  fontWeight: 400, letterSpacing: isMobile ? -0.8 : -1.4,
                }}>{titleItalic}</span>
              </>
            )}
          </h1>
          {lede && (
            <>
              <div style={{ width: 40, height: 2, background: T.blue, borderRadius: 1, margin: '28px 0' }}/>
              <p style={{
                fontFamily: window.SF_TEXT, fontSize: isMobile ? 15 : 18, lineHeight: 1.55,
                color: T.ink2, letterSpacing: -0.1, margin: 0, maxWidth: 600,
              }}>{lede}</p>
            </>
          )}
        </div>
      </section>

      <main style={{
        maxWidth: 900, margin: '0 auto',
        padding: isMobile ? '40px 20px 70px' : '70px 28px 110px',
      }}>
        {children}
      </main>

      <window.Footer T={T} lang={lang} isRoot={false}/>
    </div>
  );
}

function Section({ title, kicker, children, T }) {
  return (
    <section style={{ marginTop: 56 }}>
      {kicker && (
        <div style={{
          fontFamily: window.JB_MONO, fontSize: 10.5, fontWeight: 700,
          color: T.blue, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 10,
        }}>{kicker}</div>
      )}
      {title && (
        <h2 style={{
          fontFamily: window.SF_FONT, fontSize: 32, fontWeight: 600,
          letterSpacing: -0.7, color: T.ink, margin: '0 0 20px',
        }}>{title}</h2>
      )}
      {children}
    </section>
  );
}

function P({ children, T, style }) {
  return (
    <p style={{
      fontFamily: window.SF_TEXT, fontSize: 16, lineHeight: 1.65,
      color: T.ink2, letterSpacing: -0.05, marginTop: 14,
      ...style,
    }}>{children}</p>
  );
}

function Em({ children }) {
  return <em style={{ fontFamily: window.NY_SERIF, fontStyle: 'italic' }}>{children}</em>;
}

function Strong({ children, T }) {
  return <strong style={{ color: T.ink, fontWeight: 600 }}>{children}</strong>;
}

function Card({ children, T, accent }) {
  return (
    <div style={{
      background: T.surface, borderRadius: 18,
      border: `1px solid ${T.hair}`,
      padding: '24px 28px',
      position: 'relative', overflow: 'hidden',
    }}>
      {accent && (
        <div style={{
          position: 'absolute', top: 0, right: 0, width: 200, height: 200,
          background: `radial-gradient(closest-side, ${accent}18, transparent 70%)`,
          pointerEvents: 'none',
        }}/>
      )}
      {children}
    </div>
  );
}

function Grid({ children, cols = 3 }) {
  const { isMobile, isTablet } = window.useBreakpoint();
  const effectiveCols = isMobile ? 1 : isTablet ? Math.min(cols, 2) : cols;
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: `repeat(${effectiveCols}, 1fr)`,
      gap: 14, marginTop: 24,
    }}>{children}</div>
  );
}

function Divider({ T }) {
  return <div style={{ height: 1, background: T.hair, margin: '40px 0' }}/>;
}

window.PageShell = PageShell;
window.Section   = Section;
window.P         = P;
window.Em        = Em;
window.Strong    = Strong;
window.Card      = Card;
window.Grid      = Grid;
window.Divider   = Divider;