/* TischTap sales one-pager — deck pages */

/* COVER — full-bleed red field offset from a thin left margin column,
   white wordmark bottom-left, subtitle, bottom rule + solid dot */
const CoverPage = () => (
  <section className="page page--cover" data-screen-label="Cover">
    {/* red field — offset from a thin left white margin, leaves bottom white band */}
    <div style={{ position: 'absolute', top: 0, left: 36, right: 0, height: 'calc(100% - 232px)', background: 'var(--tt-red)' }} />
    {/* white wordmark, low-left over the red */}
    <h1 style={{ position: 'absolute', left: 72, bottom: 286, margin: 0, font: '800 92px/1 var(--tt-font-display)', color: '#fff', letterSpacing: '-0.02em' }}>Tischtap</h1>
    {/* bottom white band */}
    <div style={{ position: 'absolute', left: 72, right: 56, bottom: 52 }}>
      <p style={{ font: '500 30px/1.3 var(--tt-font-display)', color: 'var(--tt-red)', margin: '0 0 10px', maxWidth: 560 }}>
        Mehr Umsatz für Restaurants — mit einem einfachen Scan.
      </p>
      <p style={{ font: 'var(--tt-text-lead)', color: 'var(--tt-ink-2)', margin: 0 }}>Intelligente QR &amp; NFC-Tischkarten</p>
      <div style={{ display: 'flex', alignItems: 'center', gap: 20, marginTop: 36 }}>
        <div style={{ flex: 1, height: 4, background: 'var(--tt-red)', borderRadius: 4 }} />
        <span style={{ width: 34, height: 34, borderRadius: '50%', background: 'var(--tt-red)' }} />
      </div>
    </div>
  </section>
);

/* WHY — "Warum Tap & Scan?" */
const WhyPage = () => (
  <PageFrame label="Warum Tap & Scan">
    <div style={{ position: 'absolute', top: -28, left: -28 }}><Ripple size={120} /></div>
    <h2 className="hero hero--ink">Warum Tap &amp; Scan?</h2>
    <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: 40, marginTop: 24 }}>
      <ImageSlot style={{ height: 280 }} />
      <ul className="blist" style={{ alignSelf: 'center', gap: 16 }}>
        <li style={{ font: '500 19px/1.4 var(--tt-font-body)', color: 'var(--tt-red)' }}>Mehr Google-Bewertungen pro Woche</li>
        <li style={{ font: '500 19px/1.4 var(--tt-font-body)', color: 'var(--tt-red)' }}>Schnellere Bestellungen → höherer Umsatz pro Tisch</li>
        <li style={{ font: '500 19px/1.4 var(--tt-font-body)', color: 'var(--tt-red)' }}>Professioneller digitaler Auftritt ohne Aufwand</li>
      </ul>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 280px', gap: 40, marginTop: 56, alignItems: 'center' }}>
      <div>
        <p style={{ font: 'var(--tt-text-lead)', color: 'var(--tt-red)', margin: '0 0 14px' }}>
          Elegantes Tisch-Produkt, das Gäste gerne nutzen. Ihr Restaurant wird dadurch:
        </p>
        <ul className="blist">
          <li style={{ color: 'var(--tt-red)' }}>Moderner</li>
          <li style={{ color: 'var(--tt-red)' }}>Hygienischer</li>
          <li style={{ color: 'var(--tt-red)' }}>Schneller</li>
          <li style={{ color: 'var(--tt-red)' }}>Profitabler</li>
        </ul>
      </div>
      <ImageSlot style={{ height: 170 }} />
    </div>
  </PageFrame>
);

/* INCLUDED — "Was ist enthalten" with capsule chips + phone mockups */
const IncludedPage = () => (
  <PageFrame label="Was ist enthalten">
    <h2 className="hero">Was ist enthalten!</h2>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: 36, marginTop: 18 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        <FeatureChip label="Digitales Menü" sub="Mehrsprachig" />
        <FeatureChip label="WLAN Verbinden" sub="Landing Page" />
        <FeatureChip label="Google-FB-Insta" sub="Bewertungsseite" />
        <FeatureChip label="Ihr Branding und Logo" sub="NFC- & QR-Karten für jeden Tisch" />
        <FeatureChip label="Großes QR-Schild für den Eingang" />
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
        <ImageSlot style={{ height: 230 }} />
        <ImageSlot style={{ height: 230 }} />
      </div>
    </div>
  </PageFrame>
);

/* PRICING — "Preise" for table cards */
const PricingPage = () => (
  <PageFrame label="Preise">
    <h2 className="hero">Preise</h2>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 26, marginTop: 18 }}>
      <div>
        <ArrowRow title="EINRICHTUNGS- UND BRANDINGGEBÜHR" price="150 € Einmalig" />
        <ul className="clist">
          <CheckItem>Ersteinrichtung &amp; Onboarding</CheckItem>
          <CheckItem>Menüdigitalisierung</CheckItem>
          <CheckItem>Bewertungs- und WLAN-Seiten</CheckItem>
          <CheckItem>Großes QR-Schild für den Eingang oder die Kasse</CheckItem>
        </ul>
      </div>
      <div>
        <ArrowRow title="BASIC: TISCHKARTEN" price="15 € pro Tisch" />
        <p style={{ font: 'var(--tt-text-body)', margin: '12px 0 4px' }}>Ersteinrichtung &amp; Onboarding</p>
        <ul className="clist"><CheckItem>NFC-Tap-Karte</CheckItem><CheckItem>QR-Code</CheckItem></ul>
      </div>
      <div>
        <ArrowRow title="SMART: TISCHKARTEN" price="25 € pro Tisch" />
        <p style={{ font: 'var(--tt-text-body)', margin: '12px 0 4px' }}>Ersteinrichtung &amp; Onboarding</p>
        <ul className="clist">
          <CheckItem>Alles aus Basic</CheckItem>
          <CheckItem>Foto &amp; Nachricht vom Besitzer</CheckItem>
          <CheckItem>Individuelles Restaurant-Design</CheckItem>
          <CheckItem>WhatsApp Feedback direkt zum Besitzer</CheckItem>
        </ul>
      </div>
      <Callout title="Beispiel:" style={{ marginTop: 4 }}>
        <div style={{ font: 'var(--tt-text-body)', display: 'flex', flexDirection: 'column', gap: 4 }}>
          <span>10 Tische, 150 € Basis</span>
          <span>(10 × 15 €) = 150 €</span>
          <span>Gesamt: 300 €. Einmalige Einrichtung.</span>
          <strong style={{ color: 'var(--tt-red)', fontWeight: 700 }}>Keine verpflichtende monatliche Laufzeit</strong>
        </div>
      </Callout>
    </div>
  </PageFrame>
);

/* WEBSITE PACKAGES — Starter / Growth / Pro */
const PackagesPage = () => (
  <PageFrame label="Website-Pakete">
    <h2 className="hero">Website-Pakete <span style={{ font: '500 22px/1 var(--tt-font-display)', color: 'var(--tt-ink-3)' }}>(1-Jahres-Plan)</span></h2>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 22, marginTop: 18 }}>
      <div>
        <ArrowRow title="STARTER" meta="Am besten geeignet für: neue kleine Unternehmen, Einzelunternehmer:innen" price="800 € / 1 Jahre" />
        <ul className="clist">
          <CheckItem>1–3-seitige professionelle Website</CheckItem>
          <CheckItem>Responsives Design für Mobilgeräte</CheckItem>
          <CheckItem>SSL-Zertifikat (HTTPS) · Domain + Hosting inklusive</CheckItem>
          <CheckItem>Integration von Google-Bewertungen + Instagram</CheckItem>
        </ul>
        <p className="positioning">Positionierung: Schnell online gehen und professionell auftreten.</p>
      </div>
      <div style={{ border: '1.5px solid var(--tt-red)', borderRadius: 'var(--tt-r-card)', padding: '22px 24px', position: 'relative' }}>
        <ArrowRow title="GROWTH" meta="Am besten geeignet für: wachsende lokale Unternehmen" price="1.600 € / 1 Jahre" />
        <span className="badge-pop" style={{ position: 'absolute', top: -15, right: 24, boxShadow: '0 0 0 4px #fff' }}>Am beliebtesten</span>
        <ul className="clist">
          <CheckItem>Alles aus dem Starter-Paket · bis zu 6 Seiten</CheckItem>
          <CheckItem>Modernes Premium-Design</CheckItem>
          <CheckItem>WhatsApp-Chat + Google Maps-Integration</CheckItem>
          <CheckItem>On-Page-SEO-Optimierung · 2 Design-Revisionen</CheckItem>
        </ul>
        <p className="positioning">Positionierung: Entwickelt, um mehr Leads und Vertrauen zu generieren.</p>
      </div>
    </div>
  </PageFrame>
);

Object.assign(window, { CoverPage, WhyPage, IncludedPage, PricingPage, PackagesPage });