const { useState, useEffect, useRef } = React;

// ─── ZENTRALES CTA-ZIEL + LAUNCH-STATUS ─────────────────────────
// Quelle: config.js. EIN Schalter (launchStatus) steuert CTA-Ziel UND
// App-Store-/Frühzugang-Wording. Nach erfolgreichem Review nur in config.js
// launchStatus: "waitlist" → "live" setzen, dann springt alles automatisch um.
const LAUNCH_STATUS = (window.SITE_CONFIG && window.SITE_CONFIG.launchStatus) || 'waitlist';
const IS_LIVE = LAUNCH_STATUS === 'live';
const CTA_HREF = (window.SITE_CONFIG && window.SITE_CONFIG.ctaUrl
  && window.SITE_CONFIG.ctaUrl[LAUNCH_STATUS]) || '/kontakt/';
const CTA_LABEL = (window.SITE_CONFIG && window.SITE_CONFIG.ctaLabel
  && window.SITE_CONFIG.ctaLabel[LAUNCH_STATUS]) || 'Frühzugang anfragen';
const goCTA = () => { window.location.href = CTA_HREF; };

// Hosting-Wording: erst nach EU-DB-Migration "ausschließlich EU" behaupten (config.js hosting.euOnly).
const IS_EU_ONLY = !!(window.SITE_CONFIG && window.SITE_CONFIG.hosting && window.SITE_CONFIG.hosting.euOnly);

// Seiten-Variante: 'neutral' (Startseite /) vs. 'stocky' (/stocky-alternative).
// Gesetzt in der HTML-Shell vor diesem Bundle (window.SITE_VARIANT).
// Steuert alle Stocky-Bezüge — neutral erwähnt Stocky nirgends.
const IS_STOCKY = (window.SITE_VARIANT || 'neutral') === 'stocky';

// ─── THEME ──────────────────────────────────────────────────────
function useTheme() {
  const getSystem = () => (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
  const getInitialMode = () => {
    const v = localStorage.getItem('sk-theme');
    return (v === 'light' || v === 'dark') ? v : 'auto';
  };
  const [mode, setMode] = useState(getInitialMode);
  const [theme, setTheme] = useState(() => mode === 'auto' ? getSystem() : mode);
  useEffect(() => {
    if (!window.matchMedia) return;
    const mq = window.matchMedia('(prefers-color-scheme: dark)');
    const onChange = (e) => {
      if (mode !== 'auto') return;
      const next = e.matches ? 'dark' : 'light';
      setTheme(next);
      document.documentElement.setAttribute('data-theme', next);
    };
    mq.addEventListener ? mq.addEventListener('change', onChange) : mq.addListener(onChange);
    return () => { mq.removeEventListener ? mq.removeEventListener('change', onChange) : mq.removeListener(onChange); };
  }, [mode]);
  const cycle = () => {
    // light → dark → auto → light
    const next = mode === 'light' ? 'dark' : (mode === 'dark' ? 'auto' : 'light');
    setMode(next);
    if (next === 'auto') {
      localStorage.removeItem('sk-theme');
      const sys = getSystem();
      setTheme(sys);
      document.documentElement.setAttribute('data-theme', sys);
    } else {
      localStorage.setItem('sk-theme', next);
      setTheme(next);
      document.documentElement.setAttribute('data-theme', next);
    }
  };
  return [theme, cycle, mode];
}


// ─── MOBILE HOOK ────────────────────────────────
function useMobile() {
  const [mobile, setMobile] = useState(() => window.innerWidth <= 768);
  useEffect(() => {
    const fn = () => setMobile(window.innerWidth <= 768);
    window.addEventListener('resize', fn);
    return () => window.removeEventListener('resize', fn);
  }, []);
  return mobile;
}

// ─── BROWSER FRAME ──────────────────────────────────────────────
function BrowserFrame({ children, url = 'app.stockaro.de/lager', title = 'Screenshot folgt', width, style }) {
  return (
    <div className="browser-frame" style={{
      background: '#ffffff',
      border: '1px solid #d8d0c6',
      borderRadius: 12,
      overflow: 'hidden',
      boxShadow: '0 8px 32px rgba(28,25,22,0.12)',
      width: width || '100%',
      ...style,
    }}>
      {/* Browser bar */}
      <div className="browser-bar" style={{
        background: '#f2ede6',
        borderBottom: '1px solid #d8d0c6',
        padding: '10px 14px',
        display: 'flex',
        alignItems: 'center',
        gap: 10,
      }}>
        <div style={{ display: 'flex', gap: 5 }}>
          {['#f87171','#fbbf24','#34d399'].map((c,i) => (
            <div key={i} style={{ width: 10, height: 10, borderRadius: '50%', background: c, opacity: 0.7 }}/>
          ))}
        </div>
        <div className="browser-url" style={{
          flex: 1,
          background: '#ffffff',
          border: '1px solid #d8d0c6',
          borderRadius: 6,
          padding: '3px 10px',
          fontSize: 11,
          color: '#8c8278',
          fontFamily: 'Source Code Pro, monospace',
          letterSpacing: '0.3px',
        }}>{url}</div>
        <div style={{ width: 16, height: 16, opacity: 0.4 }}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <circle cx="12" cy="12" r="10"/>
            <line x1="2" y1="12" x2="22" y2="12"/>
            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
          </svg>
        </div>
      </div>
      {/* Content area */}
      {children || (
        <div className="screenshot-area" style={{
          background: '#f8f6f3',
          minHeight: 320,
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 12,
          padding: 32,
        }}>
          <div style={{
            width: 48, height: 48, borderRadius: 12,
            background: '#f0faf6', border: '1px solid #c0eddf',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="1.5" strokeLinecap="round">
              <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
            </svg>
          </div>
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontSize: 13, fontWeight: 500, color: '#52493f', marginBottom: 4 }}>{title}</div>
            <div style={{ fontFamily: 'Source Code Pro, monospace', fontSize: 10, letterSpacing: '1px', textTransform: 'uppercase', color: '#c4bab0' }}>Screenshot folgt</div>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── MIGRATION BANNER ───────────────────────────────────────────
function MigrationBanner() {
  const [visible, setVisible] = useState(() => localStorage.getItem('sk-banner') !== 'hidden');
  const hide = () => { setVisible(false); localStorage.setItem('sk-banner', 'hidden'); };
  if (!visible) return null;
  return (
    <div style={{
      background: '#0f6e56',
      borderBottom: '1px solid #0c5c47',
      padding: '10px 16px',
      display: 'flex',
      alignItems: 'center',
      gap: 12,
      position: 'sticky',
      top: 0,
      zIndex: 200,
    }}>
      <span style={{ fontFamily: 'Source Code Pro, monospace', fontSize: 10, letterSpacing: '1.4px', textTransform: 'uppercase', color: 'rgba(255,255,255,0.65)', flexShrink: 0 }}>Neu</span>
      <div style={{ width: 1, height: 16, background: 'rgba(255,255,255,0.2)', flexShrink: 0 }}/>
      <p style={{ fontSize: 13, color: '#ffffff', flex: 1, fontFamily: 'Inter, sans-serif', lineHeight: 1.4 }}>
        {IS_LIVE ? 'Neu: Stockaro ist jetzt im Shopify App Store.' : 'Neu: Stockaro jetzt als Frühzugang verfügbar.'}{' '}
        <span onClick={goCTA} style={{ textDecoration: 'underline', cursor: 'pointer', opacity: 0.85 }}>{CTA_LABEL} →</span>
      </p>
      <button onClick={hide} style={{ background: 'none', border: 'none', color: 'rgba(255,255,255,0.55)', cursor: 'pointer', fontSize: 20, lineHeight: 1, padding: '0 4px', flexShrink: 0 }}>×</button>
    </div>
  );
}

// ─── NAVIGATION ─────────────────────────────────────────────────
function Nav({ theme, mode, onCycleTheme }) {
  const mobile = useMobile();
  const [menuOpen, setMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', fn);
    return () => window.removeEventListener('scroll', fn);
  }, []);

  const links = [{ l: 'Produkt', h: 'produkt' }, { l: 'Migration', h: 'migration' }, { l: 'Preise', h: 'preise' }, { l: 'FAQ', h: 'faq' }];
  return (
    <>
    <nav className="nav-bg" style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: theme === 'dark' ? 'rgba(11,30,23,0.97)' : 'rgba(255,255,255,0.97)',
      backdropFilter: 'blur(16px)',
      borderBottom: '1px solid var(--color-border)',
      boxShadow: scrolled ? '0 1px 4px rgba(28,25,22,0.08)' : 'none',
      height: 60, display: 'flex', alignItems: 'center',
      padding: mobile ? '0 20px' : '0 48px',
      transition: 'box-shadow 200ms',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginRight: mobile ? 0 : 36, flex: mobile ? 1 : 'none' }}>
        <img src="assets/logo-icon.svg" width="28" height="28" alt="Stockaro" style={{ borderRadius: 6, display: 'block' }}/>
        <span style={{ fontSize: 16, fontWeight: 600, fontFamily: 'Geist, sans-serif', color: 'var(--color-fg-primary)', letterSpacing: '-0.4px' }}>Stockaro</span>
      </div>
      {!mobile && (
        <div style={{ display: 'flex', gap: 2, flex: 1 }}>
          {links.map(it => (
            <a key={it.h} href={'#' + it.h} style={{ fontSize: 14, fontWeight: 500, color: 'var(--color-fg-muted)', padding: '6px 12px', borderRadius: 6, cursor: 'pointer', transition: 'color 150ms' }}
              onMouseEnter={e => e.target.style.color='var(--color-fg-primary)'}
              onMouseLeave={e => e.target.style.color='var(--color-fg-muted)'}
            >{it.l}</a>
          ))}
          <span style={{ fontSize: 13, fontWeight: 500, color: IS_STOCKY ? '#d4921a' : '#0f6e56', background: IS_STOCKY ? '#fffbf0' : '#f0faf6', border: IS_STOCKY ? '1px solid #fce49e' : '1px solid #9ae3cf', padding: '4px 10px', borderRadius: 6, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 5 }}>
            <span style={{ width: 6, height: 6, background: IS_STOCKY ? '#d4921a' : '#0f6e56', borderRadius: '50%', display: 'inline-block', animation: 'pulse 2s ease-in-out infinite' }}/>
            {IS_STOCKY ? 'Stocky-Ende: 31.08.2026' : 'Für Shopify'}
          </span>
        </div>
      )}
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <button onClick={onCycleTheme} title={mode === 'auto' ? 'Theme: Auto (System) — Klick für Hell' : (mode === 'light' ? 'Theme: Hell — Klick für Dunkel' : 'Theme: Dunkel — Klick für Auto')} aria-label="Theme umschalten" style={{ background: 'none', border: '1px solid var(--color-border)', borderRadius: 6, padding: '5px 8px', cursor: 'pointer', color: 'var(--color-fg-muted)', display: 'flex', alignItems: 'center' }}>
          {mode === 'auto'
            ? <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 3 A9 9 0 0 0 12 21 Z" fill="currentColor"/></svg>
            : (mode === 'light'
              ? <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
              : <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>)
          }
        </button>
        {!mobile && <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--color-fg-secondary)', padding: '6px 12px', cursor: 'pointer' }}>Einloggen</span>}
        {mobile
          ? <button onClick={() => setMenuOpen(o => !o)} style={{ background: 'none', border: '1px solid var(--color-border)', borderRadius: 6, padding: '7px 8px', cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--color-fg-primary)" strokeWidth="2" strokeLinecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
            </button>
          : <button onClick={goCTA} style={{ fontSize: 14, fontWeight: 500, color: '#ffffff', background: '#0f6e56', border: '1px solid #0c5c47', borderRadius: 9999, padding: '7px 20px', cursor: 'pointer', transition: 'background 150ms' }}
              onMouseEnter={e => e.currentTarget.style.background='#0c5c47'}
              onMouseLeave={e => e.currentTarget.style.background='#0f6e56'}
            >{CTA_LABEL}</button>
        }
      </div>
    </nav>
    {mobile && menuOpen && (
      <div style={{ position: 'fixed', top: 60, left: 0, right: 0, zIndex: 99, background: 'var(--color-bg-surface)', borderBottom: '1px solid var(--color-border)', padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 4, boxShadow: '0 4px 16px rgba(28,25,22,0.1)' }}>
        {links.map(it => (
          <a key={it.h} href={'#' + it.h} onClick={() => setMenuOpen(false)} style={{ fontSize: 15, fontWeight: 500, color: 'var(--color-fg-primary)', padding: '10px 0', cursor: 'pointer', borderBottom: '1px solid var(--color-border-subtle)' }}>{it.l}</a>
        ))}
        <div style={{ padding: '8px 0', display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 6, height: 6, background: IS_STOCKY ? '#d4921a' : '#0f6e56', borderRadius: '50%', display: 'inline-block', animation: 'pulse 2s ease-in-out infinite' }}/>
          <span style={{ fontSize: 13, color: IS_STOCKY ? '#d4921a' : '#0f6e56', fontWeight: 500 }}>{IS_STOCKY ? 'Stocky-Ende: 31.08.2026' : 'Für Shopify'}</span>
        </div>
        <button onClick={goCTA} style={{ fontSize: 14, fontWeight: 500, color: '#ffffff', background: '#0f6e56', border: '1px solid #0c5c47', borderRadius: 9999, padding: '10px 0', cursor: 'pointer', marginTop: 8, width: '100%' }}>{CTA_LABEL}</button>
      </div>
    )}
    </>
  );
}

// ─── HERO ───────────────────────────────────────────────────────
function Hero() {
  const mobile = useMobile();
  return (
    <section className="hero-section" style={{ background: 'var(--color-bg)', padding: mobile ? '48px 20px 40px' : '80px 48px 64px', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: mobile ? 40 : 64, alignItems: 'center' }}>
        {/* Left */}
        <div className="animate-fadeup">
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            border: '1px solid #9ae3cf', borderRadius: 9999,
            padding: '4px 14px', marginBottom: 28,
            background: '#f0faf6',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#0f6e56', display: 'inline-block', animation: 'pulse 2s ease-in-out infinite' }}/>
            <span style={{ fontFamily: 'Source Code Pro, monospace', fontSize: 11, letterSpacing: '1.2px', textTransform: 'uppercase', color: '#0f6e56' }}>{IS_LIVE ? 'Jetzt verfügbar' : 'Lagerverwaltung für Shopify'}</span>
          </div>
          <h1 style={{
            fontFamily: 'Geist, sans-serif',
            fontSize: mobile ? 36 : 'clamp(40px, 5vw, 64px)',
            fontWeight: 600,
            lineHeight: 1.03,
            color: 'var(--color-fg-primary)',
            letterSpacing: '-0.03em',
            marginBottom: 24,
          }}>
            Einfachere<br/>
            Lagerprozesse für<br/>
            <span style={{ color: '#0f6e56' }}>deinen Shopify-Shop.</span>
          </h1>
          <p style={{
            fontSize: 18,
            lineHeight: 1.65,
            color: 'var(--color-fg-secondary)',
            marginBottom: 40,
            maxWidth: 460,
          }}>
            Stockaro hilft Shopify-Händlern, Bestände, Wareneingänge, Kommissionierung und Versand übersichtlich zu organisieren – einfach, praxisnah und direkt auf Shopify-Shops zugeschnitten.

            Für Shops, die bisher mit Tabellen arbeiten, noch kein WMS nutzen oder von einer anderen Lagerlösung wechseln möchten.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 32 }}>
            <button onClick={goCTA} style={{
              fontSize: 15, fontWeight: 500, color: '#ffffff',
              background: '#0f6e56', border: '1px solid #0c5c47',
              borderRadius: 9999, padding: '11px 28px', cursor: 'pointer',
              boxShadow: '0 2px 8px rgba(15,110,86,0.25)',
              transition: 'background 150ms, box-shadow 150ms',
            }}
            onMouseEnter={e => { e.currentTarget.style.background='#0c5c47'; e.currentTarget.style.boxShadow='0 4px 16px rgba(15,110,86,0.35)'; }}
            onMouseLeave={e => { e.currentTarget.style.background='#0f6e56'; e.currentTarget.style.boxShadow='0 2px 8px rgba(15,110,86,0.25)'; }}
            >{CTA_LABEL}</button>
            <button style={{
              fontSize: 15, fontWeight: 500, color: 'var(--color-fg-primary)',
              background: 'var(--color-bg-surface)', border: '1px solid var(--color-border)',
              borderRadius: 9999, padding: '11px 28px', cursor: 'pointer',
              boxShadow: '0 1px 2px rgba(28,25,22,0.06)',
            }}
            onMouseEnter={e => e.currentTarget.style.borderColor='var(--color-border-strong)'}
            onMouseLeave={e => e.currentTarget.style.borderColor='var(--color-border)'}
            >Migrationsguide ansehen →</button>
          </div>
          <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
            {['Keine Kreditkarte nötig', 'DSGVO-konform', 'Made in Germany'].map((t,i) => (
              <span key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'var(--color-fg-muted)' }}>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
                {t}
              </span>
            ))}
          </div>
        </div>

        {/* Right — Browser frame + floating WMS components */}
        {!mobile && (
        <div style={{ position: 'relative' }}>
          <BrowserFrame url="app.stockaro.de/lager" title="Lagerübersicht">
            <img src="uploads/Screenshot_Lager.png" alt="Stockaro Lagerübersicht" style={{ width: '100%', display: 'block' }}/>
          </BrowserFrame>

          {/* Floating: Low Stock Alert */}
          <div className="wms-float float" style={{
            position: 'absolute', bottom: -28, left: -36,
            background: '#fffbf0', border: '1px solid #fce49e',
            borderRadius: 10, padding: '12px 16px',
            boxShadow: '0 8px 24px rgba(212,146,26,0.15)',
            minWidth: 240, zIndex: 10,
          }}>
            <div className="low-stock-header" style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 10, paddingBottom: 8, borderBottom: '1px solid rgba(252,228,158,0.7)' }}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#d4921a" strokeWidth="2" strokeLinecap="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
              <span style={{ fontSize: 12, fontWeight: 600, color: '#9a6610', fontFamily: 'Geist, sans-serif' }}>Low Stock Alert — 3 SKUs</span>
            </div>
            {[{sku:'WZK-1180',n:'Werkzeugkoffer Pro 180-tlg.',c:8,m:40},{sku:'AKS-18V-4',n:'Akkuschrauber 18V (4Ah)',c:3,m:25},{sku:'KBI-300-100',n:'Kabelbinder 300mm (100er)',c:42,m:300}].map((item,i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: i < 2 ? 7 : 0 }}>
                <span style={{ fontFamily: 'Source Code Pro, monospace', fontSize: 10, color: '#52493f', letterSpacing: '0.5px', minWidth: 92 }}>{item.sku}</span>
                <span style={{ fontSize: 11, color: 'var(--color-fg-primary)', flex: 1 }}>{item.n}</span>
                <span style={{ fontSize: 11, color: '#d4921a', fontFamily: 'Source Code Pro, monospace', fontWeight: 500 }}>{item.c} Stk</span>
              </div>
            ))}
          </div>

          {/* Floating: SKU Display */}
          <div className="wms-float" style={{
            position: 'absolute', top: -20, right: -28,
            background: '#1c1916', borderRadius: 8,
            padding: '10px 14px',
            boxShadow: '0 8px 24px rgba(28,25,22,0.25)',
            zIndex: 10, animation: 'float 4s ease-in-out 1s infinite',
          }}>
            <div style={{ fontFamily: 'Source Code Pro, monospace', fontSize: 16, fontWeight: 500, color: '#9ae3cf', letterSpacing: '2px' }}>AKS-18V-4</div>
            <div style={{ fontSize: 10, color: '#8c8278', fontFamily: 'Inter, sans-serif', marginTop: 2 }}>Akkuschrauber 18V (4Ah) · Lager A-04</div>
          </div>
        </div>
        )}
      </div>
    </section>
  );
}

// ─── TRUST BAR ──────────────────────────────────────────────────
function TrustBar() {
  const mobile = useMobile();
  const items = [
    { icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="1.8" strokeLinecap="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>, label: '14 Tage kostenlos' },
    { icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="2" strokeLinecap="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>, label: 'DSGVO-konform' },
    { icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>, label: IS_EU_ONLY ? 'Hosting in der EU' : 'AVV auf Anfrage' },
    { icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="2" strokeLinecap="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>, label: 'Shopify-native' },
    { icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="2" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>, label: 'Keine Kreditkarte' },
    { icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="2" strokeLinecap="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>, label: 'Made in Germany' },
  ];
  return (
    <div className="trust-bar" style={{
      background: 'var(--color-bg-surface)',
      borderTop: '1px solid var(--color-border)',
      borderBottom: '1px solid var(--color-border)',
      padding: mobile ? '20px' : '18px 48px',
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: mobile ? 'repeat(2,1fr)' : 'repeat(6,1fr)', gap: mobile ? 12 : 0, justifyItems: mobile ? 'start' : 'center', alignItems: 'center' }}>
        {items.map((item, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            {item.icon}
            <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--color-fg-secondary)' }}>{item.label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}


// ─── PROBLEM SECTION ────────────────────────────────────────────
function ProblemSection() {
  const mobile = useMobile();
  const problems = [
    { icon: 'M9 17H7A5 5 0 0 1 7 7h2 M15 7h2a5 5 0 0 1 0 10h-2 M8 12h8', title: 'Bestand unklar', desc: 'Lagermengen stimmen nicht mit dem überein, was Shopify anzeigt. Korrekturen landen im Nirgendwo.' },
    { icon: 'M12 8v4l3 3 M3 12a9 9 0 1 0 18 0 9 9 0 0 0-18 0', title: 'Wareneingänge manuell', desc: 'Neue Ware wird auf Papier oder in Excel erfasst – und dann vergessen zu übertragen.' },
    { icon: 'M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2 M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2 M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2 M12 12h.01 M12 16h.01', title: 'Kommissionierung per Zettel', desc: 'Picklisten werden ausgedruckt oder per Zuruf verteilt. Fehler beim Packen sind vorprogrammiert.' },
    { icon: 'M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z M12 9v4 M12 17h.01', title: 'Fehlbestände zu spät', desc: 'Artikel sind ausverkauft, bevor jemand es merkt. Nachschub kommt immer einen Schritt zu spät.' },
    { icon: 'M3 3h18v18H3z M9 9h6 M9 12h6 M9 15h4', title: 'Zu viele Tools', desc: 'Shopify, Excel, E-Mail und Notizzettel – jedes System ein bisschen, nichts davon vollständig.' },
    { icon: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z', title: 'Kein Überblick', desc: 'Welche SKUs laufen gut? Was dreht sich nicht? Diese Fragen bleiben oft unbeantwortet.' },
  ];
  return (
    <section style={{ background: 'var(--color-bg-surface)', padding: mobile ? '64px 20px' : '96px 48px', borderTop: '1px solid var(--color-border)' }}>
      <div className="container">
        <p className="eyebrow">Lageralltag</p>
        <h2 style={{ fontFamily: 'Geist, sans-serif', fontSize: 36, fontWeight: 600, color: 'var(--color-fg-primary)', letterSpacing: '-0.02em', marginBottom: 16, maxWidth: 520 }}>
          Kommt dir das bekannt vor?
        </h2>
        <p style={{ fontSize: 16, color: 'var(--color-fg-secondary)', lineHeight: 1.65, marginBottom: 56, maxWidth: 520 }}>
          Viele Shopify-Händler stoßen mit wachsendem Bestellvolumen an die Grenzen von Tabellen und manuellen Abläufen. Stockaro räumt diese Prozesse auf.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: 16 }}>
          {problems.map((p, i) => (
            <div key={i} style={{
              background: 'var(--color-bg)',
              border: '1px solid var(--color-border)',
              borderRadius: 12, padding: '22px',
              display: 'flex', flexDirection: 'column', gap: 12,
            }}>
              <div style={{ width: 48, height: 48, background: '#fff5f5', border: '1px solid rgba(192,57,43,0.18)', borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#c0392b" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d={p.icon}/>
                </svg>
              </div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, fontFamily: 'Geist, sans-serif', color: 'var(--color-fg-primary)', marginBottom: 6 }}>{p.title}</div>
                <div style={{ fontSize: 13, color: 'var(--color-fg-muted)', lineHeight: 1.65 }}>{p.desc}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 32, padding: '20px 24px', background: '#f0faf6', border: '1px solid #9ae3cf', borderRadius: 12, display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="2" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
          <p style={{ fontSize: 15, color: '#0a4d3c', margin: 0, flex: 1 }}>
            Stockaro löst genau diese Probleme — ohne aufwendige Einrichtung, ohne IT-Projekt, ohne Einarbeitungswochen.
          </p>
          <button onClick={goCTA} style={{ fontSize: 13, fontWeight: 500, color: '#ffffff', background: '#0f6e56', border: '1px solid #0c5c47', borderRadius: 9999, padding: '8px 20px', cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap' }}>{CTA_LABEL}</button>
        </div>
      </div>
    </section>
  );
}

// ─── COMPARISON TABLE ───────────────────────────────────────────
function ComparisonTable() {
  const mobile = useMobile();
  const rows = [
    { feature: 'Shopify-Integration', stockaro: true },
    { feature: 'Barcode- / Kamera-Scanner', stockaro: true },
    { feature: 'CSV-Import & -Export', stockaro: true },
    { feature: 'Automatische Bestandsbuchung aus Bestellungen', stockaro: true },
    { feature: 'Wareneingang, Lieferschein & Pack-Workflow', stockaro: true },
    { feature: 'Low-Stock-Benachrichtigungen', stockaro: true },
    { feature: 'Produktfreigabe-Workflow für neue Produkte', stockaro: true },
    { feature: 'Rollen & Berechtigungen für Teams', stockaro: 'soon' },
  ];
  const Mark = ({ yes }) => yes === 'soon'
    ? <span style={{ fontFamily: 'Source Code Pro, monospace', fontSize: 9, letterSpacing: '0.8px', textTransform: 'uppercase', color: '#9a6610', background: '#fffbf0', border: '1px solid #fce49e', borderRadius: 9999, padding: '2px 7px' }}>Soon</span>
    : <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>;

  return (
    <section style={{ background: 'var(--color-bg)', padding: mobile ? '64px 20px' : '96px 48px', borderTop: '1px solid var(--color-border)' }}>
      <div className="container-sm">
        <p className="eyebrow">Funktionsübersicht</p>
        <h2 style={{ fontFamily: 'Geist, sans-serif', fontSize: 36, fontWeight: 600, lineHeight: 1.2, color: 'var(--color-fg-primary)', marginBottom: 16, letterSpacing: '-0.02em', maxWidth: 560 }}>
          Was Stockaro kann — und was noch kommt
        </h2>
        <p style={{ fontSize: 16, color: 'var(--color-fg-secondary)', lineHeight: 1.65, marginBottom: 48, maxWidth: 520 }}>
          Keine überdimensionierte Software, kein Overengineering. Stockaro deckt die Kernprozesse kleiner und mittlerer Shopify-Shops ab — pragmatisch und ohne langen Einarbeitungsaufwand.
        </p>
        <div className="card-surface" style={{
          background: 'var(--color-bg-surface)',
          border: '1px solid var(--color-border)',
          borderRadius: 12,
          overflow: 'hidden',
          boxShadow: '0 1px 3px rgba(28,25,22,0.06)',
        }}>
          {rows.map((row, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr 64px' : '1fr 140px', borderBottom: i < rows.length - 1 ? '1px solid var(--color-border)' : 'none', transition: 'background 150ms' }}
              onMouseEnter={e => e.currentTarget.style.background='rgba(240,250,246,0.25)'}
              onMouseLeave={e => e.currentTarget.style.background='transparent'}
            >
              <div style={{ padding: '15px 24px', fontSize: 14, color: 'var(--color-fg-primary)', fontFamily: 'Inter, sans-serif' }}>{row.feature}</div>
              <div style={{ padding: '15px 24px', display: 'flex', justifyContent: 'center', alignItems: 'center', borderLeft: '1px solid var(--color-border)' }}>
                <Mark yes={row.stockaro}/>
              </div>
            </div>
          ))}
        </div>
        <p style={{ fontSize: 13, color: 'var(--color-fg-muted)', marginTop: 20, textAlign: 'center', maxWidth: 600, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.6 }}>
          {IS_STOCKY
            ? 'Du wechselst von Stocky? Shopify stellt Stocky zum 31.08.2026 ein — deine vorhandenen Artikel lassen sich per CSV nach Stockaro übernehmen.'
            : 'Umstieg aus Tabellen oder einem Altsystem? Vorhandene Artikel lassen sich per CSV nach Stockaro übernehmen.'}
        </p>
      </div>
    </section>
  );
}

// ─── THREE STEPS ────────────────────────────────────────────────
function ThreeSteps() {
  const mobile = useMobile();
  const steps = [
    {
      num: '01',
      title: IS_LIVE ? 'App installieren' : 'Frühzugang anfragen',
      desc: IS_LIVE
        ? 'Stockaro aus dem Shopify App Store installieren. Verbindung wird automatisch hergestellt — kein technisches Setup nötig.'
        : 'Frühzugang über das Kontaktformular anfragen — wir richten deinen Zugang ein und melden uns per E-Mail. Kein technisches Setup nötig.',
      detail: IS_LIVE ? 'Dauert unter 5 Minuten.' : 'Antwort meist innerhalb eines Werktags.',
    },
    {
      num: '02',
      title: 'Bestand importieren',
      desc: IS_STOCKY
        ? 'Bestehende SKUs per CSV importieren — das Stocky-Spaltenformat (SKU, Bestand, Mindestbestand, Lieferant) wird automatisch erkannt.'
        : 'Bestehende SKUs per CSV importieren — gängige Spalten aus Tabellen oder Altsystem (SKU, Bestand, Mindestbestand, Lieferant) werden automatisch erkannt.',
      detail: 'Per CSV, Webhook oder manuell.',
    },
    {
      num: '03',
      title: 'Lager verwalten',
      desc: 'Bestände überwachen, Bestellungen bearbeiten, Lagerorte zuweisen — alles in einer Oberfläche, direkt aus Shopify.',
      detail: 'Sofort einsatzbereit.',
    },
  ];
  return (
    <section id="migration" style={{ background: 'var(--color-bg-surface)', padding: mobile ? '64px 20px' : '96px 48px', borderTop: '1px solid var(--color-border)' }}>
      <div className="container">
        <p className="eyebrow">Migration</p>
        <h2 style={{ fontFamily: 'Geist, sans-serif', fontSize: 36, fontWeight: 600, color: 'var(--color-fg-primary)', letterSpacing: '-0.02em', marginBottom: 16, maxWidth: 480 }}>
          In drei Schritten zum geordneten Lager
        </h2>
        <p style={{ fontSize: 16, color: 'var(--color-fg-secondary)', lineHeight: 1.65, marginBottom: 64, maxWidth: 480 }}>
          Stockaro ist schnell eingerichtet — egal ob du bisher mit Tabellen, einem anderen Tool oder noch gar keinem System gearbeitet hast.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: 16 }}>
          {steps.map((step, i) => (
            <div key={i} className="step-card" style={{
              background: 'var(--color-bg)',
              border: '1px solid var(--color-border)',
              borderRadius: 12,
              padding: step.hasFrame ? 0 : '28px 24px',
              overflow: 'hidden',
              boxShadow: '0 1px 3px rgba(28,25,22,0.05)',
              display: 'flex',
              flexDirection: 'column',
              transition: 'box-shadow 150ms, border-color 150ms',
            }}
            onMouseEnter={e => { e.currentTarget.style.boxShadow='0 4px 16px rgba(28,25,22,0.10)'; e.currentTarget.style.borderColor='var(--color-border-strong)'; }}
            onMouseLeave={e => { e.currentTarget.style.boxShadow='0 1px 3px rgba(28,25,22,0.05)'; e.currentTarget.style.borderColor='var(--color-border)'; }}
            >
              {step.hasFrame ? (
                <>
                  <BrowserFrame url="app.stockaro.de/bestellungen" title="Bestellungsübersicht" style={{ borderRadius: 0, border: 'none', borderBottom: '1px solid var(--color-border)', boxShadow: 'none' }}>
                    <div className="screenshot-area" style={{ background: 'var(--color-bg)', minHeight: 180, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 10, padding: 24 }}>
                      <div style={{ width: 40, height: 40, borderRadius: 10, background: '#f0faf6', border: '1px solid #c0eddf', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="1.5" strokeLinecap="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
                      </div>
                      <div style={{ textAlign: 'center' }}>
                        <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--color-fg-secondary)', marginBottom: 3 }}>Bestellungsübersicht</div>
                        <div style={{ fontFamily: 'Source Code Pro, monospace', fontSize: 10, letterSpacing: '1px', textTransform: 'uppercase', color: 'var(--color-fg-disabled)' }}>Screenshot folgt</div>
                      </div>
                    </div>
                  </BrowserFrame>
                  <div style={{ padding: '24px 24px 28px' }}>
                    <div style={{ width: 36, height: 36, borderRadius: '50%', background: '#f0faf6', border: '2px solid #9ae3cf', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                    <span style={{ fontFamily: 'Geist, sans-serif', fontSize: 16, fontWeight: 700, color: '#0f6e56' }}>{parseInt(step.num)}</span>
                  </div>
                    <h3 style={{ fontFamily: 'Geist, sans-serif', fontSize: 18, fontWeight: 600, color: 'var(--color-fg-primary)', marginBottom: 10 }}>{step.title}</h3>
                    <p style={{ fontSize: 14, color: 'var(--color-fg-secondary)', lineHeight: 1.65, marginBottom: 10 }}>{step.desc}</p>
                    <span style={{ fontFamily: 'Source Code Pro, monospace', fontSize: 11, color: 'var(--color-fg-muted)', letterSpacing: '0.5px' }}>{step.detail}</span>
                  </div>
                </>
              ) : (
                <>
                  <div style={{ width: 36, height: 36, borderRadius: '50%', background: '#f0faf6', border: '2px solid #9ae3cf', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                  <span style={{ fontFamily: 'Geist, sans-serif', fontSize: 16, fontWeight: 700, color: '#0f6e56' }}>{parseInt(step.num)}</span>
                </div>
                  <h3 style={{ fontFamily: 'Geist, sans-serif', fontSize: 18, fontWeight: 600, color: 'var(--color-fg-primary)', marginBottom: 10 }}>{step.title}</h3>
                  <p style={{ fontSize: 14, color: 'var(--color-fg-secondary)', lineHeight: 1.65, marginBottom: 12 }}>{step.desc}</p>
                  <span style={{ fontFamily: 'Source Code Pro, monospace', fontSize: 11, color: 'var(--color-fg-muted)', letterSpacing: '0.5px', marginTop: 'auto' }}>{step.detail}</span>
                </>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── FEATURES ───────────────────────────────────────────────────
function Features() {
  const mobile = useMobile();
  const features = [
    { icon: 'M20 7H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z M12 12h.01 M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2', title: 'Bestände verwalten', desc: 'Aktuelle Lagermengen auf einen Blick. Stockaro bucht Abgänge automatisch aus Shopify-Bestellungen.' },
    { icon: 'M12 2L2 7l10 5 10-5-10-5z M2 17l10 5 10-5 M2 12l10 5 10-5', title: 'Wareneingänge buchen', desc: 'Neue Ware einscannen und sofort einbuchen. Kein Zettel, kein Nachtippen in Tabellen.' },
    { icon: 'M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2 M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2 M9 12l2 2 4-4', title: 'Kommissionierung', desc: 'Offene Bestellungen als Pickliste anzeigen. Artikel einscannen, abhaken, fertig – kein Ausdrucken nötig.' },
    { icon: 'M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z M12 9v4 M12 17h.01', title: 'Fehlbestände erkennen', desc: 'Stockaro zeigt frühzeitig, welche Artikel zur Neige gehen – bevor der Shopify-Shop leer läuft.' },
    { icon: 'M3 3h3v3H3z M3 10.5h3v3H3z M3 18h3v3H3z M10.5 3h3v3h-3z M10.5 10.5h3v3h-3z M10.5 18h3v3h-3z M18 3h3v3h-3z M18 10.5h3v3h-3z M18 18h3v3h-3z', title: 'Barcode- & Kamera-Scanner', desc: 'Im Browser scannen — per Handy-Kamera oder optionalem Hardware-Scanner. Wareneingänge, Retouren und Umbuchungen direkt im Lager.' },
    { icon: 'M21 16V8a2 2 0 0 0-1-1.73L12 2 4 6.27A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73L12 22l8-4.27A2 2 0 0 0 21 16z M9 12l2 2 4-4', title: 'Packing & Versand', desc: 'Lieferschein mit einem Klick. Packstatus pro Bestellung, damit nichts doppelt oder vergessen wird.' },
  ];

  return (
    <section id="produkt" style={{ background: 'var(--color-bg)', padding: mobile ? '64px 20px' : '96px 48px', borderTop: '1px solid var(--color-border)' }}>
      <div className="container">
        <p className="eyebrow">Funktionen</p>
        <h2 style={{ fontFamily: 'Geist, sans-serif', fontSize: 36, fontWeight: 600, color: 'var(--color-fg-primary)', letterSpacing: '-0.02em', marginBottom: 56, maxWidth: 480 }}>
          Was Stockaro im Lageralltag leistet
        </h2>

        {/* 6 feature grid */}
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: 16, marginBottom: 20 }}>
          {features.map((f, i) => (
            <div key={i} className="feature-card" style={{
              background: 'var(--color-bg-surface)',
              border: '1px solid var(--color-border)',
              borderRadius: 12, padding: '22px',
              boxShadow: '0 1px 3px rgba(28,25,22,0.05)',
              transition: 'box-shadow 150ms, border-color 150ms',
            }}
            onMouseEnter={e => { e.currentTarget.style.boxShadow='0 4px 12px rgba(28,25,22,0.10)'; e.currentTarget.style.borderColor='var(--color-border-strong)'; }}
            onMouseLeave={e => { e.currentTarget.style.boxShadow='0 1px 3px rgba(28,25,22,0.05)'; e.currentTarget.style.borderColor='var(--color-border)'; }}
            >
              <div className="feature-icon-bg" style={{ width: 48, height: 48, background: '#f0faf6', border: '1px solid #c0eddf', borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d={f.icon}/>
                </svg>
              </div>
              <div style={{ fontSize: 15, fontWeight: 600, fontFamily: 'Geist, sans-serif', color: 'var(--color-fg-primary)', marginBottom: 8 }}>{f.title}</div>
              <div style={{ fontSize: 13, color: 'var(--color-fg-muted)', lineHeight: 1.65 }}>{f.desc}</div>
            </div>
          ))}
        </div>

        {/* Feature Highlight: Bestellungen / Packen */}
        <div className="feature-card" style={{
          background: 'var(--color-bg-surface)',
          border: '1px solid var(--color-border)',
          borderRadius: 16,
          overflow: 'hidden',
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
          gap: 0,
          boxShadow: '0 2px 8px rgba(28,25,22,0.08)',
          marginBottom: 20,
        }}>
          <div style={{ borderRight: mobile ? 'none' : '1px solid var(--color-border)', borderBottom: mobile ? '1px solid var(--color-border)' : 'none', overflow: 'hidden', order: mobile ? 1 : 0 }}>
            <BrowserFrame url="app.stockaro.de/bestellungen" style={{ borderRadius: 0, border: 'none', boxShadow: 'none' }}>
              <img src="uploads/Screenshot_Bestellungen.png" alt="Stockaro Bestellungen" style={{ width: '100%', display: 'block' }}/>
            </BrowserFrame>
          </div>
          <div style={{ padding: mobile ? '24px 20px' : '48px', order: mobile ? 0 : 1 }}>
            <span style={{ fontFamily: 'Source Code Pro, monospace', fontSize: 10, letterSpacing: '1.2px', textTransform: 'uppercase', color: '#0f6e56', background: '#f0faf6', border: '1px solid #c0eddf', borderRadius: 9999, padding: '3px 10px', display: 'inline-block', marginBottom: 20 }}>Fulfillment</span>
            <h3 style={{ fontFamily: 'Geist, sans-serif', fontSize: 28, fontWeight: 600, color: 'var(--color-fg-primary)', lineHeight: 1.25, letterSpacing: '-0.02em', marginBottom: 16 }}>
              Bestellungen packen & versenden
            </h3>
            <p style={{ fontSize: 15, color: 'var(--color-fg-secondary)', lineHeight: 1.7, marginBottom: 24 }}>
              Offene Bestellungen direkt im Lager abarbeiten. Picking-Status, Unterbestand-Warnungen und Lieferschein-Druck — alles in einer Ansicht, ohne Shopify-Tab wechseln zu müssen.
            </p>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {['Picking-Fortschritt pro Bestellung', 'Unterbestand & fehlende SKU sofort sichtbar', 'Lieferschein mit einem Klick drucken'].map((item, i) => (
                <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: 'var(--color-fg-secondary)' }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
                  {item}
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Feature Highlight: Produktfreigabe */}
        <div className="feature-card" style={{
          background: 'var(--color-bg-surface)',
          border: '1px solid var(--color-border)',
          borderRadius: 16,
          overflow: 'hidden',
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
          gap: 0,
          boxShadow: '0 2px 8px rgba(28,25,22,0.08)',
        }}>
          <div style={{ padding: mobile ? '24px 20px' : '48px' }}>
            <span style={{ fontFamily: 'Source Code Pro, monospace', fontSize: 10, letterSpacing: '1.2px', textTransform: 'uppercase', color: '#0f6e56', background: '#f0faf6', border: '1px solid #c0eddf', borderRadius: 9999, padding: '3px 10px', display: 'inline-block', marginBottom: 20 }}>NEU</span>
            <h3 style={{ fontFamily: 'Geist, sans-serif', fontSize: 28, fontWeight: 600, color: 'var(--color-fg-primary)', lineHeight: 1.25, letterSpacing: '-0.02em', marginBottom: 16 }}>
              Produktfreigabe-Workflow
            </h3>
            <p style={{ fontSize: 15, color: 'var(--color-fg-secondary)', lineHeight: 1.7, marginBottom: 24 }}>
              Neue Produkte, SKU-Änderungen und neue Varianten landen nicht automatisch in der Lagerliste — sondern erst nach gezielter Prüfung. So behältst du die Kontrolle darüber, was im Lager verwaltet wird.
            </p>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {['Neue Produkte & Varianten aus Shopify prüfen', 'SKU vergeben, umbenennen oder ignorieren', 'Kontrollierter, halbautomatischer Eintrag in die Lagerliste'].map((item, i) => (
                <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: 'var(--color-fg-secondary)' }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
                  {item}
                </li>
              ))}
            </ul>
          </div>
          <div style={{ borderLeft: mobile ? 'none' : '1px solid var(--color-border)', borderTop: mobile ? '1px solid var(--color-border)' : 'none', padding: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--color-bg)' }}>
            <BrowserFrame url="app.stockaro.de/freigabe" style={{ width: '100%' }}>
              <img src="uploads/Screenshot_Produktfreigabe.png" alt="Stockaro Produktfreigabe" style={{ width: '100%', display: 'block' }}/>
            </BrowserFrame>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── SCANNER SHOWCASE ───────────────────────────────────────────
function ScannerShowcase() {
  const mobile = useMobile();
  const [scanned, setScanned] = useState(false);
  useEffect(() => {
    const t = setInterval(() => setScanned(s => !s), 3200);
    return () => clearInterval(t);
  }, []);

  return (
    <section style={{ background: 'var(--color-bg-surface)', padding: mobile ? '64px 20px' : '96px 48px', borderTop: '1px solid var(--color-border)' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: mobile ? 40 : 80, alignItems: 'center' }}>
        {/* Phone + Browser mocks — two surfaces, one system */}
        <div style={{ display: 'flex', justifyContent: 'center', position: 'relative', order: mobile ? 0 : 0, minHeight: mobile ? 560 : 600, paddingTop: mobile ? 0 : 20 }}>

          {/* Desktop browser mock — sits behind the phone, offset */}
          {!mobile && (
          <div className="browser-frame" style={{
            position: 'absolute', left: -40, top: 60, width: 360, zIndex: 1,
            background: '#ffffff', border: '1px solid var(--color-border)',
            borderRadius: 10, overflow: 'hidden',
            boxShadow: '0 16px 40px rgba(28,25,22,0.12)',
            transform: 'rotate(-1.5deg)',
          }}>
            {/* Browser chrome */}
            <div className="browser-bar" style={{ background: '#f3efe8', borderBottom: '1px solid var(--color-border)', padding: '7px 10px', display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ display: 'flex', gap: 5 }}>
                <div style={{ width: 9, height: 9, borderRadius: '50%', background: '#e7695b' }}/>
                <div style={{ width: 9, height: 9, borderRadius: '50%', background: '#f1be4f' }}/>
                <div style={{ width: 9, height: 9, borderRadius: '50%', background: '#61c554' }}/>
              </div>
              <div className="browser-url" style={{ flex: 1, background: '#ffffff', border: '1px solid var(--color-border)', borderRadius: 5, padding: '3px 8px', display: 'flex', alignItems: 'center', gap: 6 }}>
                <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#8c8278" strokeWidth="2.5"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
                <span style={{ fontSize: 10, color: '#8c8278', fontFamily: 'Source Code Pro, monospace', letterSpacing: '0.3px' }}>app.stockaro.io / lager</span>
              </div>
            </div>
            {/* Desktop Lager view */}
            <div style={{ background: '#ffffff', padding: '12px 14px' }}>
              {/* Header row */}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
                <div>
                  <div style={{ fontSize: 9, color: '#0f6e56', fontFamily: 'Source Code Pro, monospace', letterSpacing: '1.1px', textTransform: 'uppercase', marginBottom: 2 }}>Lager · Hauptlager</div>
                  <div style={{ fontSize: 13, fontWeight: 600, fontFamily: 'Geist, sans-serif', color: 'var(--color-fg-primary)' }}>2.417 aktive SKUs</div>
                </div>
                <div style={{ display: 'flex', gap: 4 }}>
                  <div style={{ fontSize: 9, padding: '3px 7px', borderRadius: 4, background: '#f0faf6', color: '#0f6e56', fontWeight: 500 }}>+ Wareneingang</div>
                  <div style={{ fontSize: 9, padding: '3px 7px', borderRadius: 4, border: '1px solid var(--color-border)', color: 'var(--color-fg-muted)' }}>Export</div>
                </div>
              </div>
              {/* Table */}
              <div style={{ border: '1px solid var(--color-border)', borderRadius: 6, overflow: 'hidden' }}>
                {/* Table header */}
                <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 0.7fr 0.7fr', gap: 8, padding: '6px 10px', background: '#faf7f1', borderBottom: '1px solid var(--color-border)', fontSize: 8, fontFamily: 'Source Code Pro, monospace', letterSpacing: '0.6px', textTransform: 'uppercase', color: '#8c8278' }}>
                  <span>Produkt</span><span>SKU</span><span style={{ textAlign: 'right' }}>Bestand</span><span style={{ textAlign: 'right' }}>Status</span>
                </div>
                {[
                  { name: 'Kabelbinder 300mm', sku: '04232217', stock: '1.240', low: false },
                  { name: 'Werkzeugkoffer Pro', sku: '04232101', stock: '8', low: true },
                  { name: 'Akkuschrauber 18V', sku: '04231998', stock: '142', low: false },
                  { name: 'Schleifpapier K120', sku: '04231882', stock: '56', low: false },
                ].map((r, i) => (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 0.7fr 0.7fr', gap: 8, padding: '6px 10px', borderBottom: i < 3 ? '1px solid var(--color-border)' : 'none', alignItems: 'center' }}>
                    <span style={{ fontSize: 10, color: 'var(--color-fg-primary)', fontFamily: 'Geist, sans-serif', fontWeight: 500 }}>{r.name}</span>
                    <span style={{ fontSize: 9, color: 'var(--color-fg-muted)', fontFamily: 'Source Code Pro, monospace', letterSpacing: '0.3px' }}>{r.sku}</span>
                    <span style={{ fontSize: 10, color: 'var(--color-fg-primary)', fontFamily: 'Source Code Pro, monospace', textAlign: 'right', fontWeight: 500 }}>{r.stock}</span>
                    <span style={{ textAlign: 'right' }}>
                      <span style={{ fontSize: 8, fontFamily: 'Source Code Pro, monospace', letterSpacing: '0.5px', textTransform: 'uppercase', padding: '1px 5px', borderRadius: 9999, background: r.low ? '#fff1e0' : '#f0faf6', color: r.low ? '#9a6610' : '#0f6e56', border: `1px solid ${r.low ? '#fce49e' : '#c0eddf'}` }}>{r.low ? 'Niedrig' : 'OK'}</span>
                    </span>
                  </div>
                ))}
              </div>
              {/* Label under browser */}
              <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ fontFamily: 'Source Code Pro, monospace', fontSize: 8, letterSpacing: '1.2px', textTransform: 'uppercase', color: 'var(--color-fg-muted)' }}>Browser-App · kein Install</span>
                <div style={{ flex: 1, height: 1, background: 'var(--color-border)' }}/>
              </div>
            </div>
          </div>
          )}

          {/* Fixed-size iPhone shell */}
          <div style={{
            width: 254, flexShrink: 0, position: 'relative', zIndex: 2,
            marginLeft: mobile ? 0 : 80, marginTop: mobile ? 0 : 20,
            background: '#111',
            borderRadius: 40, padding: '10px',
            boxShadow: '0 20px 60px rgba(0,0,0,0.55), inset 0 0 0 1px #2a2a2a',
          }}>
            {/* Dynamic island */}
            <div style={{ width: 80, height: 22, background: '#000', borderRadius: 11, margin: '0 auto 5px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
              {scanned
                ? <div style={{ width: 18, height: 9, borderRadius: 5, background: '#c0392b', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><div style={{ width: 6, height: 6, borderRadius: '50%', background: '#ff6b6b' }}/></div>
                : <div style={{ width: 22, height: 8, borderRadius: 4, background: '#1a1a1a' }}/>
              }
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#1a1a1a' }}/>
            </div>

            {/* Screen — FIXED HEIGHT, content clips inside */}
            <div style={{ background: '#0b1e17', borderRadius: 30, overflow: 'hidden', height: 508 }}>

              {/* Status bar */}
              <div style={{ padding: '7px 16px 3px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: '#0b1e17' }}>
                <span style={{ fontSize: 10, fontWeight: 600, color: '#bdf5e8', fontFamily: 'Geist, sans-serif' }}>09:14</span>
                <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
                  {scanned
                    ? <div style={{ width: 24, height: 12, borderRadius: 6, background: '#c0392b', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><div style={{ width: 6, height: 6, borderRadius: '50%', background: '#ff9999' }}/></div>
                    : <>
                        <svg width="12" height="8" viewBox="0 0 24 16" fill="none" stroke="#bdf5e8" strokeWidth="2"><path d="M1 4C6-1 18-1 23 4"/><path d="M4 7c4-4 12-4 16 0"/><path d="M7 10c2-2 8-2 10 0"/><circle cx="12" cy="14" r="1.5" fill="#bdf5e8"/></svg>
                      </>
                  }
                  <svg width="12" height="8" viewBox="0 0 24 16" fill="#bdf5e8"><rect x="0" y="5" width="4" height="11" rx="1"/><rect x="6" y="3" width="4" height="13" rx="1"/><rect x="12" y="0" width="4" height="16" rx="1"/></svg>
                  <div style={{ width: 19, height: 9, border: '1.5px solid rgba(189,245,232,0.5)', borderRadius: 3, padding: '1px 1.5px', display: 'flex', alignItems: 'center' }}>
                    <div style={{ width: scanned ? '77%' : '88%', height: '100%', background: '#bdf5e8', borderRadius: 1.5 }}/>
                  </div>
                </div>
              </div>

              {/* Tab bar */}
              <div style={{ padding: '3px 8px', display: 'flex', alignItems: 'center', gap: 2, borderBottom: '1px solid rgba(62,191,159,0.15)', background: '#0b1e17' }}>
                {['kliste','Scanner','Lager'].map((t,i) => (
                  <div key={i} style={{ fontSize: 9, fontWeight: 500, padding: '3px 7px', borderRadius: 9999, color: i===1 ? '#3ebf9f' : 'rgba(189,245,232,0.38)', border: i===1 ? '1px solid #3ebf9f' : '1px solid transparent', whiteSpace: 'nowrap' }}>{t}</div>
                ))}
                <div style={{ marginLeft: 'auto', display: 'flex', gap: 4, alignItems: 'center' }}>
                  <div style={{ width: 20, height: 20, borderRadius: 5, background: 'rgba(62,191,159,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#3ebf9f" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
                  </div>
                  <div style={{ fontSize: 8, color: 'rgba(189,245,232,0.4)', padding: '2px 5px', border: '1px solid rgba(189,245,232,0.12)', borderRadius: 4 }}>Logout</div>
                </div>
              </div>

              {/* Scrollable content — clips at screen bottom */}
              <div style={{ padding: '10px 9px', overflowY: 'hidden' }}>
                <div style={{ background: '#0e2720', border: '1px solid rgba(62,191,159,0.18)', borderRadius: 10, padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 7 }}>
                  <div style={{ fontSize: 12, fontWeight: 600, color: '#bdf5e8', fontFamily: 'Geist, sans-serif' }}>Scanner / Manuell buchen</div>

                  {/* SKU */}
                  <div>
                    <div style={{ fontSize: 9, color: '#3ebf9f', fontFamily: 'Source Code Pro, monospace', letterSpacing: '0.8px', marginBottom: 4 }}>SKU</div>
                    <div style={{ background: '#071510', border: '1px solid rgba(62,191,159,0.25)', borderRadius: 6, padding: '6px 9px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <span style={{ fontSize: 11, color: scanned ? '#bdf5e8' : 'rgba(189,245,232,0.3)', fontFamily: scanned ? 'Source Code Pro, monospace' : 'Inter, sans-serif', letterSpacing: scanned ? '0.5px' : 0 }}>
                        {scanned ? '04232217' : 'SKU eingeben oder scannen…'}
                      </span>
                      {scanned
                        ? <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="rgba(189,245,232,0.4)" strokeWidth="2.5" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                        : <div style={{ width: 26, height: 22, background: '#0e2720', border: '1px solid rgba(62,191,159,0.2)', borderRadius: 5, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#3ebf9f" strokeWidth="1.5" strokeLinecap="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><path d="M14 14h3v3m0 4h4v-4m-4 0h4"/></svg>
                          </div>
                      }
                    </div>
                  </div>

                  {/* Camera — only shown when scanned */}
                  {scanned && (
                    <div style={{ background: '#071510', border: '1px solid rgba(62,191,159,0.2)', borderRadius: 7, overflow: 'hidden' }}>
                      {/* Camera header */}
                      <div style={{ padding: '4px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid rgba(62,191,159,0.1)' }}>
                        <span style={{ fontSize: 8, color: 'rgba(189,245,232,0.55)', fontFamily: 'Source Code Pro, monospace' }}>Bereit für nächsten Scan…</span>
                        <div style={{ display: 'flex', gap: 4 }}>
                          <div style={{ width: 18, height: 14, background: 'rgba(62,191,159,0.1)', border: '1px solid rgba(62,191,159,0.2)', borderRadius: 3, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#3ebf9f" strokeWidth="2"><circle cx="12" cy="12" r="3"/></svg>
                          </div>
                          <div style={{ height: 14, background: '#c0392b', borderRadius: 3, padding: '0 5px', display: 'flex', alignItems: 'center', gap: 2 }}>
                            <div style={{ width: 4, height: 4, background: '#fff', borderRadius: 1 }}/>
                            <span style={{ fontSize: 7, color: '#fff', fontWeight: 700 }}>Stop</span>
                          </div>
                        </div>
                      </div>
                      {/* Camera viewport */}
                      <div style={{ height: 76, background: 'linear-gradient(160deg,#1c1a08,#2e2b0f,#1a1808)', position: 'relative', overflow: 'hidden' }}>
                        {/* Paper texture */}
                        <div style={{ position: 'absolute', inset: 0, opacity: 0.1, background: 'repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,180,0.5) 2px,rgba(255,255,180,0.5) 3px)' }}/>
                        {/* Label area */}
                        <div style={{ position: 'absolute', top: 6, left: 8, right: 24, bottom: 6, background: 'rgba(200,185,140,0.12)', borderRadius: 3 }}>
                          <div style={{ padding: '3px 5px' }}>
                            <div style={{ fontSize: 5, color: 'rgba(210,195,140,0.6)', lineHeight: 1.5, fontFamily: 'Inter, sans-serif' }}>Hengdian Street, Huangqi District, Wuhan, China</div>
                            <div style={{ fontSize: 5, color: 'rgba(210,195,140,0.5)', lineHeight: 1.4, fontFamily: 'Inter, sans-serif' }}>Official Website: service@niimbot.com</div>
                            <div style={{ fontSize: 7, color: 'rgba(210,195,140,0.85)', fontWeight: 700, marginTop: 1, fontFamily: 'Inter, sans-serif' }}>Package</div>
                            <div style={{ fontSize: 6, color: 'rgba(210,195,140,0.7)', fontFamily: 'Inter, sans-serif' }}>T12.5*74+35-65YWB Cable</div>
                          </div>
                        </div>
                        {/* Detection rectangle */}
                        <div style={{ position: 'absolute', top: 20, left: 8, width: 130, bottom: 10, border: '1.5px solid #3ebf9f', borderRadius: 3, boxShadow: '0 0 8px rgba(62,191,159,0.35)' }}>
                          {/* Barcode */}
                          <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: 'rgba(200,185,130,0.15)', padding: '3px 3px 1px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
                            <div style={{ display: 'flex', gap: 0.7, height: 18 }}>
                              {[2,1,3,1,2,1,1,3,2,1,2,3,1,2,1,3,2,1,2,1,3,1,2,3,1,2].map((w,i) => (
                                <div key={i} style={{ width: w, height: i%5===0?18:i%3===0?15:12, background: i%2===0 ? 'rgba(200,185,120,0.85)' : 'transparent' }}/>
                              ))}
                            </div>
                            <div style={{ fontSize: 6, color: 'rgba(200,185,120,0.8)', letterSpacing: '1px', fontFamily: 'Source Code Pro, monospace' }}>04232217</div>
                          </div>
                        </div>
                        {/* Scanline */}
                        <div style={{ position: 'absolute', left: 0, right: 0, height: 1.5, background: 'linear-gradient(90deg,transparent,#3ebf9f 30%,#9ae3cf 50%,#3ebf9f 70%,transparent)', animation: 'scanline 1.4s ease-in-out infinite', boxShadow: '0 0 4px rgba(62,191,159,0.7)' }}/>
                        {/* © label */}
                        <div style={{ position: 'absolute', bottom: 2, left: 0, right: 0, textAlign: 'center' }}>
                          <span style={{ fontSize: 5, color: 'rgba(189,245,232,0.2)', fontFamily: 'Inter, sans-serif' }}>© 2023 NiimBOT. All Rights Reserved.</span>
                        </div>
                      </div>
                      {/* Confirm row */}
                      <div style={{ padding: '3px 8px', background: 'rgba(62,191,159,0.07)', borderTop: '1px solid rgba(62,191,159,0.12)', display: 'flex', alignItems: 'center', gap: 4 }}>
                        <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#3ebf9f" strokeWidth="3" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
                        <span style={{ fontSize: 8, color: '#3ebf9f', fontFamily: 'Source Code Pro, monospace', letterSpacing: '1px' }}>04232217</span>
                      </div>
                    </div>
                  )}

                  {/* Buchungstyp */}
                  <div>
                    <div style={{ fontSize: 9, color: '#3ebf9f', fontFamily: 'Source Code Pro, monospace', letterSpacing: '0.8px', marginBottom: 4 }}>Buchungstyp</div>
                    <div style={{ background: '#071510', border: '1px solid rgba(62,191,159,0.2)', borderRadius: 6, padding: '6px 9px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <span style={{ fontSize: 11, color: '#bdf5e8' }}>Ausbuchen (allgemein)</span>
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#3ebf9f" strokeWidth="2.5" strokeLinecap="round"><polyline points="6 9 12 15 18 9"/></svg>
                    </div>
                  </div>

                  {/* Menge */}
                  <div>
                    <div style={{ fontSize: 9, color: '#3ebf9f', fontFamily: 'Source Code Pro, monospace', letterSpacing: '0.8px', marginBottom: 4 }}>Menge</div>
                    <div style={{ display: 'flex', gap: 4 }}>
                      {['1 Stk','5 Stk','1'].map((l,i) => (
                        <div key={l} style={{ flex: 1, background: i===2 ? 'rgba(62,191,159,0.12)' : '#071510', border: `1px solid ${i===2 ? '#3ebf9f' : 'rgba(62,191,159,0.2)'}`, borderRadius: 6, padding: '5px 0', textAlign: 'center', fontSize: 10, color: i===2 ? '#bdf5e8' : '#6de4c4', fontWeight: i===2 ? 600 : 400 }}>{l}</div>
                      ))}
                      <div style={{ width: 24, background: '#071510', border: '1px solid rgba(62,191,159,0.12)', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="rgba(189,245,232,0.3)" strokeWidth="2.5" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                      </div>
                    </div>
                  </div>

                  {/* Richtung */}
                  <div>
                    <div style={{ fontSize: 9, color: '#3ebf9f', fontFamily: 'Source Code Pro, monospace', letterSpacing: '0.8px', marginBottom: 4 }}>Richtung</div>
                    <div style={{ display: 'flex', gap: 6 }}>
                      <div style={{ flex: 1, background: '#c0392b', border: '1px solid #9b2526', borderRadius: 9999, padding: '5px 0', textAlign: 'center', fontSize: 10, color: '#fff', fontWeight: 500 }}>Ausbuchen (−)</div>
                      <div style={{ flex: 1, background: '#071510', border: '1px solid rgba(62,191,159,0.2)', borderRadius: 9999, padding: '5px 0', textAlign: 'center', fontSize: 10, color: '#6de4c4' }}>Einbuchen (+)</div>
                    </div>
                  </div>

                  {/* Kommentar */}
                  <div style={{ background: '#071510', border: '1px solid rgba(62,191,159,0.12)', borderRadius: 6, padding: '6px 9px' }}>
                    <span style={{ fontSize: 9, color: '#3ebf9f', fontFamily: 'Source Code Pro, monospace', letterSpacing: '0.5px', display: 'block', marginBottom: 3 }}>Kommentar (optional)</span>
                    <span style={{ fontSize: 10, color: 'rgba(189,245,232,0.2)', fontFamily: 'Inter, sans-serif' }}>z.B. Beschädigt, Retoure…</span>
                  </div>

                  {/* Buchen */}
                  <div style={{ background: '#0f6e56', borderRadius: 8, padding: '9px 0', textAlign: 'center', fontSize: 13, fontWeight: 600, color: '#fff' }}>Buchen</div>

                </div>
              </div>
            </div>
            {/* Home bar */}
            <div style={{ width: 64, height: 3, background: '#2a2a2a', borderRadius: 2, margin: '5px auto 2px' }}/>
          </div>

          {/* Low-stock alert label */}
          <div style={{ position: 'absolute', top: 4, right: -24, zIndex: 11 }}>
            <span style={{ fontFamily: 'Source Code Pro, monospace', fontSize: 9, letterSpacing: '1.2px', textTransform: 'uppercase', color: 'var(--color-fg-muted)', background: 'var(--color-bg-surface)', border: '1px solid var(--color-border)', borderRadius: 9999, padding: '2px 8px', whiteSpace: 'nowrap' }}>Unterbestand-Alert</span>
          </div>
          <div style={{
            position: 'absolute', top: 32, right: -16,
            background: 'rgba(248,246,243,0.93)',
            backdropFilter: 'blur(20px)',
            border: '1px solid rgba(212,146,26,0.25)',
            borderRadius: 12, padding: '10px 12px',
            boxShadow: '0 8px 24px rgba(28,25,22,0.15)',
            width: 188, zIndex: 10,
            animation: 'float 4s ease-in-out 0.5s infinite',
          }}>
            <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
              <img src="assets/logo-icon.svg" width="30" height="30" style={{ borderRadius: 8 }} alt=""/>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 3 }}>
                  <span style={{ fontFamily: 'Source Code Pro, monospace', fontSize: 9, letterSpacing: '1px', textTransform: 'uppercase', color: '#8c8278' }}>Stockaro</span>
                  <span style={{ fontSize: 10, color: '#c4bab0' }}>jetzt</span>
                </div>
                <div style={{ fontSize: 12, fontWeight: 600, color: '#1c1916', fontFamily: 'Geist, sans-serif', marginBottom: 2 }}>Unterbestand-Alert</div>
                <div style={{ fontSize: 11, color: '#52493f', lineHeight: 1.4 }}>Akkuschrauber 18V — nur noch 3 Stk. Nachbestellung empfohlen.</div>
              </div>
            </div>
          </div>
        </div>

        {/* Text */}
        <div>
          <p className="eyebrow">Browser-App</p>
          <h2 style={{ fontFamily: 'Geist, sans-serif', fontSize: 36, fontWeight: 600, color: 'var(--color-fg-primary)', letterSpacing: '-0.02em', marginBottom: 20, lineHeight: 1.2 }}>
            Am Regal scannen,<br/>am Desktop steuern
          </h2>
          <p style={{ fontSize: 16, color: 'var(--color-fg-secondary)', lineHeight: 1.7, marginBottom: 24 }}>
            Stockaro läuft komplett im Browser — am Smartphone <em style={{ fontStyle: 'normal', color: 'var(--color-fg-primary)', fontWeight: 500 }}>und</em> am Desktop. Kein App-Store, keine Installation, keine Update-Zyklen. URL öffnen, einloggen, scannen.
          </p>
          {/* Platform badges */}
          <div style={{ display: 'flex', gap: 8, marginBottom: 32, flexWrap: 'wrap' }}>
            {[
              { label: 'Mobile Browser', icon: <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="6" y="2" width="12" height="20" rx="2"/><line x1="11" y1="18" x2="13" y2="18"/></svg> },
              { label: 'Desktop Browser', icon: <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="4" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="18" x2="12" y2="21"/></svg> },
              { label: 'Kein Install', icon: <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg> },
            ].map(p => (
              <span key={p.label} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, fontFamily: 'Source Code Pro, monospace', letterSpacing: '0.8px', textTransform: 'uppercase', color: 'var(--color-fg-secondary)', background: 'var(--color-bg)', border: '1px solid var(--color-border)', borderRadius: 9999, padding: '4px 10px' }}>
                {p.icon}{p.label}
              </span>
            ))}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {[
              { title: 'Kein App-Store, kein Update-Zyklus', desc: 'Stockaro läuft direkt im Browser des Smartphones und Desktops. Login, fertig — neue Features sind sofort bei allen ausgerollt.' },
              { title: 'Scannen per Kamera oder Hardware-Scanner', desc: 'Mit der Handy-Kamera im Browser scannen — oder ein optionales Hardware-Scangerät anschließen. Keine native App nötig. Erfasst EAN, QR und Code 128.' },
              { title: 'Ein Datenstand, zwei Oberflächen', desc: 'Buchungen und Pickliste-Status synchronisieren live zwischen Mobile Browser und Desktop — immer derselbe Bestand.' },
            ].map((item, i) => (
              <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <div style={{ width: 32, height: 32, borderRadius: 8, background: '#f0faf6', border: '1px solid #c0eddf', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, fontFamily: 'Geist, sans-serif', color: 'var(--color-fg-primary)', marginBottom: 4 }}>{item.title}</div>
                  <div style={{ fontSize: 13, color: 'var(--color-fg-muted)', lineHeight: 1.6 }}>{item.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── TRUST / VERTRAUEN ──────────────────────────────────────────
const trustPoints = [
  {
    icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>,
    title: 'In Deutschland entwickelt',
    text: 'Stockaro wird in Deutschland entwickelt und betreut — kurze Wege und ein direkter Draht zum Team.',
  },
  {
    icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>,
    title: 'AVV auf Anfrage',
    text: 'Auftragsverarbeitungsvertrag nach Art. 28 DSGVO für jeden Händler — auf Anfrage erhältlich.',
  },
  {
    icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>,
    title: 'Umstieg per CSV',
    text: (IS_STOCKY ? 'Bestände aus Stocky oder aus Tabellen' : 'Bestände aus Tabellen oder einem Altsystem') + ' per CSV übernehmen — Standard-Spalten (SKU, Bestand, Mindestbestand, Lieferant) werden automatisch erkannt.',
  },
  {
    icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>,
    title: 'Transparenter Frühzugang',
    text: 'Wir sagen offen, wo Stockaro steht. Keine Kreditkarte, monatlich kündbar — und der Funktionsumfang wächst sichtbar weiter.',
  },
];

function TrustSection() {
  const mobile = useMobile();
  return (
    <section style={{ background: 'var(--color-bg)', padding: mobile ? '64px 20px' : '96px 48px', borderTop: '1px solid var(--color-border)' }}>
      <div className="container">
        <p className="eyebrow">Worauf du dich verlassen kannst</p>
        <h2 style={{ fontFamily: 'Geist, sans-serif', fontSize: 36, fontWeight: 600, color: 'var(--color-fg-primary)', letterSpacing: '-0.02em', marginBottom: 16, maxWidth: 520 }}>
          Ehrlich von Anfang an
        </h2>
        <p style={{ fontSize: 16, color: 'var(--color-fg-secondary)', marginBottom: 56, maxWidth: 580, lineHeight: 1.6 }}>
          Stockaro ist ein junges Produkt im Frühzugang. Statt erfundener Erfolgsgeschichten zeigen wir, worauf du dich heute schon verlassen kannst.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(4, 1fr)', gap: 16 }}>
          {trustPoints.map((p, i) => (
            <div key={i} style={{
              background: 'var(--color-bg-surface)',
              border: '1px solid var(--color-border)',
              borderRadius: 12, padding: '24px 22px',
              display: 'flex', flexDirection: 'column', gap: 12,
            }}>
              <div style={{ width: 40, height: 40, borderRadius: 10, background: '#f0faf6', border: '1px solid #9ae3cf', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                {p.icon}
              </div>
              <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--color-fg-primary)', fontFamily: 'Geist, sans-serif' }}>{p.title}</div>
              <p style={{ fontSize: 13, color: 'var(--color-fg-secondary)', lineHeight: 1.6, fontFamily: 'Inter, sans-serif', margin: 0 }}>{p.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── PRICING ────────────────────────────────────────────────────
function Pricing() {
  const mobile = useMobile();

  const plans = [
    {
      name: 'Basic',
      price: 12,
      desc: 'Für kleine Shops mit schlanken Lagerprozessen.',
      cta: CTA_LABEL,
      style: 'secondary',
      features: ['Bis zu 200 aktive SKUs', 'Bis zu 500 Bestellungen/Monat', 'Scanner', 'Automatische Bestandsbuchungen', 'Tagesübersicht', 'CSV-Import & -Export'],
    },
    {
      name: 'Standard',
      price: 29,
      desc: 'Für wachsende Shops mit mehr operativem Volumen.',
      cta: CTA_LABEL,
      style: 'primary',
      highlight: true,
      badge: 'Beliebtester Plan',
      features: ['Bis zu 500 aktive SKUs', 'Bis zu 2.000 Bestellungen/Monat', 'Alles aus Basic', 'Bestellfreigabe vor Pickliste', 'Lieferscheine', 'Pack-Workflow', 'Standard-Statistiken'],
    },
    {
      name: 'Pro',
      price: 79,
      desc: 'Für größere Shops mit anspruchsvolleren Lagerabläufen.',
      cta: CTA_LABEL,
      style: 'secondary',
      features: ['Bis zu 3.000 aktive SKUs', 'Bis zu 5.000 Bestellungen/Monat', 'Alles aus Standard', 'Erweiterte Statistiken', '__soon__Rollen & Rechte für Teams'],
    },
    {
      name: 'Business',
      price: 149,
      desc: 'Für große Setups mit hohem Lager- und Bestellvolumen.',
      cta: CTA_LABEL,
      style: 'outline',
      features: ['Bis zu 15.000 aktive SKUs', 'Bis zu 10.000 Bestellungen/Monat', 'Alles aus Pro', 'Priorisierter Support'],
    },
  ];

  return (
    <section id="preise" style={{ background: 'var(--color-bg-surface)', padding: mobile ? '64px 20px' : '96px 48px', borderTop: '1px solid var(--color-border)' }}>
      <div className="container">
        <p className="eyebrow">Preise</p>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, flexWrap: 'wrap', gap: 20 }}>
          <div>
            <h2 style={{ fontFamily: 'Geist, sans-serif', fontSize: 36, fontWeight: 600, color: 'var(--color-fg-primary)', letterSpacing: '-0.02em', marginBottom: 12 }}>
              Übersichtliche Preise
            </h2>
            <p style={{ fontSize: 16, color: 'var(--color-fg-secondary)' }}>Alle Pläne ohne versteckte Kosten. Jederzeit kündbar.</p>
          </div>

        </div>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(4, 1fr)', gap: 16, alignItems: 'stretch' }}>
          {plans.map((plan) => (
            <div key={plan.name} className={`pricing-card ${plan.highlight ? 'pricing-highlight' : ''}`} style={{
              background: 'var(--color-bg)',
              border: `1px solid ${plan.highlight ? 'rgba(15,110,86,0.35)' : 'var(--color-border)'}`,
              borderRadius: 12, padding: '28px 24px',
              display: 'flex', flexDirection: 'column', gap: 20,
              boxShadow: plan.highlight ? '0 4px 16px rgba(15,110,86,0.12)' : '0 1px 3px rgba(28,25,22,0.06)',
              position: 'relative',
            }}>
              {plan.badge && (
                <div style={{ position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)', whiteSpace: 'nowrap' }}>
                  <span style={{ fontFamily: 'Source Code Pro, monospace', fontSize: 10, letterSpacing: '1px', textTransform: 'uppercase', color: '#ffffff', background: '#0f6e56', borderRadius: 9999, padding: '3px 12px', boxShadow: '0 2px 6px rgba(15,110,86,0.3)' }}>{plan.badge}</span>
                </div>
              )}
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--color-fg-primary)', fontFamily: 'Geist, sans-serif', marginBottom: 10 }}>{plan.name}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 8 }}>
                  <span style={{ fontSize: 38, fontWeight: 600, fontFamily: 'Geist, sans-serif', color: 'var(--color-fg-primary)', lineHeight: 1, letterSpacing: '-0.03em' }}>€{plan.price}</span>
                  <span style={{ fontSize: 13, color: 'var(--color-fg-muted)' }}>/Monat</span>
                </div>
                <p style={{ fontSize: 13, color: 'var(--color-fg-muted)', lineHeight: 1.55 }}>{plan.desc}</p>
              </div>
              <button onClick={goCTA} style={{
                width: '100%', fontSize: 14, fontWeight: 500, padding: '10px 0',
                borderRadius: 9999, cursor: 'pointer', fontFamily: 'inherit',
                background: plan.style === 'primary' ? '#0f6e56' : plan.style === 'secondary' ? '#f0faf6' : 'transparent',
                color: plan.style === 'primary' ? '#ffffff' : '#0f6e56',
                border: plan.style === 'primary' ? '1px solid #0c5c47' : '1px solid #9ae3cf',
                transition: 'background 150ms',
              }}>{plan.cta}</button>
              <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 20, display: 'flex', flexDirection: 'column', gap: 11 }}>
                {plan.features.map(f => {
                const soon = f.startsWith('__soon__');
                const label = soon ? f.replace('__soon__', '') : f;
                return (
                  <div key={f} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    {soon
                      ? <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#d4921a" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                      : <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#0f6e56" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
                    }
                    <span style={{ fontSize: 13, color: soon ? '#9a6610' : 'var(--color-fg-secondary)' }}>{label}</span>
                    {soon && <span style={{ fontFamily: 'Source Code Pro, monospace', fontSize: 9, letterSpacing: '0.8px', textTransform: 'uppercase', color: '#9a6610', background: '#fffbf0', border: '1px solid #fce49e', borderRadius: 9999, padding: '1px 6px', flexShrink: 0 }}>geplant</span>}
                  </div>
                );
              })}
              </div>
            </div>
          ))}
        </div>
        <p style={{ textAlign: 'center', fontSize: 13, color: 'var(--color-fg-muted)', marginTop: 24 }}>
          Alle Pläne monatlich kündbar. Keine Kreditkarte für den Frühzugang nötig.
        </p>
      </div>
    </section>
  );
}

// ─── FAQ ────────────────────────────────────────────────────────
function FAQ() {
  const mobile = useMobile();
  const [open, setOpen] = useState(null);
  const faqs = [
    { q: 'Für wen ist Stockaro geeignet?', a: 'Stockaro richtet sich an kleine und mittlere Shopify-Händler, die ihre Lagerprozesse besser organisieren möchten – egal ob sie bisher mit Excel, manuellen Abläufen oder einem anderen Tool gearbeitet haben. Kein IT-Wissen nötig, kein Enterprise-Setup.' },
    ...(IS_STOCKY ? [{ q: 'Ist Stockaro eine Alternative zu Stocky?', a: 'Ja, Stockaro kann für Händler interessant sein, die eine schlanke Alternative zu Stocky suchen. Die App ist aber nicht nur dafür gedacht – sie eignet sich genauso für Shops, die bisher mit Tabellen, manuellen Abläufen oder anderen Lagerlösungen arbeiten.' }] : []),
    { q: 'Wie lange dauert die Einrichtung?', a: 'Die meisten Shops sind in unter einer Stunde eingerichtet. Bestehende SKUs lassen sich per CSV importieren. ' + (IS_STOCKY ? 'Wer von Stocky oder einem anderen System wechselt' : 'Wer von einem anderen System wechselt') + ', bekommt beim Import Unterstützung.' },
    { q: 'Ist Stockaro DSGVO-konform?', a: 'Ja. Stockaro wird in Deutschland entwickelt und in der EU betrieben. ' + (IS_EU_ONLY ? 'Deine Daten werden in der EU gespeichert.' : 'Einzelne technische Subdienstleister können außerhalb der EU sitzen — abgesichert über EU-Standardvertragsklauseln.') + ' Auf Anfrage stellen wir einen Auftragsverarbeitungsvertrag (AVV) nach Art. 28 DSGVO bereit.' },
    { q: 'Funktioniert Stockaro mit meinem Shopify-Plan?', a: 'Stockaro funktioniert mit allen Shopify-Plänen ab Shopify Basic (Basic, Shopify, Advanced, Plus). ' + (IS_LIVE ? 'Die Installation läuft direkt über den Shopify App Store.' : 'Stockaro ist aktuell im Frühzugang — den Zugang fragst du über das Kontaktformular an.') },
    { q: 'Kann ich Stockaro monatlich kündigen?', a: 'Ja, alle Pläne sind monatlich kündbar ohne Mindestlaufzeit. Deine Daten kannst du jederzeit vollständig als CSV exportieren.' },
  ];
  return (
    <section id="faq" className="faq-section" style={{ background: 'var(--color-bg)', padding: mobile ? '64px 20px' : '96px 48px', borderTop: '1px solid var(--color-border)' }}>
      <div className="container-xs">
        <p className="eyebrow">FAQ</p>
        <h2 style={{ fontFamily: 'Geist, sans-serif', fontSize: 36, fontWeight: 600, color: 'var(--color-fg-primary)', letterSpacing: '-0.02em', marginBottom: 48 }}>
          Häufige Fragen
        </h2>
        {faqs.map((faq, i) => (
          <div key={i} className="faq-divider" style={{ borderTop: '1px solid var(--color-border)', borderBottom: i === faqs.length - 1 ? '1px solid var(--color-border)' : 'none' }}>
            <button onClick={() => setOpen(open === i ? null : i)} style={{
              width: '100%', background: 'none', border: 'none', cursor: 'pointer',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              padding: '20px 0', textAlign: 'left', fontFamily: 'inherit',
            }}>
              <span style={{ fontSize: 15, fontWeight: 500, fontFamily: 'Geist, sans-serif', color: 'var(--color-fg-primary)', paddingRight: 24, lineHeight: 1.4 }}>{faq.q}</span>
              <span style={{ fontSize: 22, color: open === i ? '#0f6e56' : 'var(--color-fg-disabled)', flexShrink: 0, transition: 'transform 200ms, color 200ms', transform: open === i ? 'rotate(45deg)' : 'none', lineHeight: 1 }}>+</span>
            </button>
            {open === i && (
              <p style={{ fontSize: 15, color: 'var(--color-fg-secondary)', lineHeight: 1.75, paddingBottom: 20, margin: 0 }}>{faq.a}</p>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── FINAL CTA ──────────────────────────────────────────────────
function FinalCTA() {
  const mobile = useMobile();
  return (
    <section style={{ background: '#0f6e56', padding: mobile ? '64px 20px' : '96px 48px', textAlign: 'center' }}>
      <div className="container-xs">
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, border: '1px solid rgba(255,255,255,0.2)', borderRadius: 9999, padding: '4px 14px', marginBottom: 28, background: 'rgba(255,255,255,0.08)' }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#9ae3cf', display: 'inline-block', animation: 'pulse 2s ease-in-out infinite' }}/>
          <span style={{ fontFamily: 'Source Code Pro, monospace', fontSize: 11, letterSpacing: '1.2px', textTransform: 'uppercase', color: 'rgba(255,255,255,0.75)' }}>Frühzugang</span>
        </div>
        <h2 style={{ fontFamily: 'Geist, sans-serif', fontSize: 'clamp(32px, 5vw, 52px)', fontWeight: 600, lineHeight: 1.1, color: '#ffffff', marginBottom: 20, letterSpacing: '-0.03em' }}>
          Mehr Ordnung im Lager.<br/>Weniger Aufwand.
        </h2>
        <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.72)', lineHeight: 1.65, marginBottom: 40, maxWidth: 480, margin: '0 auto 40px' }}>
          Starte kostenlos und migrier deinen Bestand in unter 48 Stunden. Kein Risiko, keine Kreditkarte.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button onClick={goCTA} style={{
            fontSize: 15, fontWeight: 500, color: '#0f6e56',
            background: '#ffffff', border: '1px solid #ffffff',
            borderRadius: 9999, padding: '12px 32px', cursor: 'pointer', fontFamily: 'inherit',
            boxShadow: '0 2px 12px rgba(0,0,0,0.18)', transition: 'transform 150ms',
          }}
          onMouseEnter={e => e.currentTarget.style.transform='translateY(-1px)'}
          onMouseLeave={e => e.currentTarget.style.transform='translateY(0)'}
          >{CTA_LABEL}</button>
          <button onClick={goCTA} style={{
            fontSize: 15, fontWeight: 500, color: 'rgba(255,255,255,0.9)',
            background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.25)',
            borderRadius: 9999, padding: '12px 32px', cursor: 'pointer', fontFamily: 'inherit',
          }}>Demo buchen →</button>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ─────────────────────────────────────────────────────
function Footer() {
  const mobile = useMobile();
  const cols = [
    { title: 'Produkt', links: ['Lagerübersicht', 'Bestellungen', 'Scanner-App', 'Produktfreigabe', 'Changelog'] },
    { title: 'Migration', links: IS_STOCKY ? ['Von Stocky migrieren', 'CSV-Import'] : ['CSV-Import', 'Aus Altsystem übernehmen'] },
    { title: 'Rechtliches', links: [
      { label: 'Impressum', href: 'impressum.html' },
      { label: 'Datenschutz', href: 'datenschutz.html' },
      { label: 'AGB' },
    ] },
  ];
  return (
    <footer className="footer-bg" style={{ background: '#1c1916', borderTop: '1px solid #2a2420', padding: mobile ? '48px 20px 32px' : '64px 48px 40px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? 'repeat(2,1fr)' : '2fr 1fr 1fr 1fr 1fr', gap: mobile ? 24 : 40, marginBottom: mobile ? 40 : 64 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <img src="assets/logo-icon.svg" width="28" height="28" alt="Stockaro" style={{ borderRadius: 6 }}/>
              <span style={{ fontSize: 16, fontWeight: 600, fontFamily: 'Geist, sans-serif', color: '#f8f6f3' }}>Stockaro</span>
            </div>
            <p style={{ fontSize: 13, color: '#52493f', lineHeight: 1.65, maxWidth: 200, marginBottom: 12 }}>
              Die Lagerverwaltung für Shopify-Händler in DACH.
            </p>
            <a href="mailto:info@stockaro.de" style={{ fontSize: 12, color: '#3ebf9f', display: 'flex', alignItems: 'center', gap: 6, marginBottom: 12, textDecoration: 'none' }}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
              info@stockaro.de
            </a>
            <div style={{ fontFamily: 'Source Code Pro, monospace', fontSize: 10, letterSpacing: '1px', textTransform: 'uppercase', color: '#3ebf9f', background: 'rgba(62,191,159,0.1)', border: '1px solid rgba(62,191,159,0.2)', borderRadius: 9999, padding: '3px 10px', display: 'inline-block' }}>
              {IS_EU_ONLY ? 'Hosting: EU' : 'DSGVO-konform'}
            </div>
          </div>
          {cols.map(col => (
            <div key={col.title}>
              <div style={{ fontSize: 11, fontWeight: 500, color: '#52493f', marginBottom: 14, letterSpacing: '0.8px', textTransform: 'uppercase', fontFamily: 'Source Code Pro, monospace' }}>{col.title}</div>
              {col.links.map(l => {
                const item = typeof l === 'string' ? { label: l } : l;
                const common = { className: 'footer-link', style: { fontSize: 13, color: '#3a332c', marginBottom: 10, cursor: 'pointer', transition: 'color 150ms', display: 'block', textDecoration: 'none' }, onMouseEnter: e => e.target.style.color='#c0eddf', onMouseLeave: e => e.target.style.color='#3a332c' };
                return item.href
                  ? <a key={item.label} href={item.href} {...common}>{item.label}</a>
                  : <div key={item.label} {...common}>{item.label}</div>;
              })}
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid #2a2420', paddingTop: 24, display: 'flex', flexDirection: mobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: mobile ? 'flex-start' : 'center', flexWrap: 'wrap', gap: 12 }}>
          <span style={{ fontSize: 12, color: '#3a332c' }}>© {(window.SITE_CONFIG && window.SITE_CONFIG.year) || new Date().getFullYear()} {(window.SITE_CONFIG && window.SITE_CONFIG.vendorName) || 'Stockaro'} — Made in Germany</span>
          <div style={{ display: 'flex', gap: 20 }}>
            {[
              { label: 'Impressum', href: 'impressum.html' },
              { label: 'Datenschutz', href: 'datenschutz.html' },
              { label: 'AGB' },
              { label: 'Cookie-Einstellungen' },
            ].map(l => {
              const common = { style: { fontSize: 12, color: '#3a332c', cursor: 'pointer', transition: 'color 150ms', textDecoration: 'none' }, onMouseEnter: e => e.target.style.color='#8c8278', onMouseLeave: e => e.target.style.color='#3a332c' };
              return l.href
                ? <a key={l.label} href={l.href} {...common}>{l.label}</a>
                : <span key={l.label} {...common}>{l.label}</span>;
            })}
          </div>
        </div>
      </div>
    </footer>
  );
}

// ─── TWEAKS ─────────────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#0f6e56",
  "showBanner": true,
  "heroSize": "large",
  "pricingCurrency": "EUR"
}/*EDITMODE-END*/;

function TweaksPanel({ onClose }) {
  const [acc, setAcc] = useState(TWEAK_DEFAULTS.accentColor);
  return (
    <div style={{
      position: 'fixed', bottom: 24, right: 24, zIndex: 9999,
      background: 'var(--color-bg-surface)', border: '1px solid var(--color-border)',
      borderRadius: 12, padding: '20px', width: 260,
      boxShadow: '0 8px 32px rgba(28,25,22,0.16)',
      fontFamily: 'Inter, sans-serif',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <span style={{ fontFamily: 'Geist, sans-serif', fontWeight: 600, fontSize: 13, color: 'var(--color-fg-primary)' }}>Tweaks</span>
        <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--color-fg-muted)', fontSize: 16 }}>×</button>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div>
          <label style={{ fontSize: 12, color: 'var(--color-fg-muted)', display: 'block', marginBottom: 6 }}>Akzentfarbe</label>
          <div style={{ display: 'flex', gap: 6 }}>
            {['#0f6e56','#2563eb','#9333ea','#dc2626'].map(c => (
              <button key={c} onClick={() => { setAcc(c); document.documentElement.style.setProperty('--color-green', c); window.parent.postMessage({type:'__edit_mode_set_keys', edits:{accentColor:c}}, '*'); }} style={{ width: 28, height: 28, borderRadius: '50%', background: c, border: acc === c ? '3px solid var(--color-fg-primary)' : '2px solid transparent', cursor: 'pointer' }}/>
            ))}
          </div>
        </div>
        <div>
          <label style={{ fontSize: 12, color: 'var(--color-fg-muted)', display: 'block', marginBottom: 6 }}>Abschnitte</label>
          {['Migration Banner', 'Scanner Showcase', 'Vertrauen'].map(s => (
            <div key={s} style={{ fontSize: 13, color: 'var(--color-fg-secondary)', padding: '4px 0' }}>✓ {s}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── APP ────────────────────────────────────────────────────────
function App() {
  const [theme, cycleTheme, themeMode] = useTheme();
  const [tweaks, setTweaks] = useState(false);

  useEffect(() => {
    window.addEventListener('message', e => {
      if (e.data?.type === '__activate_edit_mode') setTweaks(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaks(false);
    });
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
  }, []);

  return (
    <>
      <MigrationBanner/>
      <Nav theme={theme} mode={themeMode} onCycleTheme={cycleTheme}/>
      <Hero/>
      <TrustBar/>
      <ProblemSection/>
      <ComparisonTable/>
      <ThreeSteps/>
      <Features/>
      <ScannerShowcase/>
      <TrustSection/>
      <Pricing/>
      <FAQ/>
      <FinalCTA/>
      <Footer/>
      {tweaks && <TweaksPanel onClose={() => setTweaks(false)}/>}
    </>
  );
}

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