// SnapCrew — marketing website
// Single React app, brand system from logo work: Space Grotesk + JetBrains Mono,
// Ink/Paper/Coral/Purple, Mark D Hero.

const { useState, useEffect } = React;

// Single mobile breakpoint at 768px. Used by sections to collapse multi-column
// grids, shrink display type, and reduce vertical padding on small screens.
function useIsMobile(breakpoint = 768) {
  const get = () => typeof window !== 'undefined' && window.innerWidth < breakpoint;
  const [m, setM] = useState(get);
  useEffect(() => {
    const onResize = () => setM(get());
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, [breakpoint]);
  return m;
}

const T = {
  ink: '#15151A',
  paper: '#F6F2EB',
  paperWarm: '#EFEAE0',
  paperCool: '#E8E4DC',
  coral: '#FF6A52',
  purple: '#8B5CF6',
  cyan: '#22D3EE',
  peach: '#FFB088',
  muted: 'rgba(20,20,25,0.6)',
  mutedSoft: 'rgba(20,20,25,0.42)',
  paperOnInk: 'rgba(246,242,235,0.7)',
  paperOnInkSoft: 'rgba(246,242,235,0.5)',
  border: 'rgba(20,20,25,0.08)',
  borderInk: 'rgba(246,242,235,0.1)',
};

// ─── shared building blocks ───────────────────────────────────
function Container({ children, style = {} }) {
  const isMobile = useIsMobile();
  return (
    <div style={{ maxWidth: 1240, margin: '0 auto', padding: isMobile ? '0 20px' : '0 32px', ...style }}>{children}</div>
  );
}

function Eyebrow({ children, dark }) {
  return (
    <div className="mono" style={{
      color: dark ? T.paperOnInkSoft : T.mutedSoft,
      display: 'inline-flex', alignItems: 'center', gap: 8,
    }}>
      <span style={{ width: 14, height: 1, background: 'currentColor' }}></span>
      {children}
    </div>
  );
}

function Button({ children, variant = 'primary', accent, onClick }) {
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    padding: '14px 22px', borderRadius: 999, border: 'none',
    fontSize: 15, fontWeight: 500, letterSpacing: '-0.01em',
    transition: 'transform .15s ease, background .15s ease, color .15s ease',
  };
  const variants = {
    primary: { background: T.ink, color: T.paper },
    accent: { background: accent, color: T.ink },
    ghost: { background: 'transparent', color: T.ink, boxShadow: `inset 0 0 0 1px ${T.border}` },
    ghostDark: { background: 'transparent', color: T.paper, boxShadow: `inset 0 0 0 1px ${T.borderInk}` },
  };
  return (
    <button onClick={onClick} style={{ ...base, ...variants[variant] }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}>
      {children}
    </button>
  );
}

// ─── Header ───────────────────────────────────────────────────
function Header({ accent }) {
  const nav = ['Funktionen', 'Challenges', 'Anlässe', 'Preise', 'FAQ'];
  const isMobile = useIsMobile(960);
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 40, background: 'rgba(246,242,235,0.82)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)', borderBottom: `1px solid ${T.border}` }}>
      <Container>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 72 }}>
          <a href="#" style={{ display: 'flex', alignItems: 'center' }}>
            <SnapCrewLogo size={44} fg={T.ink} accent={accent} />
          </a>
          {!isMobile && (
            <nav style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
              {nav.map((n) => (
                <a key={n} href={`#${n.toLowerCase()}`} style={{ fontSize: 15, color: T.muted }}>{n}</a>
              ))}
            </nav>
          )}
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            {!isMobile && <a href="#" style={{ fontSize: 15, color: T.muted }}>Anmelden</a>}
            <Button variant="primary">Event starten</Button>
          </div>
        </div>
      </Container>
    </header>
  );
}

// ─── Phone mock (used in hero) ────────────────────────────────
const HERO_PHOTOS = [
  { h: 200, c: 'linear-gradient(135deg,#3a2e2a,#5a4438)', label: 'Anstoßen' },
  { h: 160, c: 'linear-gradient(135deg,#4a3f5c,#26223a)', label: 'Tanzfläche' },
  { h: 170, c: 'linear-gradient(135deg,#2e3a3a,#1b2424)', label: 'Torte' },
  { h: 210, c: 'linear-gradient(135deg,#5b4239,#33231e)', label: 'Selfie' },
  { h: 150, c: 'linear-gradient(135deg,#3e3a2e,#22201a)', label: 'Detail' },
  { h: 180, c: 'linear-gradient(135deg,#4a2e3a,#2a1820)', label: 'Gäste' },
];

function PhoneMock({ accent }) {
  return (
    <div style={{
      width: 280, background: T.ink, borderRadius: 38, padding: 8,
      boxShadow: '0 30px 80px rgba(20,20,25,0.25), 0 6px 20px rgba(20,20,25,0.12)',
      position: 'relative',
    }}>
      <div style={{ background: T.paper, borderRadius: 32, overflow: 'hidden', position: 'relative', height: 560 }}>
        {/* Status bar */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 22px 0', fontSize: 12, fontWeight: 600 }}>
          <span>22:48</span>
          <span style={{ display: 'flex', gap: 4 }}>
            <span style={{ width: 14, height: 8, borderRadius: 2, background: T.ink, opacity: 0.85 }}></span>
            <span style={{ width: 14, height: 8, borderRadius: 2, background: T.ink, opacity: 0.5 }}></span>
            <span style={{ width: 18, height: 8, borderRadius: 2, background: T.ink }}></span>
          </span>
        </div>
        {/* Notch */}
        <div style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', width: 90, height: 22, background: T.ink, borderRadius: 999 }}></div>

        {/* App header */}
        <div style={{ padding: '24px 18px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div className="mono" style={{ color: T.mutedSoft, marginBottom: 4 }}>HOCHZEIT</div>
            <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.02em' }}>Luca &amp; Mia</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '5px 10px', background: T.ink, color: T.paper, borderRadius: 999 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: accent, boxShadow: `0 0 8px ${accent}` }}></span>
            <span className="mono" style={{ color: T.paperOnInk, fontSize: 10 }}>LIVE · 84</span>
          </div>
        </div>

        {/* Masonry-ish grid */}
        <div style={{ padding: '0 14px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {[0, 1, 2, 3, 4, 5].map((i) => {
            const p = HERO_PHOTOS[i];
            const isNew = i === 0;
            return (
              <div key={i} style={{
                position: 'relative', borderRadius: 12,
                height: p.h * 0.7, background: p.c,
                boxShadow: isNew ? `0 0 0 2px ${accent}` : 'none',
              }}>
                {isNew && (
                  <div style={{
                    position: 'absolute', top: 8, left: 8,
                    padding: '3px 7px', background: accent, color: T.ink, borderRadius: 999,
                    fontSize: 9, fontFamily: "'JetBrains Mono', monospace", fontWeight: 600, letterSpacing: '0.05em',
                  }}>NEU</div>
                )}
                <div style={{
                  position: 'absolute', bottom: 8, left: 8, right: 8,
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                }}>
                  <span style={{ fontSize: 11, color: T.paper, fontWeight: 500 }}>{p.label}</span>
                  <span style={{ fontSize: 11, color: T.paper, opacity: 0.85 }}>♥ {12 + i * 3}</span>
                </div>
              </div>
            );
          })}
        </div>

        {/* Bottom upload bar */}
        <div style={{
          position: 'absolute', bottom: 18, left: 14, right: 14,
          display: 'flex', alignItems: 'center', gap: 8,
          padding: 8, background: T.ink, color: T.paper, borderRadius: 999,
        }}>
          <span style={{
            width: 36, height: 36, borderRadius: '50%', background: accent,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
              <circle cx="12" cy="12" r="3.5" fill={T.ink} />
              <rect x="3" y="6" width="18" height="14" rx="3" stroke={T.ink} strokeWidth="2" />
              <rect x="9" y="3" width="6" height="3" rx="1" fill={T.ink} />
            </svg>
          </span>
          <span style={{ fontSize: 13, fontWeight: 500, flex: 1 }}>Foto teilen</span>
          <span style={{ fontSize: 12, color: T.paperOnInk, paddingRight: 12 }}>+312</span>
        </div>
      </div>
    </div>
  );
}

// ─── Floating QR card overlapping the phone ───────────────────
function FloatingQR({ accent }) {
  const pattern = ['1110111','1010101','1110101','0001110','1010001','0101010','1110111'];
  return (
    <div style={{
      width: 200, background: T.paper, borderRadius: 18,
      padding: '18px 18px 16px',
      boxShadow: '0 22px 60px rgba(20,20,25,0.18), 0 4px 14px rgba(20,20,25,0.08)',
      border: `1px solid ${T.border}`,
      transform: 'rotate(-4deg)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginBottom: 12 }}>
        <SnapCrewLogo size={30} fg={T.ink} accent={accent} />
        <span className="mono" style={{ color: T.mutedSoft }}>SCAN MICH</span>
      </div>
      <svg viewBox="0 0 70 70" width="160" height="160" style={{ display: 'block', margin: '0 auto 10px' }}>
        {pattern.flatMap((row, r) =>
          row.split('').map((c, i) => c === '1' ? (
            <rect key={`${r}-${i}`} x={6 + i * 8} y={6 + r * 8} width="7" height="7" fill={T.ink} />
          ) : null)
        )}
        <rect x="2" y="2" width="18" height="18" fill="none" stroke={T.ink} strokeWidth="2" />
        <rect x="50" y="2" width="18" height="18" fill="none" stroke={T.ink} strokeWidth="2" />
        <rect x="2" y="50" width="18" height="18" fill="none" stroke={T.ink} strokeWidth="2" />
        <rect x="7" y="7" width="8" height="8" fill={T.ink} />
        <rect x="55" y="7" width="8" height="8" fill={T.ink} />
        <rect x="7" y="55" width="8" height="8" fill={T.ink} />
      </svg>
      <div style={{ textAlign: 'center', fontSize: 13, fontWeight: 500 }}>Luca &amp; Mia</div>
      <div className="mono" style={{ textAlign: 'center', color: T.mutedSoft, marginTop: 2 }}>snapcrew.live</div>
    </div>
  );
}

// ─── Hero ─────────────────────────────────────────────────────
function Hero({ accent }) {
  const isMobile = useIsMobile(900);
  return (
    <section style={{ padding: isMobile ? '48px 0 64px' : '88px 0 120px', position: 'relative', overflow: 'hidden' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.05fr 1fr', gap: isMobile ? 48 : 80, alignItems: 'center' }}>
          <div>
            <Eyebrow>Die moderne Alternative zur Fotobox</Eyebrow>
            <h1 style={{ fontSize: isMobile ? 48 : 84, lineHeight: isMobile ? 1.02 : 0.97, fontWeight: 500, marginTop: isMobile ? 16 : 24, letterSpacing: '-0.035em' }}>
              Alle <span style={{ fontStyle: 'italic', fontWeight: 400 }}>Perspektiven</span><br />
              eurer Feier.
            </h1>
            <p style={{ fontSize: isMobile ? 16 : 19, lineHeight: 1.5, color: T.muted, marginTop: isMobile ? 18 : 26, maxWidth: 480 }}>
              QR scannen, Foto teilen, Challenges spielen. Jedes Bild landet direkt
              in der Galerie oder live auf jedem Screen. Ohne App, ohne Registrierung.
              Jeder Gast wird zum Fotografen.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: isMobile ? 24 : 36, flexWrap: 'wrap' }}>
              <Button variant="accent" accent={accent}>
                Event starten
                <span style={{ fontSize: 16 }}>→</span>
              </Button>
              <Button variant="ghost">Live-Demo ansehen</Button>
            </div>
          </div>
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: isMobile ? 580 : 620 }}>
            <PhoneMock accent={accent} />
            <div style={{ position: 'absolute', top: isMobile ? 0 : 40, right: isMobile ? -10 : 0 }}>
              <FloatingQR accent={accent} />
            </div>
            {/* Floating reaction chips */}
            <div style={{
              position: 'absolute', bottom: isMobile ? 40 : 80, left: isMobile ? -10 : 0,
              padding: '10px 16px', background: T.paper, borderRadius: 999,
              boxShadow: '0 12px 30px rgba(20,20,25,0.12)',
              display: 'flex', alignItems: 'center', gap: 10,
              transform: 'rotate(-3deg)',
            }}>
              <span style={{ fontSize: 20 }}>❤️</span>
              <span style={{ fontSize: 20 }}>🔥</span>
              <span style={{ fontSize: 20 }}>🥹</span>
              <span style={{ fontSize: 13, fontWeight: 600 }}>+127</span>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ─── How it works ─────────────────────────────────────────────
function HowItWorks({ accent }) {
  const steps = [
    {
      n: '01',
      title: 'Event anlegen',
      body: 'Name, Datum, Design — fertig. Euer persönlicher Account steht sofort bereit.',
      visual: <StepEvent accent={accent} />,
    },
    {
      n: '02',
      title: 'QR teilen',
      body: 'Auf Tischkarten, Einladungen oder dem Beamer. Gäste scannen — und sind drin. Ohne App.',
      visual: <StepQR accent={accent} />,
    },
    {
      n: '03',
      title: 'Live erleben',
      body: 'Jedes Foto landet sofort in der gemeinsamen Galerie und optional auf der Beamer-Slideshow.',
      visual: <StepLive accent={accent} />,
    },
  ];
  const isMobile = useIsMobile();
  return (
    <section id="funktionen" style={{ padding: isMobile ? '64px 0' : '120px 0', background: T.paperWarm, borderRadius: '40px 40px 0 0' }}>
      <Container>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: isMobile ? 40 : 64, gap: 40, flexWrap: 'wrap' }}>
          <div>
            <Eyebrow>So funktioniert's</Eyebrow>
            <h2 style={{ fontSize: isMobile ? 36 : 56, lineHeight: 1.02, marginTop: 18, fontWeight: 500, maxWidth: 640 }}>
              In drei Schritten<br />zur Crew-Story.
            </h2>
          </div>
          <p style={{ fontSize: 17, color: T.muted, maxWidth: 360, lineHeight: 1.5 }}>
            Vom Anlegen bis zum ersten Foto vergehen unter zwei Minuten. Keine Schulung, kein Setup-Aufwand.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 16 : 24 }}>
          {steps.map((s) => (
            <div key={s.n} style={{
              background: T.paper, borderRadius: 24, padding: 28,
              border: `1px solid ${T.border}`,
              display: 'flex', flexDirection: 'column', gap: 20,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span className="mono" style={{ color: T.mutedSoft }}>{s.n}</span>
                <span style={{ width: 28, height: 28, borderRadius: '50%', background: accent }}></span>
              </div>
              <div style={{ height: 180, background: T.paperWarm, borderRadius: 14, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
                {s.visual}
              </div>
              <div>
                <h3 style={{ fontSize: 24, marginBottom: 8, fontWeight: 600 }}>{s.title}</h3>
                <p style={{ fontSize: 15, color: T.muted, lineHeight: 1.5 }}>{s.body}</p>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

function StepEvent({ accent }) {
  return (
    <div style={{ width: 200, padding: 16, background: T.paper, borderRadius: 12, boxShadow: '0 8px 22px rgba(20,20,25,0.08)' }}>
      <div className="mono" style={{ color: T.mutedSoft, marginBottom: 8 }}>EVENT</div>
      <div style={{ height: 8, background: T.ink, borderRadius: 4, marginBottom: 8, width: '80%' }}></div>
      <div style={{ height: 6, background: T.border, borderRadius: 3, marginBottom: 6 }}></div>
      <div style={{ height: 6, background: T.border, borderRadius: 3, width: '60%', marginBottom: 14 }}></div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ height: 28, width: 28, borderRadius: '50%', background: accent }}></span>
        <span style={{ height: 8, background: T.ink, borderRadius: 4, flex: 1 }}></span>
      </div>
    </div>
  );
}

function StepQR({ accent }) {
  const pattern = ['1110','1010','1011','0111'];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
      <div style={{ background: T.paper, padding: 16, borderRadius: 12, boxShadow: '0 8px 22px rgba(20,20,25,0.08)' }}>
        <svg viewBox="0 0 40 40" width="84" height="84">
          {pattern.flatMap((row, r) =>
            row.split('').map((c, i) => c === '1' ? (
              <rect key={`${r}-${i}`} x={4 + i * 8} y={4 + r * 8} width="7" height="7" fill={T.ink} />
            ) : null)
          )}
          <rect x="0" y="0" width="14" height="14" fill="none" stroke={T.ink} strokeWidth="2" />
          <rect x="26" y="0" width="14" height="14" fill="none" stroke={T.ink} strokeWidth="2" />
          <rect x="0" y="26" width="14" height="14" fill="none" stroke={T.ink} strokeWidth="2" />
        </svg>
      </div>
      <span className="mono" style={{ color: T.mutedSoft }}>snapcrew.live</span>
    </div>
  );
}

function StepLive({ accent }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, width: 200 }}>
      {[0,1,2,3,4,5].map((i) => (
        <div key={i} style={{
          aspectRatio: '1',
          background: `linear-gradient(135deg, hsl(${20 + i * 28},25%,${68 - i * 4}%), hsl(${30 + i * 28},22%,${48 - i * 3}%))`,
          borderRadius: 6,
          boxShadow: i === 1 ? `0 0 0 2px ${accent}` : 'none',
        }}></div>
      ))}
    </div>
  );
}

// ─── Features ─────────────────────────────────────────────────
function Features({ accent }) {
  const items = [
    {
      title: 'Live Gallery',
      body: 'Jedes hochgeladene Foto landet sofort in der gemeinsamen Eventgalerie — chronologisch oder als Mosaik.',
      tag: 'CORE',
      visual: 'gallery',
    },
    {
      title: 'Beamer-Slideshow',
      body: 'Eine zweite URL für den Screen vor Ort. Neue Bilder erscheinen automatisch, mit smoothem Übergang.',
      tag: 'LIVE',
      visual: 'slideshow',
    },
    {
      title: 'Reactions',
      body: 'Gäste reagieren mit ❤️ 🔥 😂 🥹 🕺 — Emojis fliegen kurz über den Beamer, das beste Foto gewinnt.',
      tag: 'SOCIAL',
      visual: 'reactions',
    },
    {
      title: 'Smart Moderation',
      body: 'Automatische Freigabe oder manueller Modus. Anstößige Inhalte werden KI-gefiltert, bevor sie öffentlich sind.',
      tag: 'TRUST',
      visual: 'moderation',
    },
  ];
  const isMobile = useIsMobile();
  return (
    <section style={{ padding: isMobile ? '72px 0' : '140px 0', background: T.ink, color: T.paper, borderRadius: '40px 40px 0 0' }}>
      <Container>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: isMobile ? 40 : 72, gap: 40, flexWrap: 'wrap' }}>
          <div>
            <Eyebrow dark>Was SnapCrew kann</Eyebrow>
            <h2 style={{ fontSize: isMobile ? 38 : 60, lineHeight: 1.02, marginTop: 18, fontWeight: 500, maxWidth: 720 }}>
              Eine Plattform.<br />
              <span style={{ color: accent }}>Jeder Moment.</span>
            </h2>
          </div>
          <p style={{ fontSize: 17, color: T.paperOnInk, maxWidth: 360, lineHeight: 1.5 }}>
            SnapCrew ist keine Fotobox-Imitation. Es ist eine eigene Idee, gebaut für moderne Feiern.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 14 : 20 }}>
          {items.map((it, i) => (
            <FeatureCard key={it.title} item={it} accent={accent} large={i === 0} />
          ))}
        </div>
      </Container>
    </section>
  );
}

function FeatureCard({ item, accent, large }) {
  const isMobile = useIsMobile();
  return (
    <article style={{
      background: '#1F1F25', borderRadius: 24, padding: isMobile ? 22 : 32,
      border: `1px solid ${T.borderInk}`,
      display: 'flex', flexDirection: 'column', gap: 22,
      gridColumn: large ? 'span 1' : 'span 1',
      minHeight: isMobile ? 360 : 420,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span className="mono" style={{ color: accent }}>{item.tag}</span>
        <span style={{ width: 8, height: 8, borderRadius: '50%', background: accent, boxShadow: `0 0 12px ${accent}` }}></span>
      </div>
      <FeatureVisual kind={item.visual} accent={accent} />
      <div style={{ marginTop: 'auto' }}>
        <h3 style={{ fontSize: isMobile ? 24 : 30, fontWeight: 600, marginBottom: 10, letterSpacing: '-0.025em' }}>{item.title}</h3>
        <p style={{ fontSize: 15, color: T.paperOnInk, lineHeight: 1.55 }}>{item.body}</p>
      </div>
    </article>
  );
}

function FeatureVisual({ kind, accent }) {
  if (kind === 'gallery') {
    return (
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6, height: 200 }}>
        {[0,1,2,3,4,5,6,7,8].map((i) => (
          <div key={i} style={{
            background: `linear-gradient(${130 + i * 20}deg, hsl(${15 + i * 25},20%,${30 + (i%3)*8}%), hsl(${25 + i * 25},18%,${18 + (i%3)*5}%))`,
            borderRadius: 8,
            boxShadow: i === 4 ? `0 0 0 2px ${accent}` : 'none',
          }}></div>
        ))}
      </div>
    );
  }
  if (kind === 'slideshow') {
    return (
      <div style={{ height: 200, position: 'relative' }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(135deg, #3a2e2a, #1a1a1f)',
          borderRadius: 12, overflow: 'hidden',
          display: 'flex', alignItems: 'flex-end', padding: 14,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: accent, boxShadow: `0 0 10px ${accent}` }}></span>
            <span className="mono" style={{ color: T.paper }}>LIVE · BEAMER</span>
          </div>
        </div>
        <div style={{
          position: 'absolute', right: -10, top: -10, width: 80, height: 60,
          background: 'linear-gradient(135deg,#4a3f5c,#2a223a)',
          borderRadius: 8, transform: 'rotate(8deg)',
          boxShadow: '0 6px 14px rgba(0,0,0,0.3)',
        }}></div>
        <div style={{
          position: 'absolute', right: 30, top: 30, width: 80, height: 60,
          background: 'linear-gradient(135deg,#5b4239,#33231e)',
          borderRadius: 8, transform: 'rotate(-4deg)',
          boxShadow: '0 6px 14px rgba(0,0,0,0.3)',
        }}></div>
      </div>
    );
  }
  if (kind === 'reactions') {
    return (
      <div style={{ height: 200, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {['❤️','🔥','😂','🥹','🕺'].map((e, i) => (
            <span key={i} style={{
              padding: '8px 14px', borderRadius: 999, background: '#2a2a32',
              fontSize: 18, display: 'inline-flex', gap: 8, alignItems: 'center',
              border: `1px solid ${T.borderInk}`,
            }}>
              {e}
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: T.paperOnInk }}>{[127,84,42,28,16][i]}</span>
            </span>
          ))}
        </div>
        <div style={{ position: 'relative', height: 50 }}>
          {['❤️','🔥','❤️','🥹','🕺'].map((e, i) => (
            <span key={i} style={{
              position: 'absolute', left: `${i * 18}%`, bottom: i * 4,
              fontSize: 22 + (i%2) * 6, transform: `rotate(${(i%2?1:-1) * 8}deg)`,
            }}>{e}</span>
          ))}
        </div>
      </div>
    );
  }
  if (kind === 'moderation') {
    return (
      <div style={{ height: 200, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {[
          { ok: true, label: 'Hochgeladen · Anna' },
          { ok: true, label: 'Hochgeladen · Tim' },
          { ok: false, label: 'Geprüft · ausgeblendet' },
          { ok: true, label: 'Hochgeladen · Mia' },
        ].map((r, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '10px 14px', background: '#2a2a32',
            borderRadius: 10, border: `1px solid ${T.borderInk}`,
          }}>
            <span style={{
              width: 18, height: 18, borderRadius: '50%',
              background: r.ok ? accent : '#3a3a42',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: T.ink, fontSize: 11, fontWeight: 700,
            }}>{r.ok ? '✓' : '–'}</span>
            <span style={{ fontSize: 13, color: r.ok ? T.paper : T.paperOnInkSoft }}>{r.label}</span>
          </div>
        ))}
      </div>
    );
  }
}

// ─── Photo Challenges ────────────────────────────────────────
const CHALLENGES = [
  { n: '01', label: 'Blonde Haare', body: 'Fotografiere jemanden mit blonden Haaren.', emoji: '💁' },
  { n: '02', label: 'Das Buffet', body: 'Halte das schönste Tellergericht des Abends fest.', emoji: '🍽️' },
  { n: '03', label: 'Gruppenfoto · 5+', body: 'Mache ein Foto mit mindestens fünf Gästen.', emoji: '👯' },
  { n: '04', label: 'Emotional', body: 'Fang den emotionalsten Moment des Abends ein.', emoji: '🥹' },
  { n: '05', label: 'Beste Tanzbewegung', body: 'Finde die lustigste Tanzbewegung des Abends.', emoji: '🕺' },
  { n: '06', label: 'Detail', body: 'Ein Detail, das sonst niemand bemerkt hat.', emoji: '🔍' },
];

// Tint a hex accent down to a very light pill background. Works for any
// accent (coral/purple/cyan) — keeps the chip looking soft + readable.
function tintAccent(hex, alpha = 0.14) {
  const h = hex.replace('#', '');
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  return `rgba(${r},${g},${b},${alpha})`;
}

// Small inline icons used inside the phone mock — stroke-based, lucide-style.
function IconCamera({ size = 18, stroke = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 8a2 2 0 0 1 2-2h3l1.5-2h5L16 6h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8z" />
      <circle cx="12" cy="13" r="3.5" />
    </svg>
  );
}
function IconHeart({ size = 18, stroke = 'currentColor', fill = 'none' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={stroke} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 21s-7-5.5-7-11a4.5 4.5 0 0 1 7-3.7A4.5 4.5 0 0 1 19 10c0 5.5-7 11-7 11Z" />
    </svg>
  );
}
function IconTarget({ size = 18, stroke = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9" />
      <circle cx="12" cy="12" r="5" />
      <circle cx="12" cy="12" r="1.5" fill={stroke} />
    </svg>
  );
}

function ChallengePhone({ accent }) {
  // Mirror of the real SnapCrew app: header with brand, "FOTOCHALLENGE" pill,
  // inset task panel, big primary CTA, bottom tab bar.
  const tintPill = tintAccent(accent, 0.18);
  const tabs = [
    { label: 'Hochladen', icon: <IconCamera size={22} stroke={T.muted} />, active: false },
    { label: 'Bewerten', icon: <IconHeart size={22} stroke={T.muted} />, active: false },
    { label: 'Challenge', icon: <IconTarget size={22} stroke={accent} />, active: true },
  ];
  return (
    <div style={{
      width: 296, background: T.ink, borderRadius: 38, padding: 8,
      boxShadow: '0 30px 80px rgba(20,20,25,0.25), 0 6px 20px rgba(20,20,25,0.12)',
    }}>
      <div style={{
        background: T.paperWarm, borderRadius: 32, overflow: 'hidden',
        position: 'relative', height: 600,
        display: 'flex', flexDirection: 'column',
      }}>
        {/* Status bar */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '12px 22px 0', fontSize: 11, fontWeight: 600, color: T.ink,
        }}>
          <span>22:48</span>
          <span style={{ display: 'flex', gap: 4 }}>
            <span style={{ width: 12, height: 7, borderRadius: 2, background: T.ink, opacity: 0.8 }}></span>
            <span style={{ width: 16, height: 7, borderRadius: 2, background: T.ink }}></span>
          </span>
        </div>
        <div style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', width: 84, height: 20, background: T.ink, borderRadius: 999 }}></div>

        {/* Brand header */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: '20px 0 16px',
        }}>
          <SnapCrewLogo size={38} fg={T.ink} accent={accent} />
        </div>

        {/* Card */}
        <div style={{
          margin: '4px 16px 0',
          padding: 18,
          background: T.paper,
          borderRadius: 22,
          boxShadow: '0 1px 0 rgba(20,20,25,0.04)',
          border: `1px solid ${T.border}`,
        }}>
          {/* Pill */}
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 14 }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '8px 16px', borderRadius: 999,
              background: tintPill, color: accent,
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
            }}>
              <IconTarget size={14} stroke={accent} />
              FOTOCHALLENGE
            </span>
          </div>

          {/* Inset task panel */}
          <div style={{
            background: T.paperCool, borderRadius: 18,
            padding: '16px 18px 18px', marginBottom: 16,
          }}>
            <div className="mono" style={{
              fontSize: 11, fontWeight: 600, color: T.mutedSoft,
              letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8,
            }}>
              DEINE AUFGABE
            </div>
            <div style={{
              fontSize: 17, fontWeight: 700, lineHeight: 1.3,
              letterSpacing: '-0.015em', color: T.ink,
            }}>
              Mache ein Foto mit 5 weiteren Gästen.
            </div>
          </div>

          {/* CTA */}
          <button style={{
            width: '100%', padding: '14px 18px',
            background: accent, color: T.paper,
            border: 'none', borderRadius: 999,
            fontFamily: 'inherit', fontSize: 15, fontWeight: 600,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            letterSpacing: '-0.01em',
          }}>
            <IconCamera size={18} stroke={T.paper} />
            Kamera öffnen
          </button>
        </div>

        {/* Bottom tab bar */}
        <div style={{
          marginTop: 'auto',
          background: T.paper,
          borderTop: `1px solid ${T.border}`,
          padding: '10px 6px 14px',
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        }}>
          {tabs.map((t) => (
            <div key={t.label} style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              padding: '6px 0',
            }}>
              {t.icon}
              <span style={{
                fontSize: 10, fontWeight: t.active ? 700 : 500,
                color: t.active ? accent : T.muted,
                letterSpacing: '-0.005em',
              }}>{t.label}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Challenges({ accent }) {
  const isMobile = useIsMobile(900);
  return (
    <section id="challenges" style={{ padding: isMobile ? '64px 0' : '120px 0', background: T.paperWarm, borderRadius: '40px 40px 0 0' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 48 : 80, alignItems: 'center', marginBottom: isMobile ? 48 : 80 }}>
          <div>
            <Eyebrow>Foto-Challenges</Eyebrow>
            <h2 style={{ fontSize: isMobile ? 36 : 56, lineHeight: 1.02, marginTop: 18, fontWeight: 500, letterSpacing: '-0.03em' }}>
              Aus Gästen werden <span style={{ fontStyle: 'italic', fontWeight: 400, color: accent }}>Mitspieler.</span>
            </h2>
            <p style={{ fontSize: isMobile ? 16 : 18, color: T.muted, marginTop: 22, maxWidth: 480, lineHeight: 1.5 }}>
              Aktiviert spielerische Foto-Aufgaben und macht euer Event interaktiv. Gäste sehen die Challenges direkt auf dem Smartphone, reichen ihren Beitrag ein — und die Crew kürt das beste Foto per Reaction.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginTop: 36 }}>
              {[
                { v: '100+', l: 'Vorgefertigte Aufgaben' },
                { v: '∞', l: 'Eigene Challenges' },
                { v: '5', l: 'Reaction-Emojis' },
              ].map((s) => (
                <div key={s.l} style={{
                  padding: '18px 16px', background: T.paper, borderRadius: 14,
                  border: `1px solid ${T.border}`,
                }}>
                  <div style={{ fontSize: 30, fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1 }}>{s.v}</div>
                  <div className="mono" style={{ fontSize: 10, color: T.mutedSoft, marginTop: 6, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
            <ChallengePhone accent={accent} />
            <div style={{
              position: 'absolute', top: 50, left: 0,
              padding: '10px 14px', background: T.paper, borderRadius: 14,
              boxShadow: '0 12px 30px rgba(20,20,25,0.12)',
              display: 'flex', alignItems: 'center', gap: 10,
              transform: 'rotate(-4deg)',
            }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: accent, boxShadow: `0 0 8px ${accent}` }}></span>
              <span className="mono" style={{ fontSize: 11, color: T.muted, letterSpacing: '0.08em', textTransform: 'uppercase' }}>3 aktive Challenges</span>
            </div>
            <div style={{
              position: 'absolute', bottom: 90, right: 10,
              padding: '10px 14px', background: T.paper, borderRadius: 999,
              boxShadow: '0 12px 30px rgba(20,20,25,0.12)',
              display: 'flex', alignItems: 'center', gap: 8,
              transform: 'rotate(5deg)',
            }}>
              <span style={{ fontSize: 18 }}>❤️</span>
              <span style={{ fontSize: 18 }}>🔥</span>
              <span style={{ fontSize: 18 }}>👏</span>
              <span style={{ fontSize: 13, fontWeight: 600 }}>+64</span>
            </div>
          </div>
        </div>

        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 24, gap: 20, flexWrap: 'wrap' }}>
            <h3 style={{ fontSize: isMobile ? 22 : 28, fontWeight: 500, letterSpacing: '-0.025em' }}>Beispiel-Aufgaben aus der Bibliothek</h3>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(3, 1fr)', gap: 14 }}>
            {CHALLENGES.map((c) => (
              <article key={c.n} style={{
                padding: 22, background: T.paper, borderRadius: 16,
                border: `1px solid ${T.border}`,
                display: 'flex', flexDirection: 'column', gap: 14, minHeight: 170,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <span className="mono" style={{ fontSize: 10, color: T.mutedSoft, letterSpacing: '0.1em' }}>CHALLENGE · {c.n}</span>
                  <span style={{ fontSize: 24 }}>{c.emoji}</span>
                </div>
                <div style={{ marginTop: 'auto' }}>
                  <div style={{ fontSize: 17, fontWeight: 600, marginBottom: 4, letterSpacing: '-0.015em' }}>{c.label}</div>
                  <p style={{ fontSize: 13, color: T.muted, lineHeight: 1.5 }}>{c.body}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ─── Use cases ────────────────────────────────────────────────
function UseCases({ accent }) {
  const cases = [
    { title: 'Hochzeiten', body: 'Jeder Tisch hat seine eigene Sicht auf den Tag. SnapCrew sammelt sie an einem Ort.', icon: '💍' },
    { title: 'Geburtstage', body: 'Vom Kindergeburtstag bis zum 50. — alle Gäste werden Teil des Albums.', icon: '🎂' },
    { title: 'Corporate Events', body: 'Mitarbeiterfeste, Sommerparties, Off-Sites. Branding & Domain anpassbar.', icon: '🏢' },
    { title: 'Konferenzen', body: 'Speaker-Momente, Workshops, Pausen-Snapshots — live im Foyer auf dem Screen.', icon: '🎤' },
    { title: 'Festivals & Clubs', body: 'Mehrtägige Events mit tausenden Gästen. Moderations-Modus inklusive.', icon: '🎶' },
    { title: 'Sport & Verein', body: 'Spieltage, Abibälle, Vereinsfeste. Eine Galerie, alle Perspektiven.', icon: '🏆' },
  ];
  const isMobile = useIsMobile();
  return (
    <section id="anlässe" style={{ padding: isMobile ? '64px 0' : '120px 0' }}>
      <Container>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: isMobile ? 40 : 64, gap: 40, flexWrap: 'wrap' }}>
          <div>
            <Eyebrow>Für jeden Anlass</Eyebrow>
            <h2 style={{ fontSize: isMobile ? 36 : 56, lineHeight: 1.02, marginTop: 18, fontWeight: 500 }}>
              Wo SnapCrew<br />zuhause ist.
            </h2>
          </div>
          <p style={{ fontSize: 17, color: T.muted, maxWidth: 360, lineHeight: 1.5 }}>
            Egal ob 5 oder 5.000 Gäste. SnapCrew sorgt immer für Unterhaltung. Design komplett anpassbar.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(3, 1fr)', gap: isMobile ? 12 : 16 }}>
          {cases.map((c) => (
            <article key={c.title} style={{
              padding: 28, background: T.paper, borderRadius: 20,
              border: `1px solid ${T.border}`,
              transition: 'transform .2s ease, border-color .2s ease',
              cursor: 'pointer',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.borderColor = T.ink; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.borderColor = T.border; }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
                <span style={{ fontSize: 28 }}>{c.icon}</span>
                <span style={{ fontSize: 18, color: T.mutedSoft }}>→</span>
              </div>
              <h3 style={{ fontSize: 22, fontWeight: 600, marginBottom: 8 }}>{c.title}</h3>
              <p style={{ fontSize: 14, color: T.muted, lineHeight: 1.5 }}>{c.body}</p>
            </article>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ─── Pricing ──────────────────────────────────────────────────
function Pricing({ accent }) {
  const tiers = [
    {
      name: 'Mini',
      price: '19',
      sub: 'einmalig · 48 h',
      desc: 'Für kleinere Feiern und private Anlässe.',
      bullets: [
        'Bis zu 30 Gäste',
        'Live Gallery',
        'QR-Code als PDF',
        '500 Fotos inklusive',
      ],
      cta: 'Event starten',
      variant: 'ghost',
    },
    {
      name: 'Event',
      price: '49',
      sub: 'einmalig · 7 Tage',
      desc: 'Der Klassiker für Hochzeiten, Geburtstage, Partys.',
      bullets: [
        'Unbegrenzte Gäste',
        'Live Gallery + Beamer-Slideshow',
        'Reactions & Moderation',
        'Eigener Eventname in URL',
        'Foto-Download als ZIP',
      ],
      cta: 'Event starten',
      variant: 'accent',
      featured: true,
    },
    {
      name: 'Pro',
      price: '199',
      sub: 'pro Event',
      desc: 'Für Corporate-Events, Festivals und Agenturen.',
      bullets: [
        'Custom Branding & Domain',
        'KI-Moderation',
        'Multi-Event-Management',
        'API & Webhooks',
        'Priority Support',
      ],
      cta: 'Sales kontaktieren',
      variant: 'ghost',
    },
  ];
  const isMobile = useIsMobile();
  return (
    <section id="preise" style={{ padding: isMobile ? '64px 0' : '120px 0', background: T.paperWarm, borderRadius: '40px 40px 0 0' }}>
      <Container>
        <div style={{ textAlign: 'center', marginBottom: isMobile ? 40 : 64 }}>
          <Eyebrow>Preise</Eyebrow>
          <h2 style={{ fontSize: isMobile ? 36 : 56, lineHeight: 1.02, marginTop: 18, fontWeight: 500 }}>
            Ein fairer Preis<br />pro Feier.
          </h2>
          <p style={{ fontSize: 17, color: T.muted, marginTop: 18, maxWidth: 520, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.5 }}>
            Keine Abos, keine Mitgliedschaften. Ihr zahlt nur, wenn ihr feiert.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 20, alignItems: 'stretch' }}>
          {tiers.map((t) => (
            <article key={t.name} style={{
              padding: isMobile ? 24 : 32,
              background: t.featured ? T.ink : T.paper,
              color: t.featured ? T.paper : T.ink,
              borderRadius: 24,
              border: t.featured ? 'none' : `1px solid ${T.border}`,
              display: 'flex', flexDirection: 'column', gap: 24,
              position: 'relative',
              transform: t.featured && !isMobile ? 'translateY(-12px)' : 'none',
              boxShadow: t.featured ? '0 30px 60px rgba(20,20,25,0.18)' : 'none',
            }}>
              {t.featured && (
                <div style={{
                  position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)',
                  padding: '6px 12px', background: accent, color: T.ink, borderRadius: 999,
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
                }}>
                  Beliebteste
                </div>
              )}
              <div>
                <h3 style={{ fontSize: 22, fontWeight: 600, marginBottom: 6 }}>{t.name}</h3>
                <p style={{ fontSize: 14, color: t.featured ? T.paperOnInk : T.muted, lineHeight: 1.5 }}>{t.desc}</p>
              </div>
              <div>
                <span style={{ fontSize: 56, fontWeight: 500, letterSpacing: '-0.03em' }}>€{t.price}</span>
                <span style={{ fontSize: 14, color: t.featured ? T.paperOnInk : T.muted, marginLeft: 8 }}>{t.sub}</span>
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
                {t.bullets.map((b) => (
                  <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14, lineHeight: 1.5 }}>
                    <span style={{ width: 18, height: 18, borderRadius: '50%', background: accent, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: T.ink, fontSize: 11, fontWeight: 700, flex: '0 0 18px', marginTop: 1 }}>✓</span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
              <Button variant={t.featured ? 'accent' : 'ghost'} accent={accent}>
                {t.cta} →
              </Button>
            </article>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ─── FAQ ─────────────────────────────────────────────────────
function FAQ() {
  const qs = [
    { q: 'Müssen meine Gäste eine App herunterladen?', a: 'Nein. SnapCrew läuft komplett im Browser. QR scannen, Kamera erlauben, Foto teilen — fertig.' },
    { q: 'Was passiert mit den Fotos nach dem Event?', a: 'Du kannst alle Fotos als ZIP herunterladen. Standardmäßig löschen wir die Daten 60 Tage nach Eventende — verlängerbar bis 12 Monate.' },
    { q: 'Kann ich Fotos vor der Veröffentlichung prüfen?', a: 'Ja. Im Moderations-Modus landen neue Fotos in der Warteschlange und erscheinen erst nach Freigabe. Zusätzlich filtert ein KI-Modell anstößige Inhalte automatisch.' },
    { q: 'Funktioniert die Slideshow auch ohne Internet vor Ort?', a: 'Die Slideshow benötigt eine aktive Verbindung. Wir empfehlen einen LTE-Hotspot als Backup — wir liefern die Empfehlung mit dem Buchungs-Mail.' },
    { q: 'Kann ich das Logo und die Farben anpassen?', a: 'Im Pro-Tarif: ja, vollständig — eigenes Logo, eigene Farben, eigene Domain. Im Event-Tarif: der Eventname erscheint in URL und Header.' },
    { q: 'Wie funktionieren die Foto-Challenges?', a: 'Wählt aus über 100 vorgefertigten Aufgaben oder erstellt eigene Challenges. Gäste sehen die aktiven Aufgaben direkt auf dem Smartphone, reichen ein Foto ein — und alle anderen können mit Emojis reagieren. Das Foto mit den meisten Reactions wird zur Top-Einreichung.' },
  ];
  const [open, setOpen] = useState(0);
  const isMobile = useIsMobile();
  return (
    <section id="faq" style={{ padding: isMobile ? '64px 0' : '120px 0' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr', gap: isMobile ? 32 : 80, alignItems: 'flex-start' }}>
          <div style={{ position: isMobile ? 'static' : 'sticky', top: 100 }}>
            <Eyebrow>FAQ</Eyebrow>
            <h2 style={{ fontSize: isMobile ? 36 : 48, lineHeight: 1.02, marginTop: 18, fontWeight: 500 }}>
              Häufige<br />Fragen.
            </h2>
            <p style={{ fontSize: 16, color: T.muted, marginTop: 18, lineHeight: 1.5 }}>
              Noch was offen? <a href="#" style={{ borderBottom: `1px solid ${T.ink}` }}>Schreib uns kurz</a> — wir antworten meist innerhalb einer Stunde.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {qs.map((it, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{ borderTop: `1px solid ${T.border}`, borderBottom: i === qs.length - 1 ? `1px solid ${T.border}` : 'none' }}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                    width: '100%', padding: '24px 0', background: 'transparent', border: 'none',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    fontSize: 19, fontWeight: 500, color: T.ink, textAlign: 'left', letterSpacing: '-0.015em',
                  }}>
                    <span>{it.q}</span>
                    <span style={{
                      width: 32, height: 32, borderRadius: '50%', background: isOpen ? T.ink : T.paperWarm,
                      color: isOpen ? T.paper : T.ink, fontSize: 18, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      transition: 'all .15s', flexShrink: 0, marginLeft: 16,
                    }}>{isOpen ? '−' : '+'}</span>
                  </button>
                  {isOpen && (
                    <p style={{ fontSize: 16, color: T.muted, lineHeight: 1.55, paddingBottom: 24, maxWidth: 600 }}>{it.a}</p>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ─── Final CTA ────────────────────────────────────────────────
function FinalCTA({ accent }) {
  const isMobile = useIsMobile();
  return (
    <section style={{ padding: isMobile ? '0 0 48px' : '0 0 80px' }}>
      <Container>
        <div style={{
          background: T.ink, color: T.paper, borderRadius: isMobile ? 24 : 32,
          padding: isMobile ? '56px 24px' : '88px 64px', textAlign: 'center',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 28 }}>
            <SnapCrewLogo size={isMobile ? 64 : 90} fg={T.paper} accent={accent} live />
          </div>
          <h2 style={{ fontSize: isMobile ? 40 : 64, lineHeight: 1.02, fontWeight: 500, letterSpacing: '-0.035em', maxWidth: 760, margin: '0 auto' }}>
            Bereit für<br />
            <span style={{ color: accent, fontStyle: 'italic', fontWeight: 400 }}>euren</span> Moment?
          </h2>
          <p style={{ fontSize: isMobile ? 16 : 18, color: T.paperOnInk, marginTop: 22, maxWidth: 480, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.5 }}>
            In zwei Minuten ist euer Event online. Probiert es kostenlos mit einem Test-Event.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 36, flexWrap: 'wrap' }}>
            <Button variant="accent" accent={accent}>Event starten →</Button>
            <Button variant="ghostDark">Demo ansehen</Button>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ─── Footer ───────────────────────────────────────────────────
function Footer({ accent }) {
  const isMobile = useIsMobile();
  return (
    <footer style={{ padding: '60px 0 40px', borderTop: `1px solid ${T.border}` }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : '1.5fr 1fr 1fr 1fr', gap: isMobile ? 28 : 40 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
              <SnapCrewLogo size={38} fg={T.ink} accent={accent} />
            </div>
            <p style={{ fontSize: 14, color: T.muted, lineHeight: 1.6, maxWidth: 280 }}>
              Live-Event-Fotos aus eurer Crew. Hergestellt mit ♥ in Deutschland.
            </p>
          </div>
          <FooterCol title="Produkt" items={['Funktionen', 'Anlässe', 'Preise', 'Demo']} />
          <FooterCol title="Firma" items={['Über uns', 'Blog', 'Presse', 'Karriere', 'Kontakt']} />
          <FooterCol title="Rechtliches" items={[{ label: 'Impressum', href: '/impressum.html' }, 'Datenschutz', 'AGB', 'DSGVO', 'Status']} />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 56, paddingTop: 24, borderTop: `1px solid ${T.border}`, flexWrap: 'wrap', gap: 12 }}>
          <span className="mono" style={{ color: T.mutedSoft, textTransform: 'none', letterSpacing: '0.04em' }}>
            © 2026 Content Fellows GmbH
          </span>
          <span className="mono" style={{ color: T.mutedSoft, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: accent }}></span>
            Alle Systeme online
          </span>
        </div>
      </Container>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div className="mono" style={{ color: T.mutedSoft, marginBottom: 16 }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it) => {
          const label = typeof it === 'string' ? it : it.label;
          const href = typeof it === 'string' ? '#' : it.href;
          return <li key={label}><a href={href} style={{ fontSize: 14, color: T.ink }}>{label}</a></li>;
        })}
      </ul>
    </div>
  );
}

// ─── App ──────────────────────────────────────────────────────
function App() {
  const accent = T.coral;
  return (
    <>
      <Header accent={accent} />
      <Hero accent={accent} />
      <HowItWorks accent={accent} />
      <Features accent={accent} />
      <Challenges accent={accent} />
      <UseCases accent={accent} />
      <Pricing accent={accent} />
      <FAQ />
      <FinalCTA accent={accent} />
      <Footer accent={accent} />
    </>
  );
}

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