// mapemedia homepage — part A: trust band, why-grid, case-study preview, services.

// ── Trust band ────────────────────────────────────────────────────────
const TrustLogos = () =>
<section className="band canvas" style={{ paddingTop: 56, paddingBottom: 56 }}>
    <div className="container">
      <div className="trust-row" style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 48, alignItems: 'center' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 500, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--muted)' }}>PROJEKTE · KUNDEN

        </div>
        </div>
        <div className="trust-logos" style={{
        display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 240px))', gap: 1, justifyContent: 'start',
        background: 'var(--hairline-color)', border: '.5px solid var(--hairline-color)', width: 'fit-content'
      }}>
          <div style={logoCellStyle}>
            <img src="mapemedia/assets/tscheulin-architekten.png" alt="Tscheulin Architekten" style={{ maxWidth: '64%', maxHeight: 64, width: 'auto', height: 'auto', objectFit: 'contain' }} />
          </div>
          <div style={logoCellStyle}>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 600, color: 'var(--body-strong)', letterSpacing: '.02em', textAlign: 'center', lineHeight: 1.2 }}>Barcelo Baumann<br /><span style={{ fontSize: 10, fontWeight: 500, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--muted-soft)' }}>Architekten</span></span>
          </div>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 900px){
        .trust-row { grid-template-columns: 1fr !important; gap: 24px !important; }
        .trust-logos { grid-template-columns: repeat(2, 1fr) !important; }
      }
    `}</style>
  </section>;

const logoCellStyle = {
  background: '#fff', minHeight: 96, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px'
};

// ── Why mapemedia — left intro + 2x2 cards ──────────────────────────────
const WhyCard = ({ num, title, desc }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{
      position: 'relative', background: hover ? 'var(--surface-card)' : 'var(--canvas)',
      padding: '36px 32px', border: '.5px solid var(--hairline-color)',
      transition: 'background .25s', overflow: 'hidden'
    }}>
      <span aria-hidden style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 2, background: 'var(--primary)', transform: hover ? 'scaleX(1)' : 'scaleX(0)', transformOrigin: 'left', transition: 'transform .3s' }} />
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 44, lineHeight: 1, color: 'rgba(184,115,51,.15)', marginBottom: 16 }}>{num}</div>
      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 20, lineHeight: 1.3, color: 'var(--ink)', margin: '0 0 10px' }}>{title}</h3>
      <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 13, lineHeight: 1.7, color: 'var(--muted)', margin: 0 }}>{desc}</p>
    </div>);

};

const WhySection = () => {
  const cards = [
  { num: '01', title: 'Branding für Bau & Immobilien', desc: 'Corporate Design, Logo, Website, Flyer und Exposé — alles konsistent gedacht und gestaltet.' },
  { num: '02', title: 'Visualisierung vor dem Bau', desc: 'Fotorealistische Bilder und Videos machen Projekte schon vor Baubeginn sichtbar und vermarktbar.' },
  { num: '03', title: 'Foto & Film für Immobilien', desc: 'Hochwertige Immobilienfotografie und Filmaufnahmen für eine starke Präsentation bestehender Objekte.' },
  { num: '04', title: 'Produktvisualisierung in Bild & Film', desc: 'Produkte werden fotorealistisch inszeniert — für Marketing, Vertrieb und Kampagnen.' }];

  return (
    <section className="band canvas">
      <div className="container">
        <div className="why-layout" style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 64, alignItems: 'start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22, position: 'sticky', top: 100 }}>
            <SectionEyebrow>03 — Warum mapemedia</SectionEyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(30px,3.4vw,42px)', lineHeight: 1.12, margin: 0, color: 'var(--ink)' }}>
              Vier Leistungen, ein <em style={{ fontStyle: 'italic', color: 'var(--primary)' }}>Auftritt</em>.
            </h2>
            <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 15, lineHeight: 1.75, color: 'var(--body)', margin: 0, maxWidth: 340 }}>Von Branding über Visualisierung bis Foto und Film entstehen alle Medien aus einem Guss — abgestimmt auf Bau, Architektur, Immobilien und Produkte. So wird aus einem Projekt nicht nur ein gutes Bild, sondern ein starker Auftritt.
            </p>
            <Button variant="ghostDark" href="contact.html">Angebot anfordern</Button>
          </div>
          <Reveal>
            <div className="why-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, marginLeft: -0.5 }}>
              {cards.map((c) => <WhyCard key={c.num} {...c} />)}
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){
          .why-layout { grid-template-columns: 1fr !important; gap: 40px !important; }
          .why-layout > div:first-child { position: static !important; }
          .why-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>);

};

// ── Case-study preview (dark, list + feature image) ─────────────────────
const CASE_ITEMS = [
{ title: 'Tscheulin Architekten', tag: 'Neubau-Vermarktung', img: 'mapemedia/assets/ref/case-tscheulin.png' },
{ title: 'Barcelo Baumann Architekten', tag: 'Kunden-Visualisierung', img: 'mapemedia/assets/ref/case-barcelo.png' },
{ title: 'Kuhn Design', tag: 'Produkt-Video', video: 'mapemedia/assets/ref/kuhn-design.mp4' },
{ title: 'Tinyhouse', tag: 'Immobilien-Video', video: 'mapemedia/assets/ref/tinyhouse-casestudy.mp4' }];


const CasePreview = () => {
  const [active, setActive] = React.useState(0);
  return (
    <section className="band dark" style={{ position: 'relative', overflow: 'hidden', background: 'var(--surface-dark-deep)', borderTop: '.5px solid rgba(255,255,255,.08)' }}>
      <CopperRings size={520} opacity={0.06} style={{ left: -160, bottom: -160 }} />
      <div className="container" style={{ position: 'relative' }}>
        <div className="case-layout" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64, alignItems: 'center' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
            <SectionEyebrow>02 — Case Studies</SectionEyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(32px,4vw,48px)', lineHeight: 1.1, margin: 0, color: '#fff' }}>
              Entdecke meine <em style={{ fontStyle: 'italic', color: 'var(--primary)' }}>Arbeiten</em>.
            </h2>
            <div style={{ borderTop: '.5px solid rgba(255,255,255,.08)' }}>
              {CASE_ITEMS.map((c, i) =>
              <button key={c.title} onClick={() => setActive(i)} style={{
                all: 'unset', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                width: '100%', padding: '20px 0', borderBottom: '.5px solid rgba(255,255,255,.08)',
                background: active === i ? 'transparent' : 'transparent'
              }}
              onMouseEnter={(e) => {if (active !== i) e.currentTarget.querySelector('.c-title').style.color = 'rgba(255,255,255,.9)';}}
              onMouseLeave={(e) => {if (active !== i) e.currentTarget.querySelector('.c-title').style.color = 'rgba(255,255,255,.5)';}}>
                
                  <span style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                    <span className="c-title" style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 22, color: active === i ? '#fff' : 'rgba(255,255,255,.5)', transition: 'color .2s' }}>{c.title}</span>
                    <span style={{ fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 500, letterSpacing: '.18em', textTransform: 'uppercase', color: active === i ? 'var(--primary)' : 'rgba(255,255,255,.3)' }}>{c.tag}</span>
                  </span>
                  <span aria-hidden style={{ color: active === i ? 'var(--primary)' : 'rgba(255,255,255,.25)', fontSize: 16 }}>{active === i ? '→' : '+'}</span>
                </button>
              )}
            </div>
            <Button variant="primary" href="case-studies.html">Alle Case Studies</Button>
          </div>

          <div style={{ position: 'relative' }}>
            <div aria-hidden style={{ position: 'absolute', inset: 0, transform: 'translate(16px,16px)', border: '.5px solid rgba(184,115,51,.25)', pointerEvents: 'none' }} />
            {CASE_ITEMS[active].video ?
            <video key={CASE_ITEMS[active].video} src={CASE_ITEMS[active].video} autoPlay loop muted playsInline preload="auto"
            ref={(el) => {if (el) {el.muted = true;const p = el.play();if (p && p.catch) p.catch(() => {});}}}
            onCanPlay={(e) => {const p = e.currentTarget.play();if (p && p.catch) p.catch(() => {});}}
            style={{ position: 'relative', display: 'block', width: '100%', height: 'auto', aspectRatio: '4 / 3', objectFit: 'cover', border: '.5px solid rgba(255,255,255,.08)' }} /> :
            <img src={CASE_ITEMS[active].img} alt={CASE_ITEMS[active].title}
            style={{ position: 'relative', display: 'block', width: '100%', height: 'auto', aspectRatio: '4 / 3', objectFit: 'cover', border: '.5px solid rgba(255,255,255,.08)' }} />}
            <AILabel position="tl" />
            <div style={{ position: 'absolute', left: 0, bottom: 0, padding: '16px 20px', background: 'rgba(26,26,26,.82)', backdropFilter: 'blur(4px)', borderTop: '2px solid var(--primary)' }}>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 9, fontWeight: 500, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--primary)' }}>{CASE_ITEMS[active].tag}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 20, color: '#fff', marginTop: 4 }}>{CASE_ITEMS[active].title}</div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){ .case-layout { grid-template-columns: 1fr !important; gap: 40px !important; } }
      `}</style>
    </section>);

};

// ── Services — 4 full-width alternating sections, one per Leistung ───────
const SERVICES = [
{ n: '01', area: 'Branding', title: 'Branding für Bau- und Immobilienprofis', noAI: true,
  img: 'mapemedia/assets/ref/branding-arch.png',
  desc: 'Für Bau-, Architektur-, und Immobilienprofis: Ich unterstütze Sie mit einem Corporate Design – Logo, Webseite und Printmaterial wie Flyer und Exposés — alles aus einem Guss. Ein Auftritt, der über jeden Kanal hinweg dieselbe Sprache spricht.',
  points: ['Corporate Design & Logo', 'Webseite', 'Flyer & Exposés'] },
{ n: '02', area: 'Visualisierung', title: 'Visualisierung vor dem Bau', caseHref: 'case-studies.html#case-tinyhouse',
  loopVideo: 'mapemedia/assets/ref/tinyhouse-casestudy.mp4', loopRatio: '16 / 9',
  desc: 'Fotorealistische Bilder und Videos von Projekten, bevor sie gebaut sind. Mithilfe von Drohnenaufnahmen wird das Projekt in den Kontext gesetzt und bereits vor Baubeginn sichtbar, vermarktbar und überzeugend präsentiert.',
  points: ['Bilder & Videos vor Baubeginn', 'Aus Plan, Skizze oder Briefing', 'Vermarktungsfertig in 4K'] },
{ n: '03', area: 'Fotografie & Film', title: 'Foto- und Videoproduktion von Immobilien', noAI: true,
  img: 'mapemedia/assets/ref/foto-film.png',
  desc: 'Professionelle Bild- und Videoaufnahmen bestehender Immobilien — für eine starke, hochwertige Präsentation. Vom Exposé bis zur Objektseite: Material, das dem Objekt gerecht wird.',
  points: ['Architektur- & Innenaufnahmen', 'Bewegtbild vor Ort', 'Druck- & Web-Dateien'] },
{ n: '04', area: 'Produkt', title: 'Produktvisualisierungen in Bild und Film', caseHref: 'case-studies.html#case-kuhn',
  loopVideo: 'mapemedia/assets/ref/kuhn-design.mp4', loopRatio: '16 / 9',
  desc: 'Fotorealistische Visualisierungen und Videos für Produkte. Ein Asset-Set, das auf allen Kanälen funktioniert — von der Reel-Sekunde bis zur Produktdetailseite.',
  points: ['Fotorealistische Produktbilder', 'Cinematische Produktfilme', 'Für Shop & Social'] }];


const ServiceRow = ({ n, slot, img, compare, video, loopVideo, loopRatio, photoVideo, slotGrid, noAI, area, title, desc, points, caseHref, reverse, dark }) =>
<div className="svc-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72, alignItems: 'center', direction: reverse ? 'rtl' : 'ltr' }}>
    {/* visual */}
    <div style={{ direction: 'ltr', position: 'relative' }}>
      <div aria-hidden style={{ position: 'absolute', inset: 0, transform: reverse ? 'translate(-16px,16px)' : 'translate(16px,16px)', border: `.5px solid ${dark ? 'rgba(184,115,51,.3)' : 'rgba(184,115,51,.25)'}`, pointerEvents: 'none' }} />
      {slotGrid ?
    <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2, background: dark ? 'rgba(255,255,255,.1)' : 'var(--hairline-color)', border: `.5px solid ${dark ? 'rgba(255,255,255,.1)' : 'var(--hairline-color)'}` }}>
          {slotGrid.map((s) =>
      <div key={s.id} style={{ position: 'relative', aspectRatio: '4 / 3', background: dark ? '#1E1E1E' : '#fff' }}>
              <image-slot id={s.id} shape="rect" fit="cover" placeholder={s.label} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}></image-slot>
            </div>
      )}
        </div> :
    photoVideo ?
    <div style={{ position: 'relative' }}>
          <BACompareNode
        dark={dark} ratio="16 / 10" initial={82}
        beforeLabel="Bestandsfotos" afterLabel="Video im Loop ‹ ziehen"
        before={
        <div style={{ position: 'absolute', inset: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr', gap: 2, background: dark ? 'rgba(255,255,255,.1)' : 'var(--hairline-color)' }}>
              {photoVideo.photos.map((src, idx) =>
          <img key={idx} src={src} alt="" draggable="false" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          )}
            </div>
        }
        after={
        <video src={photoVideo.video} autoPlay loop muted playsInline preload="metadata"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        } />
        </div> :
    video ?
    <YTLite id={video} title="Real Estate Video" dark={dark} ratio="16 / 9" /> :
    loopVideo ?
    <LoopVideo src={loopVideo} ratio={loopRatio || '4 / 3'} dark={dark} silent /> :
    compare ?
    <div style={{ position: 'relative' }}><BAWidget beforeSrc={compare.before} afterSrc={compare.after} dark={dark} ratio={compare.ratio || '4 / 3'} /></div> :
    img ?
    <img src={img} alt={title} style={{ position: 'relative', width: '100%', aspectRatio: '4 / 3', objectFit: 'cover', display: 'block', border: `.5px solid ${dark ? 'rgba(255,255,255,.1)' : 'var(--hairline-color)'}` }} /> :
    <image-slot id={slot} shape="rect" fit="cover" placeholder={`${title} — Beispiel ablegen`} style={{ position: 'relative', width: '100%', height: 'auto', aspectRatio: '4 / 3', border: `.5px solid ${dark ? 'rgba(255,255,255,.1)' : 'var(--hairline-color)'}` }}></image-slot>}
      {!noAI && <AILabel position="br" />}
    </div>
    {/* content */}
    <div style={{ direction: 'ltr', display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 40, lineHeight: 1, color: 'rgba(184,115,51,.3)' }}>{n}</span>
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 500, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--primary)' }}>{area}</span>
      </div>
      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(28px,3.4vw,40px)', lineHeight: 1.12, color: dark ? '#fff' : 'var(--ink)', margin: 0 }}>{title}</h3>
      <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 15, lineHeight: 1.75, color: dark ? 'rgba(255,255,255,.6)' : 'var(--body)', margin: 0, maxWidth: 480 }}>{desc}</p>
      <ul style={{ listStyle: 'none', margin: '6px 0 8px', padding: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
        {points.map((p) =>
      <li key={p} style={{ position: 'relative', paddingLeft: 18, fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 14, color: dark ? 'rgba(255,255,255,.7)' : 'var(--body)' }}>
            <span aria-hidden style={{ position: 'absolute', left: 0, top: 8, width: 5, height: 5, borderRadius: '50%', background: 'var(--primary)' }} />
            {p}
          </li>
      )}
      </ul>
      <div style={{ display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap' }}>
        <Button variant="primary" href="contact.html">Projekt besprechen</Button>
        {caseHref && <ServiceCTA href={caseHref}>Referenz ansehen</ServiceCTA>}
      </div>
    </div>
  </div>;


const ServicesSection = () =>
<section id="leistungen">
    {SERVICES.map((s, i) => {
    const odd = i % 2 === 1;
    return (
      <div key={s.n} className={odd ? 'band soft' : 'band canvas'} style={{ paddingTop: i === 0 ? 96 : 64, paddingBottom: 64 }}>
          <div className="container">
            {i === 0 &&
          <SectionHead center
          eyebrow="01 — Leistungen"
          title="Vier Leistungen. <em>Ein</em> Studio."
          intro="Von der Marke über die Visualisierung vor dem Bau bis zu Fotografie, Film und Produktbild — alles aus einer Hand." />}
            <Reveal>
              <ServiceRow {...s} reverse={odd} dark={false} />
            </Reveal>
          </div>
        </div>);

  })}
    <style>{`
      @media (max-width: 900px){
        .svc-row { grid-template-columns: 1fr !important; gap: 32px !important; direction: ltr !important; }
      }
    `}</style>
  </section>;


Object.assign(window, { TrustLogos, WhySection, CasePreview, ServicesSection, ServiceRow, WhyCard });