// mapemedia — shared subpage sections: compact PageHero + closing CTA band.

const PageHero = ({ eyebrow, title, intro, kicker, flag }) =>
<section style={{ position: 'relative', background: 'var(--surface-dark)', color: '#fff', padding: '156px 48px 88px', overflow: 'hidden' }}>
    <CopperRings size={520} opacity={0.10} style={{ top: -160, right: -120 }} />
    <CopperRings size={280} opacity={0.06} style={{ bottom: -80, right: 120 }} />
    <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', fontFamily: "serif" }}>
      <div style={{ maxWidth: 780, display: 'flex', flexDirection: 'column', gap: 22 }}>
        {eyebrow ? <SectionEyebrow>{eyebrow}</SectionEyebrow> : null}
        {flag ? <span style={{ alignSelf: 'flex-start', fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 500, letterSpacing: '.2em', textTransform: 'uppercase', color: '#fff', background: 'var(--primary)', padding: '7px 14px' }}>{flag}</span> : null}
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(40px,5vw,64px)', lineHeight: 1.05, letterSpacing: 0, margin: 0, color: "rgb(255, 255, 255)" }}
      dangerouslySetInnerHTML={{ __html: title }}></h1>
        {kicker ? <p style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontStyle: 'italic', fontSize: 18, lineHeight: 1.4, color: 'rgba(255,255,255,.5)', margin: 0 }}>{kicker}</p> : null}
        {intro ? <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 15, lineHeight: 1.75, color: 'rgba(255,255,255,.6)', margin: 0, maxWidth: 600 }}>{intro}</p> : null}
      </div>
    </div>
  </section>;


const CTABand = ({ title = "Lassen Sie uns über <em>Ihr Projekt</em> sprechen.", sub = "30-Minuten-Call. Keine Verpflichtung." }) =>
<section style={{ position: 'relative', background: 'var(--surface-dark)', padding: '120px 48px', textAlign: 'center', color: '#fff', overflow: 'hidden' }}>
    <CopperRings size={800} opacity={0.08} style={{ left: '50%', top: '50%', transform: 'translate(-50%,-50%)' }} />
    <CopperRings size={500} opacity={0.05} style={{ left: '50%', top: '50%', transform: 'translate(-50%,-50%)' }} />
    <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22, maxWidth: 820, margin: '0 auto' }}>
      <SectionEyebrow>Kontakt</SectionEyebrow>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(36px,5vw,56px)', lineHeight: 1.1, margin: 0, color: '#fff' }}
    dangerouslySetInnerHTML={{ __html: title }} />
      <p style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontStyle: 'italic', fontSize: 18, lineHeight: 1.4, color: 'rgba(255,255,255,.4)', margin: 0 }}>{sub}</p>
      <div style={{ marginTop: 12 }}>
        <Button variant="primary" href="contact.html">Projekt besprechen</Button>
      </div>
    </div>
  </section>;


// Minimal Tweaks panel for subpages — keeps global accent + headline font tweakable.
function SubpageTweaks({ defaults }) {
  const [t, setTweak] = useTweaks(defaults);
  React.useEffect(() => {persistGlobalTweaks({ accent: t.accent, headlineFont: t.headlineFont });}, [t.accent, t.headlineFont]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Marke" />
      <TweakColor label="Akzentfarbe" value={t.accent}
      options={['#B87333', '#3d7a82', '#8A5520', '#5E6B73', '#9E6B4A']}
      onChange={(v) => setTweak('accent', v)} />
      <TweakSelect label="Headline-Schrift" value={t.headlineFont}
      options={[
      { value: '"Cormorant Garamond", Georgia, serif', label: 'Cormorant Garamond' },
      { value: '"Tiempos Headline", Georgia, serif', label: 'Tiempos / Georgia' },
      { value: 'Georgia, "Times New Roman", serif', label: 'Georgia' },
      { value: '"DM Sans", system-ui, sans-serif', label: 'DM Sans (Sans)' }]
      }
      onChange={(v) => setTweak('headlineFont', v)} />
    </TweaksPanel>);

}

Object.assign(window, { PageHero, CTABand, SubpageTweaks });