// mapemedia — Angebot: Immobilien-/Geschäftsvideo aus vorhandenen Fotos.

const ANGEBOT_SHOTS = [
{ src: 'mapemedia/assets/angebot/ansicht-vorne.jpg', label: 'Außenansicht & Terrasse', wide: true },
{ src: 'mapemedia/assets/angebot/pool.png', label: 'Poolbereich' },
{ src: 'mapemedia/assets/angebot/blaue-stunde.png', label: 'Blaue Stunde' },
{ src: 'mapemedia/assets/angebot/schlafzimmer.png', label: 'Schlafzimmer' },
{ src: 'mapemedia/assets/angebot/draufsicht.jpg', label: 'Vogelperspektive' },
{ src: 'mapemedia/assets/angebot/detail-pool.png', label: 'Detail — Pool' },
{ src: 'mapemedia/assets/angebot/detail-textil.jpg', label: 'Detail — Textilien' }];


const FACTS = [
{ value: '199 €', label: 'netto, pauschal' },
{ value: 'ca. 45 Sek.', label: 'Cliplänge' },
{ value: '0', label: 'Vor-Ort-Termine' }];


const ANGEBOT_ORTE = ['Immobilien', 'Geschäftsräume', 'Büros', 'Praxen', 'Restaurants', 'Hotels', 'Verkaufsflächen', 'Studios', 'Ausstellungsräume'];

const VimeoEmbed = ({ id, title }) =>
<div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 9', background: '#000', border: '.5px solid var(--hairline-color)' }}>
    <iframe src={`https://player.vimeo.com/video/${id}?title=0&byline=0&portrait=0&dnt=1`}
  title={title} allow="autoplay; fullscreen; picture-in-picture" allowFullScreen
  style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0, display: 'block' }}></iframe>
  </div>;


const ShotFrame = ({ src, label, wide }) =>
<figure className={wide ? 'shot wide' : 'shot'} style={{ position: 'relative', margin: 0, overflow: 'hidden', border: '.5px solid var(--hairline-color)', background: 'var(--surface-warm-grey)' }}>
    <img src={src} alt={label} loading="lazy" style={{ display: 'block', width: '100%', height: '100%', aspectRatio: wide ? '16 / 9' : '4 / 3', objectFit: 'cover' }} />
    <figcaption style={{ position: 'absolute', left: 0, bottom: 0, fontFamily: 'var(--font-sans)', fontSize: 9, fontWeight: 500, letterSpacing: '.18em', textTransform: 'uppercase', color: '#fff', background: 'rgba(26,26,26,.72)', padding: '7px 13px', borderTop: '2px solid var(--primary)' }}>{label}</figcaption>
  </figure>;


function AngebotApp() {
  return (
    <React.Fragment>
      <TopNav current="angebot" />
      <main className="page">
        <PageHero
          flag="Nur für kurze Zeit!"
          title="Immobilien- / Geschäftsvideo aus vorhandenen Fotos<br><em style=&quot;color: var(--primary)&quot;>– 199 € netto</em>"
          kicker={null}
          intro="Auf Grundlage von bereitgestellten Fotos erstelle ich einen professionellen, etwa 45-sekündigen Clip zur hochwertigen Präsentation eines physischen Ortes." />

        <section className="band canvas" style={{ paddingBottom: 0 }}>
          <div className="container">
            <Reveal>
              <div style={{ position: 'relative' }}>
                <div aria-hidden style={{ position: 'absolute', inset: 0, transform: 'translate(18px,18px)', border: '.5px solid rgba(184,115,51,.25)', pointerEvents: 'none' }} />
                <VimeoEmbed id="1221213886" title="Beispielclip — Immobilienvideo aus vorhandenen Fotos" />
              </div>
              <div className="ang-vidcap" style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 24, marginTop: 18, paddingTop: 16, borderTop: '.5px solid var(--hairline-color)' }}>
                <span style={{ fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 500, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--primary)' }}>Beispielclip</span>
                <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 13.5, lineHeight: 1.7, color: 'var(--muted)', margin: 0, textAlign: 'right', maxWidth: 480 }}>Hinweis: Video und Bildmaterial auf dieser Seite sind KI-generierte Inhalte und dienen ausschließlich der Demonstration.</p>
              </div>
            </Reveal>
          </div>
        </section>

        <section className="band canvas">
          <div className="container">
            <div className="ang-split" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.25fr) minmax(0,.75fr)', gap: 64, alignItems: 'start' }}>
              <Reveal>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
                  <SectionEyebrow>Das Angebot</SectionEyebrow>
                  <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(28px,3.4vw,40px)', lineHeight: 1.12, color: 'var(--ink)', margin: 0 }}>Ein Clip, der einen Ort erlebbar macht.</h2>
                  <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 15, lineHeight: 1.75, color: 'var(--body)', margin: 0 }}>Das Angebot richtet sich an Immobilien, Geschäftsräume, Büros, Praxen, Restaurants, Hotels, Verkaufsflächen, Studios, Ausstellungsräume und weitere Orte, die professionell präsentiert werden sollen.</p>
                  <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 15, lineHeight: 1.75, color: 'var(--body)', margin: 0 }}>Die Bildauswahl und die inhaltliche Ausrichtung werden vorab gemeinsam abgestimmt. So entsteht ein authentischer und aufmerksamkeitsstarker Clip für Website, Social Media, Google oder andere digitale Kanäle.</p>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 8 }}>
                    {ANGEBOT_ORTE.map((o) =>
                    <span key={o} style={{ fontFamily: 'var(--font-sans)', fontSize: 9, fontWeight: 500, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--muted)', border: '.5px solid var(--hairline-color)', padding: '6px 12px' }}>{o}</span>
                    )}
                  </div>
                </div>
              </Reveal>
              <Reveal delay={80}>
                <div style={{ background: '#fff', border: '.5px solid var(--hairline-color)', borderTop: '2px solid var(--primary)', padding: '32px 30px 34px', display: 'flex', flexDirection: 'column', gap: 0 }}>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 9, fontWeight: 500, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--primary)' }}>Auf einen Blick</span>
                  {FACTS.map((f, i) =>
                  <div key={f.label} style={{ paddingTop: i === 0 ? 22 : 18, marginTop: i === 0 ? 0 : 18, borderTop: i === 0 ? 0 : '.5px solid var(--hairline-color)' }}>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 34, color: 'var(--primary)', lineHeight: 1 }}>{f.value}</div>
                      <div style={{ fontFamily: 'var(--font-sans)', fontSize: 9, fontWeight: 500, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--muted)', marginTop: 9 }}>{f.label}</div>
                    </div>
                  )}
                  <div style={{ marginTop: 30 }}>
                    <Button variant="primary" href="contact.html">Projekt besprechen</Button>
                  </div>
                </div>
              </Reveal>
            </div>
          </div>
        </section>

        <section className="band" style={{ background: '#f0ede9' }}>
          <div className="container">
            <SectionHead
              eyebrow="Ausgangsmaterial"
              title="Die Fotos, aus denen der <em>Clip</em> entstand."
              intro="10 bis 15 vorhandene Aufnahmen des Objekts — Auswahl und Reihenfolge werden vorab gemeinsam festgelegt." />
            <Reveal>
              <div className="shot-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }}>
                {ANGEBOT_SHOTS.map((s) => <ShotFrame key={s.src} {...s} />)}
              </div>
              <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 11, letterSpacing: '.04em', color: 'var(--muted)', margin: '16px 0 0' }}>KI-generierte Inhalte — Beispielmaterial, kein reales Objekt.</p>
            </Reveal>
          </div>
        </section>

        <CTABand title="Fotos vorhanden? Dann <em style=&quot;color: var(--primary)&quot;>starten wir</em>" sub="Kurze Nachricht genügt — Antwort innerhalb von 48 Stunden." />
      </main>
      <Footer />
      <SubpageTweaks defaults={SUBPAGE_TWEAK_DEFAULTS} />
    </React.Fragment>);

}

const SUBPAGE_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#B87333",
  "headlineFont": "\"Cormorant Garamond\", Georgia, serif"
} /*EDITMODE-END*/;

ReactDOM.createRoot(document.getElementById('root')).render(<AngebotApp />);

document.querySelectorAll('style[data-angebot]').length || (() => {
  const st = document.createElement('style');st.setAttribute('data-angebot', '');
  st.textContent = `.shot.wide{ grid-column: span 3; } @media (max-width: 1000px){ .shot-grid{ grid-template-columns: repeat(2,1fr) !important; } .shot.wide{ grid-column: span 2; } } @media (max-width: 900px){ .ang-split{ grid-template-columns: 1fr !important; gap: 44px !important; } .ang-vidcap{ flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } .ang-vidcap p{ text-align: left !important; } } @media (max-width: 620px){ .shot-grid{ grid-template-columns: 1fr !important; } .shot.wide{ grid-column: span 1; } }`;
  document.head.appendChild(st);
})();