// mapemedia homepage — part B: gallery, before/after slider, testimonials, tools, about-CTA.

// ── Gallery ─────────────────────────────────────────────────────────────
const GALLERY = [
{ id: 'gal-1', ratio: '3 / 4', label: 'Interior' },
{ id: 'gal-2', ratio: '4 / 3', label: 'Exterior' },
{ id: 'gal-3', ratio: '4 / 3', label: 'Produkt' },
{ id: 'gal-4', ratio: '3 / 4', label: 'Real Estate' }];

const GallerySection = () =>
<section className="band soft" style={{ paddingBottom: 64 }}>
    <div className="container">
      <SectionHead
      eyebrow="04 — Galerie"
      title="Ein Auszug aus dem <em>Studio</em>."
      intro="Renderings, Stills und Frames aus laufenden Mandaten. Ziehen Sie eigene Arbeiten in die Felder, um die Galerie zu bestücken." />
      <Reveal>
        <div className="gallery-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, alignItems: 'start' }}>
          {GALLERY.map((g) =>
        <div key={g.id} style={{ position: 'relative' }}>
              <image-slot id={g.id} shape="rect" fit="cover" placeholder={`${g.label}`} style={{ width: '100%', aspectRatio: g.ratio, border: '.5px solid var(--hairline-color)' }}></image-slot>
              <span style={{ position: 'absolute', left: 12, bottom: 12, fontFamily: 'var(--font-sans)', fontSize: 9, fontWeight: 500, letterSpacing: '.18em', textTransform: 'uppercase', color: '#fff', background: 'rgba(26,26,26,.7)', padding: '5px 10px' }}>{g.label}</span>
            </div>
        )}
        </div>
      </Reveal>
    </div>
    <style>{`
      @media (max-width: 900px){ .gallery-grid { grid-template-columns: 1fr 1fr !important; } }
    `}</style>
  </section>;


// ── Before / After slider ───────────────────────────────────────────────
const BeforeAfterSlider = () => {
  const [pos, setPos] = React.useState(50);
  const ref = React.useRef(null);
  const dragging = React.useRef(false);

  const setFromClientX = (clientX) => {
    const el = ref.current;if (!el) return;
    const r = el.getBoundingClientRect();
    const p = (clientX - r.left) / r.width * 100;
    setPos(Math.max(0, Math.min(100, p)));
  };
  React.useEffect(() => {
    const move = (e) => {if (dragging.current) setFromClientX(e.touches ? e.touches[0].clientX : e.clientX);};
    const up = () => {dragging.current = false;};
    window.addEventListener('mousemove', move);window.addEventListener('mouseup', up);
    window.addEventListener('touchmove', move, { passive: false });window.addEventListener('touchend', up);
    return () => {window.removeEventListener('mousemove', move);window.removeEventListener('mouseup', up);window.removeEventListener('touchmove', move);window.removeEventListener('touchend', up);};
  }, []);

  return (
    <section className="band canvas">
      <div className="container">
        <SectionHead
          eyebrow="04 — Vorher / Nachher"
          title="Aus <em>Bestand</em> wird Verkaufsbild."
          intro="Ziehen Sie den Regler. Links die Ausgangsaufnahme, rechts das fertige mapemedia-Ergebnis." />
        <Reveal>
          <div ref={ref}
          onMouseDown={(e) => {dragging.current = true;setFromClientX(e.clientX);}}
          onTouchStart={(e) => {dragging.current = true;setFromClientX(e.touches[0].clientX);}}
          style={{ position: 'relative', width: '100%', aspectRatio: '16 / 9', overflow: 'hidden', border: '.5px solid var(--hairline-color)', cursor: 'ew-resize', userSelect: 'none', background: 'var(--surface-warm-grey)' }}>
            {/* After (base, full) */}
            <img src="mapemedia/assets/ref/ba-after.png" alt="Nachher — fertiges Render" draggable="false" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
            {/* Before (overlay, clipped to left of slider) */}
            <div style={{ position: 'absolute', inset: 0, clipPath: `inset(0 ${100 - pos}% 0 0)` }}>
              <img src="mapemedia/assets/ref/ba-before.png" alt="Vorher — Ausgangsmodell" draggable="false" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            {/* Labels */}
            <span style={baLabel('left')}>Vorher</span>
            <span style={baLabel('right')}>Nachher</span>
            {/* Handle */}
            <div style={{ position: 'absolute', top: 0, bottom: 0, left: `${pos}%`, width: 2, background: 'var(--primary)', transform: 'translateX(-1px)' }}>
              <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 40, height: 40, borderRadius: '50%', background: 'var(--primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 14, letterSpacing: '-.05em' }}>‹›</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

};
const baLabel = (side) => ({
  position: 'absolute', top: 16, [side]: 16,
  fontFamily: 'var(--font-sans)', fontSize: 9, fontWeight: 500, letterSpacing: '.2em', textTransform: 'uppercase',
  color: side === 'right' ? 'var(--primary)' : '#fff', background: 'rgba(26,26,26,.7)', padding: '6px 12px', zIndex: 2
});

// ── Testimonials (dark, 4-up) ───────────────────────────────────────────
const TestimonialCard = ({ quote, initials, name, company }) =>
<div style={{ background: 'var(--surface-dark-elevated)', border: '.5px solid rgba(255,255,255,.06)', padding: '28px 26px', display: 'flex', flexDirection: 'column', gap: 16 }}>
    <div style={{ color: 'var(--primary)', fontSize: 13, letterSpacing: '.1em' }}>{'★★★★★'}</div>
    <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontStyle: 'italic', fontSize: 13.5, lineHeight: 1.7, color: 'rgba(255,255,255,.75)', margin: 0, flex: 1 }}>„{quote}"</p>
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 16, borderTop: '.5px solid rgba(255,255,255,.08)' }}>
      <div style={{ width: 34, height: 34, borderRadius: '50%', background: 'rgba(184,115,51,.15)', color: 'var(--primary)', fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 12, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{initials}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 500, color: '#fff' }}>{name}</div>
        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 300, color: 'rgba(255,255,255,.4)' }}>{company}</div>
      </div>
    </div>
  </div>;


const TestimonialsSection = () => {
  const items = [
  { quote: 'Das von mapemedia erstellte Video hat die geplante Küche sehr hochwertig und realistisch dargestellt, obwohl sie so noch gar nicht existiert. So konnte dem Kunden die spätere Ausführung richtig gut und überzeugend gezeigt werden.', initials: 'BE', name: 'Benno Ewert', company: 'Projektleitung | Kuhn Design' },
  { quote: 'Die erstellten Visualisierungen haben die komplexe Material- und Möblierungssituation des Projekts sehr realistisch und hochwertig dargestellt. Dadurch konnte dem Kunden die geplante Ausführung anschaulich und überzeugend vermittelt werden.', initials: 'JB', name: 'Jordi Barcelo', company: 'Barcelo Baumann Architekten' },
  { quote: 'Die von mapemedia erstellten, kundenspezifischen Renderings haben unsere Immobilie sehr hochwertig und realistisch dargestellt. Die Visualisierungen unterstützen die Vermarktung optimal und vermitteln einen überzeugenden Eindruck der Raumqualität.', initials: 'CT', name: 'Christian Tscheulin', company: 'Tscheulin Architekten' },
  { quote: 'Ehrliche Beratung, klare Timings, fotoreales Ergebnis. Dass KI im Spiel ist, merkt man den Bildern nicht an.', initials: 'MB', name: 'Manuel Beuck', company: 'Privatkunde' }];

  return (
    <section className="band dark" style={{ borderTop: '.5px solid rgba(255,255,255,.08)' }}>
      <div className="container">
        <SectionHead
          eyebrow="04 — Stimmen"
          title="Feedback meiner <em>Kunden</em>."
          intro="Auszüge aus laufenden und abgeschlossenen Mandaten in Architektur, Immobilien und Produkt." />
        <Reveal>
          <div className="testi-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {items.map((t, i) => <TestimonialCard key={i} {...t} />)}
          </div>
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 1100px){ .testi-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 600px){ .testi-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>);

};

// ── Tools band (deep dark marquee) ──────────────────────────────────────
const ToolsBand = () => {
  const tools = ['Kling', 'Grok', 'Claude', 'Seedance', 'Google Veo', 'Gemini', 'GPT', 'Adobe Creative Suite', 'Magnific'];
  return (
    <section className="band deep" aria-label="Tools">
      <div style={{ fontFamily: 'var(--font-sans)', fontSize: 9, fontWeight: 500, letterSpacing: '.22em', textTransform: 'uppercase', color: 'rgba(255,255,255,.2)', textAlign: 'center', marginBottom: 24 }}>— TOOLS, MIT DENEN ICH ARBEITE —

      </div>
      <div style={{ overflow: 'hidden', maskImage: 'linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%)' }}>
        <MarqueeTrack duration={26} items={tools.map((t, i) =>
        <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 80, fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 300, letterSpacing: '.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,.32)', whiteSpace: 'nowrap' }}>
            {t}<span style={{ color: 'var(--primary)' }}>·</span>
          </span>
        )} />
      </div>
    </section>);

};

// ── About / CTA band ────────────────────────────────────────────────────
const AboutStat = ({ value, label }) =>
<div>
    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 36, lineHeight: 1, color: 'var(--primary)' }}>{value}</div>
    <div style={{ fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 500, letterSpacing: '.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,.5)', marginTop: 8 }}>{label}</div>
  </div>;


const AboutCTA = () =>
<section className="band dark" style={{ position: 'relative', overflow: 'hidden' }}>
    <CopperRings size={560} opacity={0.08} style={{ right: -180, top: -140 }} />
    <div className="container" style={{ position: 'relative' }}>
      <div className="aboutcta-layout" style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 72, alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'flex-start' }}>
          <SectionEyebrow>05 — Über das Studio</SectionEyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(34px,4.5vw,52px)', lineHeight: 1.08, margin: 0, color: "rgb(184, 115, 51)" }}>
            <span style={{ color: '#ffffff' }}>Marketing für die </span><em style={{ fontStyle: 'italic', color: 'var(--primary)' }}>
gebaute Welt</em>.
          </h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 15, lineHeight: 1.75, color: 'rgba(255,255,255,.6)', margin: 0, maxWidth: 520 }}>
            mapemedia unterstützt Unternehmen aus Bau, Architektur, Immobilien und Produktentwicklung dabei, ihre Projekte visuell stark und professionell zu vermarkten.
          </p>
          <div className="aboutcta-stats" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40, margin: '8px 0 4px' }}>
            <AboutStat value="12+" label="Jahre Erfahrung" />
            <AboutStat value="3–7 Tage" label="Lieferzeit" />
            <AboutStat value="Hybrid" label="KI & Realfilm" />
          </div>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <Button variant="primary" href="contact.html">Projekt besprechen</Button>
            <Button variant="ghost" href="about.html">Mehr über mich</Button>
          </div>
        </div>

        <div style={{ position: 'relative', justifySelf: 'center' }}>
          <div aria-hidden style={{ position: 'absolute', inset: 0, transform: 'translate(16px,16px)', border: '.5px solid rgba(184,115,51,.25)', pointerEvents: 'none' }} />
          <div style={{ position: 'relative', background: 'rgba(255,255,255,.04)', border: '.5px solid rgba(255,255,255,.08)', padding: '0 0 24px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0, width: 300, overflow: 'hidden' }}>
            <img src="mapemedia/assets/ref/marco-portrait.png?v=3" alt="Marco Pendt" style={{ width: '88%', height: 'auto', display: 'block', objectFit: 'contain', marginTop: 8 }} />
            <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 4, marginTop: 20 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 22, color: '#fff' }}>Marco Pendt</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 9, fontWeight: 500, letterSpacing: '.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,.4)' }}>Gründer · mapemedia</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 900px){
        .aboutcta-layout { grid-template-columns: 1fr !important; gap: 40px !important; }
        .aboutcta-stats { gap: 24px !important; }
      }
    `}</style>
  </section>;

Object.assign(window, { GallerySection, BeforeAfterSlider, TestimonialsSection, TestimonialCard, ToolsBand, AboutCTA, AboutStat });