// mapemedia — homepage hero with three variants: dark (default), light, image.

// "*word*" → copper italic highlight.
function highlightCopper(str) {
  const parts = String(str).split(/\*([^*]+)\*/g);
  return parts.map((p, i) => i % 2 === 1 ?
  <em key={i} style={{ fontStyle: 'italic', color: 'var(--primary)', fontFamily: 'var(--font-display)', lineHeight: 1.3 }}>{p}</em> :
  <React.Fragment key={i}>{p}</React.Fragment>);
}

const TrustPill = ({ dark }) =>
<span style={{
  background: dark ? 'rgba(255,255,255,.04)' : 'var(--surface-card)',
  border: dark ? '.5px solid rgba(255,255,255,.08)' : '.5px solid var(--hairline-color)',
  padding: '8px 16px', display: 'inline-flex', alignItems: 'center', gap: 10, width: 'fit-content'
}}>
    <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--success)' }} />
    <span style={{
    fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 500, letterSpacing: '.22em',
    textTransform: 'uppercase', color: dark ? 'rgba(255,255,255,.5)' : 'var(--muted)'
  }}>GESTALTUNG MIT KONZEPT. KI MIT PRÄZISION.</span>
  </span>;


const HeroStat = ({ value, label, dark }) =>
<div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'center', textAlign: 'center' }}>
    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 300, lineHeight: 1, color: 'var(--primary)', fontSize: "40px" }}>{value}</div>
    <div style={{ fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 500, letterSpacing: '.22em', textTransform: 'uppercase', color: dark ? 'rgba(255,255,255,.7)' : 'var(--ink)' }}>{label}</div>
  </div>;


const STATS = [
{ value: '12+', label: 'Jahre Erfahrung' },
{ value: '4K', label: 'Druck & präsentationsfähig' },
{ value: 'Hybrid', label: 'KI & Realfilm' }];


const HomeHero = ({ variant = 'dark', headline, sub }) => {
  const dark = variant !== 'light';

  // Image variant: full-bleed image-slot background + scrim.
  if (variant === 'image') {
    return (
      <section id="top" style={{ position: 'relative', minHeight: '100vh', overflow: 'hidden', display: 'flex', alignItems: 'flex-end', color: '#fff' }}>
        <image-slot id="home-hero-bg" shape="rect" fit="cover"
        placeholder="Hero-Render ablegen (Architektur / Produkt)"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}></image-slot>
        <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,26,26,.55) 0%, rgba(26,26,26,.35) 40%, rgba(26,26,26,.92) 100%)' }} />
        <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', width: '100%', padding: '0 48px 88px' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22, alignItems: 'flex-start', maxWidth: 720 }}>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(42px,5.5vw,72px)', lineHeight: 1.04, letterSpacing: 0, color: '#fff', margin: 0 }}>
              {highlightCopper(headline)}
            </h1>
            <p style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontStyle: 'italic', fontSize: 19, lineHeight: 1.4, color: 'rgba(255,255,255,.7)', margin: 0 }}>
              Gestaltung mit Konzept. KI mit Präzision.
            </p>
            <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 15, lineHeight: 1.75, color: 'rgba(255,255,255,.8)', maxWidth: 540, margin: '4px 0 8px' }}>{sub}</p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <Button variant="primary" href="contact.html">Projekt besprechen</Button>
              <Button variant="ghost" href="#leistungen">Leistungen ansehen</Button>
            </div>
          </div>
        </div>
      </section>);

  }

  // Dark / light editorial variants — centered single column.
  return (
    <section id="top" style={{
      position: 'relative', background: dark ? 'var(--surface-dark)' : 'var(--canvas)',
      color: dark ? '#fff' : 'var(--ink)', padding: '120px 48px 72px', minHeight: '100vh',
      overflow: 'hidden', display: 'flex', flexDirection: 'column',
      borderBottom: dark ? 'none' : '.5px solid var(--hairline-color)'
    }}>
      <div style={{
        position: 'relative', flex: 1, maxWidth: 880, margin: '0 auto', width: '100%',
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        textAlign: 'center', gap: 26
      }}>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, letterSpacing: 0, color: dark ? '#fff' : 'var(--ink)', margin: 0, fontSize: 'clamp(34px,4.6vw,52px)', lineHeight: 1.12, maxWidth: '100%', textWrap: 'balance' }}>
          {highlightCopper(headline)}
        </h1>
        <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 15, lineHeight: 1.8, color: dark ? 'rgba(255,255,255,.6)' : 'var(--body)', maxWidth: 620, margin: 0 }}>{sub}</p>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center', marginTop: 4 }}>
          <Button variant="primary" href="contact.html">Projekt besprechen</Button>
          <Button variant={dark ? 'ghost' : 'ghostDark'} href="#leistungen">Leistungen ansehen</Button>
        </div>
      </div>

      <div style={{
        position: 'relative', maxWidth: 760, margin: '48px auto 0', width: '100%',
        paddingTop: 40, borderTop: dark ? '.5px solid rgba(255,255,255,.08)' : '.5px solid var(--hairline-color)',
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32
      }}>
        {STATS.map((s) => <HeroStat key={s.label} {...s} dark={dark} />)}
      </div>
    </section>);

};

Object.assign(window, { HomeHero, highlightCopper });