/* Sections below hero — How it works, Pricing, Add-ons, Reviews, FAQ, RODO, Footer */

const PAL = {
  bg: '#f4ede4',
  panel: '#ebe0cc',
  panelDeep: '#e0d2b8',
  ink: '#2b1f17',
  ink2: '#5a4536',
  muted: '#8a7565',
  border: '#d6c5a8',
  accent: '#c87a52',
  accentDeep: '#a85a32',
  cream: '#faf5e9',
  dark: '#1a120c',
};

const SERIF = '"Instrument Serif", serif';
const SANS = '"Inter", system-ui, sans-serif';

function PageSections() {
  return (
    <div style={{ background: PAL.bg, color: PAL.ink, fontFamily: SANS }}>
      <HowItWorks />
      <Occasions />
      <Pricing />
      <AddOns />
      <Reviews />
      <Privacy />
      <FAQ />
      <FinalCTA />
      <Footer />
    </div>
  );
}

/* ─── HOW IT WORKS ─── */
function HowItWorks() {
  const steps = [
    { n: '01', t: 'Wgrywasz zdjęcia', d: 'Skanowane, z telefonu, podniszczone — wszystko działa. Wygodny panel, który zrozumie nawet babcia.' },
    { n: '02', t: 'My robimy magię', d: 'Restaurujemy zdjęcia, animujemy je, dobieramy muzykę i montujemy film. Ty nie musisz nic.' },
    { n: '03', t: 'Film w skrzynce', d: 'Gotowy film Full HD wysyłamy mailem w ciągu 48h. Pobierasz, pokazujesz, wzruszasz.' },
  ];
  return (
    <section style={{ padding: '110px 56px', background: PAL.cream }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 56, gap: 40, flexWrap: 'wrap' }}>
          <div>
            <Kicker>Jak to działa</Kicker>
            <h2 style={H2}>Trzy kroki. <em style={{ color: PAL.accentDeep }}>Czterdzieści osiem godzin.</em></h2>
          </div>
          <p style={{ fontSize: 16, color: PAL.ink2, maxWidth: 340, lineHeight: 1.6 }}>
            Bez instalacji, bez logowania w 5 miejscach. Robisz tylko jedną rzecz — wybierasz zdjęcia.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: PAL.border, border: `1px solid ${PAL.border}` }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{ background: i === 1 ? PAL.bg : PAL.cream, padding: '48px 36px' }}>
              <div style={{ fontFamily: SERIF, fontSize: 14, color: PAL.accent, fontStyle: 'italic', marginBottom: 24 }}>krok {s.n}</div>
              <h3 style={{ fontFamily: SERIF, fontSize: 30, fontWeight: 400, marginBottom: 12, letterSpacing: -0.3, color: PAL.ink }}>{s.t}</h3>
              <p style={{ fontSize: 15, color: PAL.ink2, lineHeight: 1.65 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── OCCASIONS ─── */
function Occasions() {
  const items = [
    { name: '80. urodziny mamy', sub: 'Okrągła rocznica' },
    { name: '50 lat ślubu rodziców', sub: 'Złote gody' },
    { name: 'Pod choinkę dla babci', sub: 'Boże Narodzenie' },
    { name: 'Upamiętnienie taty', sub: 'Z miłości' },
    { name: 'Komunia wnuczki', sub: 'Rodzinna pamiątka' },
    { name: 'Dzień Matki', sub: 'Niezapomniany prezent' },
  ];
  return (
    <section style={{ padding: '110px 56px', background: PAL.bg }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ marginBottom: 48 }}>
          <Kicker>Na jaką okazję</Kicker>
          <h2 style={{ ...H2, maxWidth: 720 }}>Prezent, którego <em style={{ color: PAL.accentDeep }}>nie kupisz w sklepie</em></h2>
          <p style={{ fontSize: 17, color: PAL.ink2, maxWidth: 540, lineHeight: 1.6, marginTop: 16 }}>
            Bo kwiaty więdną, perfumy się kończą, a film z rodzinnymi zdjęciami zostaje na zawsze.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {items.map((o, i) => (
            <div key={i} style={{
              background: i % 2 === 0 ? PAL.panel : PAL.cream,
              padding: '32px 28px', borderRadius: 16, minHeight: 170,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              border: `1px solid ${PAL.border}`,
            }}>
              <div style={{ fontSize: 11, color: PAL.muted, fontWeight: 600, letterSpacing: 1.5, textTransform: 'uppercase' }}>{o.sub}</div>
              <div style={{ fontFamily: SERIF, fontSize: 26, fontWeight: 400, color: PAL.ink, lineHeight: 1.15 }}>{o.name}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── PRICING ─── */
function Pricing() {
  const pkgs = [
    { name: 'Wspomnienie', sub: '8 zdjęć · ~1 min', price: 179, per: '22,4 zł / zdjęcie' },
    { name: 'Rodzinny',    sub: '15 zdjęć · ~2 min', price: 279, per: '18,6 zł / zdjęcie', hot: true },
    { name: 'Saga',        sub: '20 zdjęć · ~3 min', price: 349, per: '17,5 zł / zdjęcie' },
  ];
  const features = ['Animacja AI', 'Restauracja zdjęć', 'Muzyka w cenie', 'Full HD 1080p', 'Dostawa w 48h'];
  return (
    <section style={{ padding: '110px 56px', background: PAL.cream }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <Kicker centered>Cennik</Kicker>
          <h2 style={{ ...H2, textAlign: 'center' }}>Wybierz pakiet</h2>
          <p style={{ fontSize: 17, color: PAL.ink2, maxWidth: 480, margin: '16px auto 0', lineHeight: 1.6 }}>
            Wszystko w cenie. Bez ukrytych kosztów, bez subskrypcji.
          </p>
        </div>

        {/* Tripwire */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 24, background: PAL.dark, color: PAL.cream,
          padding: '28px 36px', borderRadius: 14, marginBottom: 16, flexWrap: 'wrap',
        }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 2, color: PAL.accent, marginBottom: 6 }}>WYPRÓBUJ ZA GROSZE</div>
            <div style={{ fontFamily: SERIF, fontSize: 26, fontWeight: 400 }}>Single — jedno ożywione zdjęcie</div>
            <div style={{ fontSize: 13, color: 'rgba(245,236,224,0.55)', marginTop: 4 }}>Klip 5 sekund · muzyka · dostawa automatyczna</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
            <div style={{ fontFamily: SERIF, fontSize: 48, lineHeight: 1 }}>
              <sup style={{ fontSize: 18, verticalAlign: 'top', marginRight: 4 }}>zł</sup>29
            </div>
            <button style={{
              background: PAL.cream, color: PAL.dark, border: 'none',
              padding: '14px 26px', borderRadius: 8, fontSize: 14, fontWeight: 700,
              cursor: 'pointer', fontFamily: SANS, whiteSpace: 'nowrap',
            }}>Zamów klip →</button>
          </div>
        </div>

        {/* Packages */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
          {pkgs.map((p, i) => (
            <div key={i} style={{
              background: p.hot ? PAL.dark : PAL.bg,
              color: p.hot ? PAL.cream : PAL.ink,
              border: p.hot ? 'none' : `1px solid ${PAL.border}`,
              padding: '36px 26px', borderRadius: 14,
              position: 'relative',
              display: 'flex', flexDirection: 'column',
              boxShadow: p.hot ? '0 16px 40px rgba(26,18,12,0.2)' : 'none',
            }}>
              {p.hot && (
                <div style={{
                  position: 'absolute', top: -12, left: 22,
                  background: PAL.accent, color: PAL.cream,
                  padding: '5px 12px', fontSize: 11, fontWeight: 700,
                  letterSpacing: 1.5, borderRadius: 999,
                }}>NAJPOPULARNIEJSZY</div>
              )}
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 2, opacity: 0.55, marginBottom: 12 }}>PAKIET</div>
              <div style={{ fontFamily: SERIF, fontSize: 32, fontWeight: 400, marginBottom: 4 }}>{p.name}</div>
              <div style={{ fontSize: 13, opacity: 0.65, marginBottom: 24 }}>{p.sub}</div>
              <div style={{ height: 1, background: p.hot ? 'rgba(245,236,224,0.15)' : PAL.border, marginBottom: 20 }} />
              <div style={{ fontFamily: SERIF, fontSize: 52, fontWeight: 400, lineHeight: 1, marginBottom: 4 }}>
                <sup style={{ fontSize: 20, verticalAlign: 'top', marginRight: 4 }}>zł</sup>{p.price}
              </div>
              <div style={{ fontSize: 12, opacity: 0.55, marginBottom: 24 }}>{p.per}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 28px', flex: 1, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {features.map((f, j) => (
                  <li key={j} style={{ fontSize: 13.5, display: 'flex', gap: 8, lineHeight: 1.5 }}>
                    <span style={{ color: p.hot ? PAL.accent : PAL.accentDeep, fontWeight: 700 }}>✓</span> {f}
                  </li>
                ))}
              </ul>
              <button style={{
                background: p.hot ? PAL.cream : 'transparent',
                color: p.hot ? PAL.dark : PAL.ink,
                border: p.hot ? 'none' : `1.5px solid ${PAL.ink}`,
                padding: '14px', borderRadius: 8,
                fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: SANS,
              }}>Zamów →</button>
            </div>
          ))}
          {/* Custom */}
          <div style={{
            background: 'transparent', border: `1.5px dashed ${PAL.border}`,
            padding: '36px 26px', borderRadius: 14,
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            justifyContent: 'center', textAlign: 'center', gap: 12,
          }}>
            <div style={{ fontFamily: SERIF, fontSize: 26, fontWeight: 400, color: PAL.ink, lineHeight: 1.15 }}>
              25+ zdjęć<br />lub ślub?
            </div>
            <p style={{ fontSize: 13, color: PAL.muted, lineHeight: 1.6 }}>
              Duże kroniki rodzinne i wesela — wycena indywidualna.
            </p>
            <button style={{
              background: 'transparent', color: PAL.ink,
              border: `1.5px solid ${PAL.ink}`, padding: '11px 22px',
              borderRadius: 8, fontSize: 13, fontWeight: 700, cursor: 'pointer', fontFamily: SANS,
            }}>Napisz do nas →</button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── ADD-ONS ─── */
function AddOns() {
  return (
    <section style={{ padding: '90px 56px', background: PAL.panel }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <Kicker>Dodatki</Kicker>
        <h2 style={{ ...H2, marginBottom: 16 }}>Dodaj <em style={{ color: PAL.accentDeep }}>narrację i lektora</em></h2>
        <p style={{ fontSize: 17, color: PAL.ink2, maxWidth: 560, lineHeight: 1.6, marginBottom: 40 }}>
          Wypełniasz krótki wywiad o bliskiej osobie, my piszemy tekst, profesjonalny lektor czyta go w filmie.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {[
            { name: 'Narracja', desc: 'Piszemy tekst narracji na podstawie Twoich wspomnień. Pojawia się w filmie jako napisy.', price: '+99 zł' },
            { name: 'Lektor',   desc: 'Profesjonalny polski głos czyta tekst w filmie. Możesz też napisać własny scenariusz.', price: '+199 zł' },
          ].map((a, i) => (
            <div key={i} style={{
              background: PAL.cream, padding: '32px 32px', borderRadius: 14,
              border: `1px solid ${PAL.border}`,
              display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 24,
            }}>
              <div>
                <div style={{ fontFamily: SERIF, fontSize: 28, fontWeight: 400, marginBottom: 10, color: PAL.ink }}>{a.name}</div>
                <p style={{ fontSize: 14, color: PAL.ink2, lineHeight: 1.6, maxWidth: 320 }}>{a.desc}</p>
              </div>
              <div style={{ fontFamily: SERIF, fontSize: 36, color: PAL.ink, whiteSpace: 'nowrap' }}>{a.price}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── REVIEWS ─── */
function Reviews() {
  const reviews = [
    { stars: 5, text: 'Zamówiłam film na 90. urodziny babci Emilii. Kiedy go zobaczyła, płakała ze wzruszenia. Byłam w szoku jak pięknie wyszedł — zdjęcia z lat 50. wyglądają jak nowe.', name: 'Asia', sub: 'Pakiet Saga · 90. urodziny' },
    { stars: 5, text: 'Wszystkie zdjęcia są stare, część podniszczona. Mimo to film wyszedł przepięknie. Kontakt szybki, realizacja sprawna. Polecam z całego serca.', name: 'Marcin', sub: 'Pakiet Rodzinny · Jubileusz' },
    { stars: 5, text: 'Idealny pomysł na prezent kiedy nie wiesz co kupić. Tata płakał. Zdecydowanie wrócimy z większym pakietem na rocznicę ślubu rodziców.', name: 'Kasia W.', sub: 'Pakiet Wspomnienie · Prezent' },
  ];
  return (
    <section style={{ padding: '110px 56px', background: PAL.bg }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 48, gap: 40, flexWrap: 'wrap' }}>
          <div>
            <Kicker>Opinie</Kicker>
            <h2 style={H2}>Co mówią <em style={{ color: PAL.accentDeep }}>klienci</em></h2>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <div style={{ fontFamily: SERIF, fontSize: 56, color: PAL.ink, lineHeight: 1 }}>4.9<span style={{ fontSize: 24, color: PAL.muted }}>/5</span></div>
            <div>
              <div style={{ color: PAL.accent, fontSize: 18, letterSpacing: 2 }}>★★★★★</div>
              <div style={{ fontSize: 13, color: PAL.muted, marginTop: 4 }}>na podstawie 800+ zamówień</div>
            </div>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {reviews.map((r, i) => (
            <div key={i} style={{ background: PAL.cream, padding: '32px 30px', borderRadius: 14, border: `1px solid ${PAL.border}` }}>
              <div style={{ color: PAL.accent, fontSize: 16, letterSpacing: 2, marginBottom: 18 }}>{'★'.repeat(r.stars)}</div>
              <p style={{ fontFamily: SERIF, fontSize: 19, fontStyle: 'italic', color: PAL.ink, lineHeight: 1.5, marginBottom: 28 }}>"{r.text}"</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                  width: 42, height: 42, borderRadius: '50%',
                  background: PAL.panel, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: SERIF, fontSize: 20, color: PAL.accentDeep,
                }}>{r.name[0]}</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: PAL.ink }}>{r.name}</div>
                  <div style={{ fontSize: 12, color: PAL.muted }}>{r.sub}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── PRIVACY / RODO ─── */
function Privacy() {
  return (
    <section style={{ padding: '90px 56px', background: PAL.dark, color: PAL.cream }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 3, color: PAL.accent, marginBottom: 14, textTransform: 'uppercase' }}>Prywatność · RODO</div>
            <h2 style={{ fontFamily: SERIF, fontSize: 48, fontWeight: 400, lineHeight: 1.05, letterSpacing: -0.8, color: PAL.cream }}>
              Wasze zdjęcia są <em style={{ color: PAL.accent }}>bezpieczne.</em>
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
            {[
              { t: 'Tylko na czas realizacji', d: 'Zdjęcia trzymamy w chmurze tylko do momentu wysłania filmu. Potem są usuwane.' },
              { t: 'Nie trenujemy AI', d: 'Twoje zdjęcia nie trafiają do żadnych zbiorów treningowych. Nigdy.' },
              { t: 'Szyfrowane przesyłanie', d: 'Upload przez HTTPS, panel chroniony hasłem, tylko Ty masz dostęp.' },
              { t: 'Zgodnie z RODO', d: 'Polski podmiot. Dane w UE. Pełne prawo do usunięcia w każdej chwili.' },
            ].map((p, i) => (
              <div key={i}>
                <div style={{ fontFamily: SERIF, fontSize: 20, fontWeight: 400, color: PAL.cream, marginBottom: 8 }}>{p.t}</div>
                <p style={{ fontSize: 14, color: 'rgba(245,236,224,0.6)', lineHeight: 1.6 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── FAQ ─── */
function FAQ() {
  const items = [
    { q: 'Jakie zdjęcia mogę wgrać?', a: 'Dowolne — skanowane, z telefonu, stare i podniszczone. Restaurujemy i poprawiamy jakość zdjęć w cenie każdego pakietu.' },
    { q: 'Jak długo trwa realizacja?', a: '48 godzin od wgrania zdjęć. Single (29 zł) jest dostarczany automatycznie — szybciej. Przy dużych zamówieniach uzgadniamy termin.' },
    { q: 'Gdzie trafiają moje zdjęcia?', a: 'Tylko do nas, tylko na czas realizacji. Nie udostępniamy ich nikomu, nie używamy do trenowania AI, nie przechowujemy po dostarczeniu filmu.' },
    { q: 'Czy mogę zobaczyć przykładowy film?', a: 'Napisz do nas na hello@ozywspomnienia.pl — wyślemy przykład. Każdy film jest unikalny.' },
    { q: 'Co jeśli film mi się nie spodoba?', a: 'Napisz do nas. Możemy poprawić elementy które nie spełniają oczekiwań. Zależy nam żebyś był/była zadowolona.' },
    { q: 'Jak zamówić narrację i lektora?', a: 'Przy zamówieniu napisz że chcesz dodać narrację (+99 zł) lub lektora (+199 zł). W formularzu po zakupie wypełniasz krótki wywiad.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ padding: '110px 56px', background: PAL.cream }}>
      <div style={{ maxWidth: 820, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <Kicker centered>Pytania</Kicker>
          <h2 style={{ ...H2, textAlign: 'center' }}>Zanim zamówisz</h2>
        </div>
        <div style={{ borderTop: `1px solid ${PAL.border}` }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderBottom: `1px solid ${PAL.border}` }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', textAlign: 'left', background: 'none', border: 'none',
                cursor: 'pointer', padding: '24px 0',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20,
                fontSize: 18, fontWeight: 500, color: PAL.ink, fontFamily: SANS,
              }}>
                <span>{it.q}</span>
                <span style={{
                  fontSize: 22, color: PAL.accent, transition: 'transform .25s',
                  transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                }}>+</span>
              </button>
              {open === i && (
                <div style={{ fontSize: 15, color: PAL.ink2, lineHeight: 1.7, paddingBottom: 24, maxWidth: 680 }}>
                  {it.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── FINAL CTA ─── */
function FinalCTA() {
  return (
    <section style={{ padding: '110px 56px', background: PAL.dark, color: PAL.cream, textAlign: 'center' }}>
      <div style={{ maxWidth: 720, margin: '0 auto' }}>
        <Kicker centered light>Gotowy?</Kicker>
        <h2 style={{ fontFamily: SERIF, fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 400, lineHeight: 1.05, letterSpacing: -1, color: PAL.cream, marginBottom: 20 }}>
          Zatrzymaj ich twarz.<br /><em style={{ color: PAL.accent }}>Zanim zdjęcia zbladną.</em>
        </h2>
        <p style={{ fontSize: 17, color: 'rgba(245,236,224,0.65)', maxWidth: 520, margin: '0 auto 40px', lineHeight: 1.6 }}>
          Film ze starych zdjęć — prezent, który wzrusza do łez. Od 179 zł, gotowy w 48h.
        </p>
        <button style={{
          background: PAL.cream, color: PAL.dark, border: 'none',
          padding: '20px 48px', borderRadius: 8, fontSize: 16, fontWeight: 700, cursor: 'pointer', fontFamily: SANS,
        }}>Zamów film teraz →</button>
      </div>
    </section>
  );
}

/* ─── FOOTER ─── */
function Footer() {
  return (
    <footer style={{ padding: '48px 56px', background: PAL.bg, borderTop: `1px solid ${PAL.border}`, fontFamily: SANS }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18 }}>
        <div style={{ fontFamily: SERIF, fontSize: 22, fontWeight: 400, color: PAL.ink, display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: PAL.accent }} />
          Ożywione Wspomnienia
        </div>
        <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap', justifyContent: 'center', fontSize: 14 }}>
          {['Jak to działa', 'Pakiety', 'Opinie', 'FAQ', 'hello@ozywspomnienia.pl'].map(l => (
            <span key={l} style={{ color: PAL.muted, cursor: 'pointer' }}>{l}</span>
          ))}
        </div>
        <div style={{ fontSize: 12, color: PAL.muted }}>
          © 2026 Ożywione Wspomnienia · <span style={{ color: PAL.ink2 }}>Polityka Prywatności</span>
        </div>
      </div>
    </footer>
  );
}

/* ─── helpers ─── */
const H2 = {
  fontFamily: SERIF,
  fontSize: 'clamp(38px, 4.5vw, 60px)',
  fontWeight: 400,
  lineHeight: 1.05,
  letterSpacing: -1,
  color: PAL.ink,
  margin: 0,
};

function Kicker({ children, centered, light }) {
  return (
    <div style={{
      fontSize: 11, fontWeight: 700, letterSpacing: 3,
      color: light ? PAL.accent : PAL.accentDeep,
      textTransform: 'uppercase',
      marginBottom: 18,
      textAlign: centered ? 'center' : 'left',
    }}>{children}</div>
  );
}

window.PageSections = PageSections;