// ─────────────────────────────────────────────────────────────
// enerly · Landing Page
// Pulls brand from window.ENERLY_COLORS (assets/logo-svg.js)
// Renders the same content tree in two modes: 'desktop' (1440)
// and 'mobile' (375). All measurements absolute (no media queries)
// because each version lives in its own fixed-width artboard.
// ─────────────────────────────────────────────────────────────

const C = window.ENERLY_COLORS;
const fNun = "'Nunito', system-ui, sans-serif";
const fInter = "'Inter', system-ui, sans-serif";
const fMono = "'JetBrains Mono', ui-monospace, monospace";

// ── Tiny stroke icons used across landing sections ──────────
const LI = {
  lock: (s = 24) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></svg>,
  phone:(s = 24) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="6" y="2" width="12" height="20" rx="2.5"/><path d="M10 18h4"/></svg>,
  flag: (s = 24) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M4 21V4M4 4h14l-3 4 3 4H4"/></svg>,
  camera:(s=24) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7h3l2-3h8l2 3h3v13H3z"/><circle cx="12" cy="13" r="4"/></svg>,
  spark:(s = 24) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 17l5-6 4 4 8-9"/><path d="M15 6h6v6"/></svg>,
  bell: (s = 24) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M6 8a6 6 0 0112 0v5l2 3H4l2-3V8zM9 19a3 3 0 006 0"/></svg>,
  meters:(s=24) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="7" cy="12" r="4"/><circle cx="17" cy="12" r="4"/><path d="M7 8v4l2 1M17 8v4l2 1"/></svg>,
  cloud:(s = 24) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M7 18a4 4 0 010-8 6 6 0 0111.5 1A3.5 3.5 0 0118 18H7z"/><path d="M12 11v6M9 14l3 3 3-3"/></svg>,
  shield:(s=24) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l9 4v6c0 5-3.5 9-9 10-5.5-1-9-5-9-10V6l9-4z"/><path d="M9 12l2 2 4-4"/></svg>,
  bolt: (s = 24) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/></svg>,
  table:(s = 24) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M3 15h18M9 4v16M15 4v16"/></svg>,
  check:(s = 18) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5 9-11"/></svg>,
  noEye:(s = 24) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 3l18 18M10.6 6.1A10 10 0 0121 12c-.5 1-1.2 2-2 2.8M6.4 6.4A10 10 0 003 12c1.7 3 4.8 6 9 6 1.6 0 3.1-.4 4.4-1.1M9.9 9.9a3 3 0 004.2 4.2"/></svg>,
  apple:(s = 22) => <svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 12.8c0-2.4 2-3.5 2.1-3.6-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-1.9-.9-3.2-.8-1.6.0-3.2.9-4 2.4-1.7 3-.4 7.3 1.2 9.7.8 1.2 1.8 2.5 3.1 2.4 1.2 0 1.7-.8 3.2-.8s1.9.8 3.2.8c1.3 0 2.2-1.2 3-2.4.9-1.4 1.3-2.7 1.3-2.8-.1 0-2.7-1-2.7-3.9zm-2.4-7.1c.7-.8 1.1-2 1-3.2-1 0-2.2.7-2.9 1.5-.6.7-1.2 1.9-1 3.1 1.1.1 2.2-.6 2.9-1.4z"/></svg>,
  play: (s = 22) => <svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor"><path d="M4.5 2.5v19l1.4.8 13.6-9.6c.5-.4.5-1.2 0-1.6L5.9 1.7l-1.4.8z" opacity=".95"/></svg>,
};

// ── App-store / Play-store buttons ──────────────────────────
function StoreButton({ kind = 'apple', mode = 'desktop', dark = false }) {
  const isApple = kind === 'apple';
  const sub = isApple ? 'Download im' : 'JETZT BEI';
  const main = isApple ? 'App Store' : 'Google Play';
  const bg = dark ? '#fff' : C.navyDeep;
  const fg = dark ? C.navyDeep : '#fff';
  const h = mode === 'desktop' ? 56 : 52;
  const pad = mode === 'desktop' ? '0 22px' : '0 18px';
  return (
    <button className="enerly-cta" style={{
      height: h, padding: pad, borderRadius: 12, border: 'none',
      background: bg, color: fg,
      display: 'inline-flex', alignItems: 'center', gap: 12,
      fontFamily: fInter, cursor: 'pointer',
      boxShadow: dark ? '0 2px 8px rgba(10,34,54,0.10)' : '0 4px 14px rgba(10,34,54,0.22)',
    }}>
      {isApple ? LI.apple(mode === 'desktop' ? 26 : 24) : LI.play(mode === 'desktop' ? 22 : 20)}
      <div style={{ textAlign: 'left', lineHeight: 1, position: 'relative', zIndex: 1 }}>
        <div style={{ fontSize: 9, letterSpacing: '0.08em', opacity: 0.75, fontWeight: 500 }}>{sub}</div>
        <div style={{ fontFamily: fNun, fontWeight: 800, fontSize: mode === 'desktop' ? 19 : 17, marginTop: 3, letterSpacing: '-0.01em' }}>{main}</div>
      </div>
    </button>
  );
}

// ── Pro pill ────────────────────────────────────────────────
function ProPill({ small = false }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: small ? '3px 8px' : '4px 10px', borderRadius: 100,
      background: `linear-gradient(135deg, ${C.tealDeep} 0%, ${C.navyDeep} 100%)`,
      color: '#fff', fontFamily: fNun, fontWeight: 800,
      fontSize: small ? 9.5 : 10.5, letterSpacing: '0.1em', textTransform: 'uppercase',
    }}>
      <svg width={small ? 8 : 10} height={small ? 8 : 10} viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.7 5.3L19 9l-5.3 1.7L12 16l-1.7-5.3L5 9l5.3-1.7L12 2z"/></svg>
      Pro
    </span>
  );
}

// ─────────────────────────────────────────────────────────────
// Phone mockup for hero — self-contained dashboard
// Width is fixed; caller sets the scale.
// ─────────────────────────────────────────────────────────────
function HeroPhoneMockup({ width = 320 }) {
  const aspect = 2.05; // height / width for phone body
  const h = width * aspect;
  return (
    <div style={{
      width, height: h, borderRadius: width * 0.13,
      background: C.navyDeep, padding: width * 0.025,
      boxShadow: `0 40px 80px -20px rgba(10,34,54,0.45), 0 12px 30px rgba(10,34,54,0.25)`,
      position: 'relative',
    }}>
      {/* Inner screen */}
      <div style={{
        width: '100%', height: '100%', borderRadius: width * 0.10,
        background: C.warmWhite, overflow: 'hidden', position: 'relative',
        display: 'flex', flexDirection: 'column',
      }}>
        {/* Notch */}
        <div style={{
          position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
          width: width * 0.32, height: width * 0.06, background: C.navyDeep, borderRadius: 999, zIndex: 3,
        }} />
        {/* Status bar */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: `${width * 0.06}px ${width * 0.06}px ${width * 0.025}px`,
          fontFamily: fInter, fontSize: width * 0.04, fontWeight: 600, color: C.navyDeep,
        }}>
          <span>9:41</span>
          <span style={{ display: 'flex', gap: 4 }}>
            <span style={{ width: 16, height: 8, background: C.navyDeep, borderRadius: 1.5 }}/>
            <span style={{ width: 16, height: 8, border: `1.2px solid ${C.navyDeep}`, borderRadius: 2 }}/>
          </span>
        </div>

        {/* App header */}
        <div style={{ padding: `${width * 0.025}px ${width * 0.06}px 0`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <EnerlyLockup orientation="horizontal" size={width * 0.085} mode="gradient" textMode="mono-dark" gap={width * 0.025}/>
          <div style={{ width: width * 0.085, height: width * 0.085, borderRadius: '50%', background: C.cream }}/>
        </div>

        {/* Greeting */}
        <div style={{ padding: `${width * 0.045}px ${width * 0.06}px 0` }}>
          <div style={{ fontSize: width * 0.035, color: C.tealDeep, fontFamily: fInter, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Diese Woche</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 4 }}>
            <div className="enerly-num-reveal" style={{ fontFamily: fNun, fontWeight: 800, fontSize: width * 0.14, color: C.navy, lineHeight: 1, letterSpacing: '-0.02em' }}>87,4</div>
            <div style={{ fontFamily: fNun, fontWeight: 700, fontSize: width * 0.055, color: '#6B7480' }}>kWh</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: width * 0.018, fontSize: width * 0.034, color: '#5BA084', fontFamily: fInter, fontWeight: 600 }}>
            <span style={{ display: 'inline-block', width: 0, height: 0, borderLeft: '4px solid transparent', borderRight: '4px solid transparent', borderBottom: '6px solid #5BA084', transform: 'rotate(180deg)' }}/>
            12% weniger als letzte Woche
          </div>
        </div>

        {/* Chart */}
        <div style={{ padding: `${width * 0.05}px ${width * 0.06}px 0` }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: width * 0.018, height: width * 0.28 }}>
            {[44, 64, 36, 52, 78, 48, 60].map((bh, i) => (
              <div key={i} className="enerly-bar" style={{
                flex: 1, height: `${bh}%`, borderRadius: width * 0.012,
                background: i === 4
                  ? `linear-gradient(180deg, ${C.tealLight} 0%, ${C.tealDeep} 100%)`
                  : C.cream,
                animationDelay: `${0.55 + i * 0.075}s`,
              }}/>
            ))}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: width * 0.026, color: '#9AA1AB', fontFamily: fInter }}>
            {['Mo','Di','Mi','Do','Fr','Sa','So'].map(d => <span key={d}>{d}</span>)}
          </div>
        </div>

        {/* Forecast card */}
        <div style={{ padding: `${width * 0.05}px ${width * 0.06}px 0` }}>
          <div style={{
            background: `linear-gradient(135deg, ${C.navy} 0%, ${C.tealDeep} 100%)`,
            borderRadius: width * 0.04, padding: `${width * 0.04}px ${width * 0.045}px`,
            color: '#fff', position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ fontSize: width * 0.03, opacity: 0.7, fontFamily: fInter, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Jahresprognose</div>
              <ProPill small/>
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 6 }}>
              <div style={{ fontFamily: fNun, fontWeight: 800, fontSize: width * 0.10, letterSpacing: '-0.02em' }}>−€127</div>
            </div>
            <div style={{ fontSize: width * 0.03, opacity: 0.85, marginTop: 2 }}>vs. Vorjahr · Hochrechnung Dez</div>
          </div>
        </div>

        {/* Meter rows */}
        <div style={{ padding: `${width * 0.04}px ${width * 0.06}px 0`, display: 'flex', flexDirection: 'column', gap: width * 0.022 }}>
          {[
            { label: 'Strom', val: '2.847', unit: 'kWh', color: C.tealDeep },
            { label: 'Gas',   val: '11.230', unit: 'kWh', color: '#D6604D' },
            { label: 'Wasser',val: '142', unit: 'm³', color: C.teal },
          ].map(m => (
            <div key={m.label} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: `${width * 0.025}px ${width * 0.03}px`,
              background: '#fff', borderRadius: width * 0.03,
              border: `1px solid ${C.cream}`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: width * 0.025 }}>
                <div style={{ width: width * 0.06, height: width * 0.06, borderRadius: '50%', background: m.color, opacity: 0.18 }}/>
                <div style={{ fontFamily: fInter, fontWeight: 600, fontSize: width * 0.035, color: C.navy }}>{m.label}</div>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                <div style={{ fontFamily: fNun, fontWeight: 700, fontSize: width * 0.04, color: C.navy }}>{m.val}</div>
                <div style={{ fontFamily: fInter, fontSize: width * 0.028, color: '#9AA1AB' }}>{m.unit}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Bottom nav */}
        <div style={{
          marginTop: 'auto', display: 'flex', justifyContent: 'space-around', alignItems: 'center',
          padding: `${width * 0.03}px 0 ${width * 0.05}px`,
          borderTop: `1px solid ${C.cream}`,
          background: C.warmWhite,
        }}>
          {['home','chart','bulb','phone','gear'].map((k, i) => (
            <div key={k} style={{
              width: width * 0.05, height: width * 0.05, borderRadius: 4,
              background: i === 0 ? C.navy : 'transparent',
              border: i !== 0 ? `1.6px solid ${C.tealDeep}` : 'none', opacity: i === 0 ? 1 : 0.6,
            }}/>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SECTION 1 · HERO
// ─────────────────────────────────────────────────────────────
function HeroAppPreview({ width = 340 }) {
  // Native Phone shell size from app/shell.jsx (412 + 8*2 border, 892 + 8*2)
  const Screen = (typeof window !== 'undefined') ? window.HomeProScreen : null;
  if (!Screen) return <HeroPhoneMockup width={width}/>;

  const NATIVE_W = 428, NATIVE_H = 908;
  const scale = width / NATIVE_W;
  return (
    <div style={{
      width: NATIVE_W * scale,
      height: NATIVE_H * scale,
      position: 'relative',
      filter: 'drop-shadow(0 40px 50px rgba(10,34,54,0.30)) drop-shadow(0 8px 16px rgba(10,34,54,0.18))',
    }}>
      <div style={{
        width: NATIVE_W, height: NATIVE_H,
        transform: `scale(${scale})`, transformOrigin: 'top left',
      }}>
        <Screen/>
      </div>
    </div>
  );
}

window.HeroAppPreview = HeroAppPreview;

function Hero({ mode }) {
  const isD = mode === 'desktop';
  // ── Tweakable copy & composition ────────────────────────────
  // Three voices reshape WHO the brand is talking to. Composition reshapes
  // HOW the hero is laid out on desktop (mobile always stays single-column).
  const voice = (typeof window !== 'undefined' && window.ENERLY_VOICE) || 'casual';
  const comp  = (typeof window !== 'undefined' && window.ENERLY_COMPOSITION) || 'calm';

  const VOICE_COPY = {
    casual: {
      h1Line1: ['Deine', 'Energiekosten.'],
      h1Line2: 'Endlich im Griff.',
      subline: 'Ohne Account. Ohne Cloud-Zwang. Strom, Gas und Wasser verstehen — direkt auf deinem Gerät.',
    },
    editorial: {
      h1Line1: ['Energieverwaltung,'],
      h1Line2: 'mit Charakter.',
      subline: 'Klar. Lokal. Ohne Cloud, ohne Account, ohne Sternchen — eine ruhige App für ein lautes Thema.',
    },
    direct: {
      h1Line1: ['Spar', 'bis', '€127/Jahr.'],
      h1Line2: 'Ohne Anbieterwechsel.',
      subline: 'Track Strom, Gas, Wasser in 12 Sekunden. Kein Account, kein Cloud-Zwang. DSGVO-konform.',
    },
  };
  const copy = VOICE_COPY[voice] || VOICE_COPY.casual;

  // Composition switches: 'calm' (current), 'product' (phone-dominant), 'manifesto' (text-only centered)
  const isManifesto = isD && comp === 'manifesto';
  const isProduct   = isD && comp === 'product';
  const gridCols = !isD ? '1fr'
                 : isManifesto ? '1fr'
                 : isProduct   ? '0.78fr 1.22fr'
                 :               '1.15fr 1fr';
  const heroAlign = isManifesto ? 'center' : 'flex-start';
  const phoneSize = isD
    ? (isProduct ? 420 : 340)
    : 260;
  const showPhone = !isManifesto;

  // Per-word stagger indices — recomputed per render so voice changes get
  // their own reveal sequence (key on LandingPage ensures clean remount).
  let staggerIdx = 0;
  const W = (txt) => {
    const delay = staggerIdx++ * 110;
    return (
      <React.Fragment key={`w-${txt}-${delay}`}>
        <span className="enerly-word" style={{ animationDelay: `${delay}ms` }}>{txt}</span>
        {' '}
      </React.Fragment>
    );
  };

  // H1 sizing scales with composition — manifesto is enormous on desktop.
  const h1Size = !isD ? 48
               : isManifesto ? 132
               : isProduct   ? 76
               :               88;

  return (
    <section style={{
      background: C.warmWhite,
      padding: isD ? '128px 96px 96px' : '88px 24px 64px',
      position: 'relative', overflow: 'hidden',
      textAlign: isManifesto ? 'center' : 'left',
    }}>
      {/* Top nav */}
      <nav style={{
        position: 'absolute', top: isD ? 36 : 24, left: isD ? 96 : 24, right: isD ? 96 : 24,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <EnerlyLockup orientation="horizontal" size={isD ? 34 : 28} mode="gradient" textMode="mono-dark"/>
        {isD && (
          <div style={{ display: 'flex', gap: 32, fontFamily: fInter, fontSize: 14, color: C.navy, fontWeight: 500 }}>
            <a style={{ color: 'inherit' }}>Features</a>
            <a style={{ color: 'inherit' }}>Preise</a>
            <a style={{ color: 'inherit' }}>Datenschutz</a>
            <a style={{ color: 'inherit' }}>FAQ</a>
          </div>
        )}
        <button style={{
          padding: isD ? '10px 20px' : '8px 14px', borderRadius: 999,
          background: C.navyDeep, color: '#fff', border: 'none',
          fontFamily: fNun, fontWeight: 700, fontSize: isD ? 13 : 12, cursor: 'pointer',
        }}>
          {isD ? 'App herunterladen' : 'Download'}
        </button>
      </nav>

      <div style={{
        display: 'grid',
        gridTemplateColumns: gridCols,
        gap: isD ? (isManifesto ? 0 : 72) : 56,
        alignItems: 'center',
        justifyItems: isManifesto ? 'center' : 'stretch',
        maxWidth: isManifesto ? 1100 : 1280,
        margin: '0 auto',
        marginTop: isManifesto ? (isD ? 80 : 40) : 0,
      }}>
        {/* LEFT — copy */}
        <div style={{
          maxWidth: isManifesto ? 920 : 'none',
          textAlign: isManifesto ? 'center' : 'left',
        }}>
          {/* Headline — cinematic reveal: word stagger on line 1,
              mask sweep + shimmer + underline on the gradient accent */}
          <h1 style={{
            fontFamily: fNun, fontWeight: 800,
            fontSize: h1Size, lineHeight: 0.98,
            letterSpacing: isManifesto ? '-0.045em' : '-0.035em',
            color: C.navyDeep, margin: 0,
            textWrap: 'balance',
          }}>
            {copy.h1Line1.map(W)}
            <br/>
            <span style={{ position: 'relative', display: 'inline-block' }}>
              <span className="enerly-grad-pan enerly-accent-reveal" style={{
                backgroundImage: `linear-gradient(110deg, ${C.navyDeep} 0%, ${C.navy} 28%, ${C.tealDeep} 55%, ${C.tealLight} 75%, ${C.tealDeep} 100%)`,
                WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
                display: 'inline-block', position: 'relative',
              }}>
                {copy.h1Line2}
                <span className="enerly-shimmer-once" aria-hidden="true">{copy.h1Line2}</span>
              </span>
              <span className="enerly-underline" aria-hidden="true"></span>
            </span>
          </h1>

          {/* Subline */}
          <p style={{
            fontFamily: fInter, fontSize: isD ? (isManifesto ? 24 : 22) : 17, lineHeight: 1.45,
            color: '#6B7480', margin: isD ? (isManifesto ? '40px auto 0' : '32px 0 0') : '20px 0 0',
            maxWidth: isManifesto ? 720 : (isD ? 540 : 360), fontWeight: 400,
          }}>
            {copy.subline}
          </p>

          {/* CTAs */}
          <div style={{
            display: 'flex', gap: 12, marginTop: isD ? 44 : 32, flexWrap: 'wrap',
            justifyContent: isManifesto ? 'center' : 'flex-start',
          }}>
            <StoreButton kind="apple" mode={mode}/>
            <StoreButton kind="play" mode={mode}/>
          </div>

          {/* Trust badges */}
          <div style={{
            display: 'flex', gap: isD ? 28 : 20, marginTop: isD ? 44 : 32,
            flexWrap: 'wrap',
            justifyContent: isManifesto ? 'center' : 'flex-start',
          }}>
            {[
              { ic: LI.lock(18), t: 'Kein Account' },
              { ic: LI.phone(18), t: 'Lokal & offline' },
              { ic: LI.flag(18), t: 'Made for DACH' },
            ].map(b => (
              <div key={b.t} style={{
                display: 'flex', alignItems: 'center', gap: 8,
                fontFamily: fInter, fontSize: isD ? 13 : 12,
                fontWeight: 500, color: C.navy,
              }}>
                <span style={{ color: C.tealDeep }}>{b.ic}</span>
                {b.t}
              </div>
            ))}
          </div>
        </div>

        {/* RIGHT — phone preview (hidden in manifesto mode) */}
        {showPhone && (
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
            {/* Photovoltaic-grid backdrop */}
            <div style={{
              position: 'absolute', inset: isD ? '-24px -40px' : '-12px -20px',
              background: `linear-gradient(160deg, ${C.navyDeep} 0%, ${C.navy} 60%, ${C.tealDeep} 100%)`,
              borderRadius: isD ? 32 : 24, overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', inset: 0,
                backgroundImage: `linear-gradient(rgba(143,189,199,0.08) 1px, transparent 1px),
                                  linear-gradient(90deg, rgba(143,189,199,0.08) 1px, transparent 1px)`,
                backgroundSize: '36px 36px',
              }}/>
              {/* Soft cream highlight */}
              <div style={{
                position: 'absolute', top: '-40%', right: '-30%',
                width: '120%', height: '80%',
                background: `radial-gradient(closest-side, rgba(244,239,230,0.18), transparent 70%)`,
              }}/>
            </div>
            <div className="enerly-phone-float" style={{ position: 'relative', padding: isD ? '56px 0' : '40px 0' }}>
              <HeroAppPreview width={phoneSize}/>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Section header helper — editorial number + title rule
// ─────────────────────────────────────────────────────────────
function SectionHead({ num, kicker, title, sub, mode, color, ruleColor }) {
  const isD = mode === 'desktop';
  const c = color || C.navy;
  const r = ruleColor || '#E5E0D5';
  return (
    <div style={{ marginBottom: isD ? 64 : 40 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
        <span style={{
          fontFamily: fNun, fontWeight: 700, fontSize: 13,
          color: c === '#fff' || c === C.cream ? C.tealLight : C.tealDeep,
          letterSpacing: '0.06em',
        }}>{num}</span>
        <span style={{ fontFamily: fInter, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600, color: c === '#fff' || c === C.cream ? 'rgba(244,239,230,0.6)' : '#6B7480' }}>{kicker}</span>
        <span style={{ flex: 1, height: 1, background: r }}/>
      </div>
      <h2 style={{
        fontFamily: fNun, fontWeight: 800,
        fontSize: isD ? 56 : 32, lineHeight: 1.05, letterSpacing: '-0.025em',
        color: c, margin: '20px 0 0', textWrap: 'balance', maxWidth: isD ? 820 : '100%',
      }}>{title}</h2>
      {sub && (
        <p style={{
          fontFamily: fInter, fontSize: isD ? 18 : 15, lineHeight: 1.5,
          color: c === '#fff' || c === C.cream ? 'rgba(244,239,230,0.7)' : '#6B7480',
          margin: isD ? '20px 0 0' : '14px 0 0', maxWidth: isD ? 600 : '100%', fontWeight: 400,
        }}>{sub}</p>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SECTION 2 · PROBLEM
// ─────────────────────────────────────────────────────────────
function SocialProof({ mode }) {
  const isD = mode === 'desktop';
  // Pre-launch — every claim here must remain true at audit.
  const stats = [
    { v: '0',      l: 'Daten gesammelt',  s: 'kein Server, kein Account' },
    { v: 'Q3 2026',l: 'Public Launch',    s: 'Beta seit Mai 2026' },
    { v: '100%',   l: 'lokal gespeichert', s: 'deine Daten, dein Gerät' },
    { v: 'DSGVO',  l: 'by design',        s: 'nicht nachträglich' },
  ];
  return (
    <section style={{
      background: C.warmWhite, borderTop: `1px solid ${C.rule || '#E5E0D5'}`,
      borderBottom: `1px solid ${C.rule || '#E5E0D5'}`,
      padding: isD ? '36px 96px' : '32px 24px',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isD ? '1fr 1fr 1fr 1fr' : '1fr 1fr',
        gap: isD ? 8 : 24,
        rowGap: isD ? 8 : 28,
        alignItems: 'center',
      }}>
        {stats.map((s, i) => (
          <div key={s.l} style={{
            display: 'flex', flexDirection: 'column',
            paddingLeft: isD && i > 0 ? 32 : 0,
            borderLeft: isD && i > 0 ? '1px solid rgba(14,44,68,0.10)' : 'none',
          }}>
            <div style={{
              fontFamily: fNun, fontWeight: 800, fontSize: isD ? 32 : 24,
              color: C.navyDeep, letterSpacing: '-0.02em', lineHeight: 1,
            }}>{s.v}</div>
            <div style={{
              fontFamily: fInter, fontSize: isD ? 13 : 12, fontWeight: 600,
              color: C.navy, marginTop: 6,
            }}>{s.l}</div>
            <div style={{
              fontFamily: fMono, fontSize: 10.5, color: '#9AA1AB',
              marginTop: 3, letterSpacing: '0.02em',
            }}>{s.s}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Problem({ mode }) {
  const isD = mode === 'desktop';
  const cards = [
    {
      n: '01',
      title: 'Die Schock-Rechnung',
      body: 'Im Dezember kommt die Nachzahlung. €847 mehr als gedacht. Wieder.',
      ic: LI.bolt(28),
      accent: '#D6604D',
    },
    {
      n: '02',
      title: 'Excel ist anstrengend',
      body: 'Tabellen pflegen, formeln debuggen. Du bist Mieter:in, kein Buchhalter.',
      ic: LI.table(28),
      accent: C.tealDeep,
    },
    {
      n: '03',
      title: 'Cloud? Lieber nicht.',
      body: 'Energiedaten verraten viel. Schlafzeiten, Urlaub, Lebensgewohnheiten.',
      ic: LI.noEye(28),
      accent: C.navy,
    },
  ];
  return (
    <section style={{ background: C.paper, padding: isD ? '128px 96px' : '88px 24px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionHead
          num="01"
          kicker="Das Problem"
          title="Warum Energieverwaltung heute nicht funktioniert."
          mode={mode}
        />
        <div style={{
          display: 'grid',
          gridTemplateColumns: isD ? '1fr 1fr 1fr' : '1fr',
          gap: isD ? 28 : 20,
        }}>
          {cards.map(c => (
            <article key={c.n} className="enerly-card-hover" style={{
              background: C.warmWhite, borderRadius: 18, padding: isD ? 40 : 28,
              border: `1px solid ${C.rule || '#E5E0D5'}`, position: 'relative',
              minHeight: isD ? 320 : 0,
            }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
                <div style={{
                  width: 56, height: 56, borderRadius: 14,
                  background: c.accent + '15', color: c.accent,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {c.ic}
                </div>
                <div style={{ fontFamily: fMono, fontSize: 12, color: '#9AA1AB' }}>{c.n}</div>
              </div>
              <h3 style={{
                fontFamily: fNun, fontWeight: 800, fontSize: isD ? 26 : 22,
                color: C.navyDeep, margin: isD ? '40px 0 12px' : '24px 0 8px', letterSpacing: '-0.01em',
              }}>{c.title}</h3>
              <p style={{
                fontFamily: fInter, fontSize: isD ? 16 : 15, lineHeight: 1.55,
                color: '#6B7480', margin: 0,
              }}>{c.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// SECTION 3 · FEATURES
// ─────────────────────────────────────────────────────────────
function Features({ mode }) {
  const isD = mode === 'desktop';
  const feats = [
    { ic: LI.camera(26), t: 'Kamera-OCR', sub: 'Zählerstand fotografieren — fertig.', pro: false },
    { ic: LI.spark(26),  t: 'Jahresprognose', sub: 'Saisonal gewichtete Hochrechnung bis Dezember.', pro: true },
    { ic: LI.bell(26),   t: 'Smart Alerts', sub: 'Wenn der Verbrauch aus der Reihe tanzt.', pro: true },
    { ic: LI.meters(26), t: 'Mehrere Zähler', sub: 'Strom, Gas, Wasser — getrennt oder gemeinsam.', pro: false },
    { ic: LI.cloud(26),  t: 'Cloud-Sync', sub: 'Verschlüsselt, optional — auf iPad, Mac, Android.', pro: true },
    { ic: LI.shield(26), t: 'Privacy First', sub: 'Alles lokal. Kein Account. DSGVO ohne Sternchen.', pro: false },
  ];
  return (
    <section style={{ background: C.cream, padding: isD ? '128px 96px' : '88px 24px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionHead
          num="02"
          kicker="Was du bekommst"
          title="Sechs Dinge, die richtig sitzen."
          sub="Vier kostenlos, drei mit Pro freischalten — wann immer du willst."
          mode={mode}
          ruleColor="rgba(14,44,68,0.12)"
        />
        <div style={{
          display: 'grid',
          gridTemplateColumns: isD ? '1fr 1fr 1fr' : '1fr',
          gap: isD ? 1 : 0,
          background: 'rgba(14,44,68,0.10)',
          border: '1px solid rgba(14,44,68,0.10)',
          borderRadius: 20, overflow: 'hidden',
        }}>
          {feats.map((f, i) => (
            <div key={f.t} className="enerly-card-hover" style={{
              background: C.warmWhite, padding: isD ? '44px 36px' : '32px 24px',
              borderBottom: !isD && i < feats.length - 1 ? '1px solid rgba(14,44,68,0.08)' : 'none',
              position: 'relative', minHeight: isD ? 220 : 0,
            }}>
              {f.pro && (
                <div style={{ position: 'absolute', top: 20, right: 20 }}>
                  <ProPill small/>
                </div>
              )}
              <div style={{ color: C.tealDeep, marginBottom: isD ? 28 : 18 }}>
                {f.ic}
              </div>
              <h4 style={{
                fontFamily: fNun, fontWeight: 800, fontSize: isD ? 22 : 19,
                color: C.navyDeep, margin: '0 0 8px', letterSpacing: '-0.01em',
              }}>{f.t}</h4>
              <p style={{
                fontFamily: fInter, fontSize: isD ? 15 : 14, lineHeight: 1.5,
                color: '#6B7480', margin: 0,
              }}>{f.sub}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── SECTION 3.5 · COMING SOON · Verivox Tarifvergleich ──────
function ComingSoon({ mode }) {
  const isD = mode === 'desktop';
  return (
    <section style={{
      background: C.warmWhite, padding: isD ? '128px 96px' : '88px 24px',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isD ? '1fr 1fr' : '1fr',
        gap: isD ? 72 : 40,
        alignItems: 'center',
      }}>
        {/* LEFT — copy */}
        <div>
          {/* "Bald" eyebrow with pulse dot */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '6px 14px 6px 10px', borderRadius: 999,
            background: `linear-gradient(135deg, ${C.tealLight}30, ${C.cream})`,
            color: C.tealDeep,
            fontFamily: fInter, fontSize: isD ? 12 : 11, fontWeight: 700,
            letterSpacing: '0.14em', textTransform: 'uppercase',
            border: `1px solid ${C.tealLight}55`,
          }}>
            <span className="enerly-pulse-dot" style={{
              width: 7, height: 7, borderRadius: '50%', background: C.tealDeep,
            }}/>
            Bald · Q4 2026
          </div>

          <h2 style={{
            fontFamily: fNun, fontWeight: 800,
            fontSize: isD ? 56 : 32, lineHeight: 1.02, letterSpacing: '-0.025em',
            color: C.navyDeep, margin: isD ? '24px 0 0' : '18px 0 0',
            textWrap: 'balance',
          }}>
            Den besten <span style={{
              background: `linear-gradient(110deg, ${C.navyDeep} 0%, ${C.tealDeep} 70%, ${C.tealLight} 100%)`,
              WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
            }}>Stromtarif</span> finden — auf einen Tap.
          </h2>

          <p style={{
            fontFamily: fInter, fontSize: isD ? 19 : 16, lineHeight: 1.5,
            color: '#6B7480', margin: isD ? '24px 0 0' : '16px 0 0',
            maxWidth: 480,
          }}>
            Sobald die App deinen Jahresverbrauch kennt, vergleicht enerly
            ihn mit aktuellen Tarifen — Vergleichsdaten via{' '}
            <span style={{ fontWeight: 600, color: C.navy }}>Verivox</span>.
            Du siehst Ersparnis, Bindungsfrist und Konditionen, bevor du wechselst.
          </p>

          {/* Mini feature list */}
          <div style={{
            display: 'flex', flexDirection: 'column', gap: 10,
            margin: isD ? '32px 0 0' : '24px 0 0',
          }}>
            {[
              'Auf Basis deines echten Verbrauchs — keine Schätzung',
              'Wir leiten dich zum Anbieter — kein Datenverkauf',
              'Wechsel-Tracking: vergiss nie die Kündigungsfrist',
            ].map(t => (
              <div key={t} style={{
                display: 'flex', gap: 10, alignItems: 'flex-start',
                fontFamily: fInter, fontSize: isD ? 15 : 14, color: C.navy,
              }}>
                <span style={{
                  flexShrink: 0, marginTop: 5, width: 5, height: 5,
                  borderRadius: '50%', background: C.tealDeep,
                }}/>
                {t}
              </div>
            ))}
          </div>

          {/* Waitlist CTA — subdued, not the primary download path */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 14,
            margin: isD ? '40px 0 0' : '28px 0 0', flexWrap: 'wrap',
          }}>
            <button className="enerly-cta" style={{
              padding: '12px 22px', borderRadius: 999, border: 'none',
              background: C.navyDeep, color: '#fff',
              fontFamily: fNun, fontWeight: 700, fontSize: 14,
              letterSpacing: '-0.01em', cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 8,
              boxShadow: '0 4px 14px rgba(10,34,54,0.22)',
            }}>
              <span style={{ position: 'relative', zIndex: 1 }}>
                Auf die Warteliste &nbsp;→
              </span>
            </button>
            <span style={{
              fontFamily: fMono, fontSize: 11, color: '#9AA1AB',
            }}>
              Du wirst nur benachrichtigt, wenn der Vergleich live geht.
            </span>
          </div>
        </div>

        {/* RIGHT — mock comparison card */}
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
          <div style={{
            width: '100%', maxWidth: isD ? 440 : 320,
            background: C.paper, borderRadius: 22,
            border: `1px solid ${C.rule || '#E5E0D5'}`,
            padding: isD ? 32 : 24,
            position: 'relative', overflow: 'hidden',
            boxShadow: '0 24px 60px -20px rgba(10,34,54,0.20), 0 6px 16px rgba(10,34,54,0.06)',
          }}>
            {/* Tag */}
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              <div style={{
                fontFamily: fInter, fontSize: 11, fontWeight: 600,
                letterSpacing: '0.14em', textTransform: 'uppercase', color: '#6B7480',
              }}>Tarifvergleich · Vorschau</div>
              <div style={{
                fontFamily: fMono, fontSize: 10, color: C.tealDeep,
                background: 'rgba(61,119,133,0.10)', padding: '3px 8px',
                borderRadius: 6, letterSpacing: '0.04em',
              }}>MOCK</div>
            </div>

            {/* Annual usage header */}
            <div style={{ margin: '18px 0 4px' }}>
              <div style={{
                fontFamily: fInter, fontSize: 12, color: '#6B7480', fontWeight: 500,
              }}>Dein Jahresverbrauch</div>
              <div style={{
                fontFamily: fNun, fontWeight: 800, fontSize: isD ? 30 : 24,
                color: C.navyDeep, letterSpacing: '-0.02em', marginTop: 4,
              }}>
                2.847 <span style={{ fontSize: isD ? 16 : 14, color: '#6B7480', fontWeight: 700 }}>kWh</span>
              </div>
            </div>

            {/* Current tariff */}
            <div style={{
              marginTop: 20, padding: isD ? '14px 16px' : '12px 14px',
              background: C.warmWhite, borderRadius: 12,
              border: `1px solid ${C.rule || '#E5E0D5'}`,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              <div>
                <div style={{ fontFamily: fInter, fontSize: 11, color: '#6B7480', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                  Dein Tarif
                </div>
                <div style={{ fontFamily: fNun, fontWeight: 700, fontSize: 14, color: C.navy, marginTop: 4 }}>
                  Stadtwerke · 32,4 ct/kWh
                </div>
              </div>
              <div style={{
                fontFamily: fNun, fontWeight: 800, fontSize: 18, color: C.navyDeep, letterSpacing: '-0.01em',
              }}>
                €922
                <span style={{ fontSize: 11, color: '#9AA1AB', fontWeight: 500, marginLeft: 3 }}>/J</span>
              </div>
            </div>

            {/* Best tariff */}
            <div style={{
              marginTop: 10, padding: isD ? '14px 16px' : '12px 14px',
              background: `linear-gradient(135deg, ${C.navy} 0%, ${C.tealDeep} 100%)`,
              borderRadius: 12, color: '#fff',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              position: 'relative', overflow: 'hidden',
            }}>
              {/* subtle grid */}
              <div style={{
                position: 'absolute', inset: 0, pointerEvents: 'none',
                backgroundImage: `linear-gradient(rgba(143,189,199,0.10) 1px, transparent 1px),
                                  linear-gradient(90deg, rgba(143,189,199,0.10) 1px, transparent 1px)`,
                backgroundSize: '24px 24px',
              }}/>
              <div style={{ position: 'relative' }}>
                <div style={{
                  fontFamily: fInter, fontSize: 11, fontWeight: 600,
                  textTransform: 'uppercase', letterSpacing: '0.1em',
                  color: C.tealLight,
                }}>
                  Bester Tarif
                </div>
                <div style={{ fontFamily: fNun, fontWeight: 700, fontSize: 14, marginTop: 4 }}>
                  E.ON Strom Pur · 27,8 ct/kWh
                </div>
              </div>
              <div style={{
                fontFamily: fNun, fontWeight: 800, fontSize: 18, letterSpacing: '-0.01em',
                position: 'relative',
              }}>
                €791
                <span style={{ fontSize: 11, color: 'rgba(244,239,230,0.7)', fontWeight: 500, marginLeft: 3 }}>/J</span>
              </div>
            </div>

            {/* Savings highlight */}
            <div style={{
              marginTop: 18, paddingTop: 18,
              borderTop: `1px dashed ${C.rule || '#E5E0D5'}`,
              display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
            }}>
              <div style={{
                fontFamily: fInter, fontSize: 13, color: '#6B7480', fontWeight: 500,
              }}>
                Mögliche Ersparnis
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span style={{
                  fontFamily: fNun, fontWeight: 800, fontSize: isD ? 32 : 26,
                  color: C.tealDeep, letterSpacing: '-0.02em',
                }}>−€131</span>
                <span style={{ fontFamily: fInter, fontSize: 12, color: '#9AA1AB' }}>/ Jahr</span>
              </div>
            </div>

            {/* Footer */}
            <div style={{
              marginTop: 16, fontFamily: fMono, fontSize: 10, color: '#9AA1AB',
              letterSpacing: '0.02em',
            }}>
              Vergleichsdaten via Verivox · keine Affiliate-Verzerrung
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks({ mode }) {
  const isD = mode === 'desktop';
  const steps = [
    { n: '01', t: 'Installieren', d: 'Kein Account, keine E-Mail. App auf, los geht\u2019s.', t2: '~12 Sek.' },
    { n: '02', t: 'Ablesen', d: 'Zählerstand abfotografieren — OCR liest die Zahl.',          t2: '~8 Sek.' },
    { n: '03', t: 'Prognose', d: 'Nach 3 Ablesungen siehst du, wo dein Jahr endet.',          t2: 'Live' },
  ];
  return (
    <section style={{ background: C.paper, padding: isD ? '128px 96px' : '88px 24px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionHead
          num="03"
          kicker="So funktionierts"
          title="Drei Schritte zwischen dir und Klarheit."
          mode={mode}
        />
        <div style={{
          display: 'grid',
          gridTemplateColumns: isD ? '1fr 1fr 1fr' : '1fr',
          gap: isD ? 32 : 24,
          position: 'relative',
        }}>
          {/* Dotted connector line (desktop only) */}
          {isD && (
            <div style={{
              position: 'absolute', top: 90, left: '16.66%', right: '16.66%', height: 2,
              backgroundImage: `radial-gradient(circle, ${C.tealDeep} 1.2px, transparent 1.4px)`,
              backgroundSize: '12px 2px', backgroundRepeat: 'repeat-x',
            }}/>
          )}
          {steps.map(s => (
            <div key={s.n} style={{ position: 'relative', zIndex: 1, textAlign: isD ? 'left' : 'left' }}>
              <div style={{
                width: isD ? 84 : 64, height: isD ? 84 : 64, borderRadius: '50%',
                background: C.warmWhite, border: `2px solid ${C.tealDeep}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: fNun, fontWeight: 800, fontSize: isD ? 28 : 22,
                color: C.tealDeep, letterSpacing: '-0.02em',
                boxShadow: '0 4px 14px rgba(10,34,54,0.06)',
              }}>{s.n}</div>
              <h3 style={{
                fontFamily: fNun, fontWeight: 800, fontSize: isD ? 32 : 26,
                color: C.navyDeep, margin: isD ? '32px 0 12px' : '20px 0 8px', letterSpacing: '-0.02em',
              }}>{s.t}</h3>
              <p style={{
                fontFamily: fInter, fontSize: isD ? 17 : 15, lineHeight: 1.5,
                color: '#6B7480', margin: '0 0 20px', maxWidth: isD ? 320 : 'auto',
              }}>{s.d}</p>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                fontFamily: fMono, fontSize: 12, color: C.tealDeep,
                padding: '5px 10px', borderRadius: 6,
                background: 'rgba(61,119,133,0.08)',
              }}>
                <span style={{ width: 5, height: 5, borderRadius: '50%', background: C.tealDeep }}/>
                {s.t2}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// SECTION 5 · PRICING
// ─────────────────────────────────────────────────────────────
function Pricing({ mode }) {
  const isD = mode === 'desktop';
  return (
    <section style={{ background: C.warmWhite, padding: isD ? '128px 96px' : '88px 24px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionHead
          num="04"
          kicker="Preise"
          title="Erst nutzen. Dann entscheiden."
          sub="Free ist nicht 'Trial'. Du kannst dauerhaft kostenlos tracken. Pro ist für alle, die's genauer wollen."
          mode={mode}
        />
        <div style={{
          display: 'grid',
          gridTemplateColumns: isD ? '1fr 1fr' : '1fr',
          gap: isD ? 28 : 20,
        }}>
          {/* FREE */}
          <div style={{
            background: C.paper, borderRadius: 22, padding: isD ? 48 : 32,
            border: `1px solid ${C.rule || '#E5E0D5'}`,
            display: 'flex', flexDirection: 'column',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontFamily: fNun, fontWeight: 800, fontSize: isD ? 24 : 20, color: C.navyDeep, letterSpacing: '-0.01em' }}>
                Free
              </div>
              <div style={{ fontFamily: fInter, fontSize: 11, color: '#6B7480', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600 }}>
                Für immer
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 20 }}>
              <span style={{ fontFamily: fNun, fontWeight: 800, fontSize: isD ? 72 : 56, color: C.navyDeep, lineHeight: 1, letterSpacing: '-0.03em' }}>€0</span>
              <span style={{ fontFamily: fInter, fontSize: 14, color: '#6B7480' }}>/ Monat</span>
            </div>
            <p style={{ fontFamily: fInter, fontSize: isD ? 15 : 14, color: '#6B7480', margin: '12px 0 0', lineHeight: 1.5 }}>
              Ein Zähler, manuelle Ablesung, Basis-Statistiken. Keine Werbung.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, margin: isD ? '36px 0' : '24px 0' }}>
              {[
                '1 Zähler (Strom · Gas · Wasser)',
                'Manuelle Ablesungen + Kamera-OCR',
                'Verbrauchsverlauf & Wochenstatistik',
                'Lokal gespeichert · kein Account',
              ].map(t => (
                <div key={t} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <span style={{
                    flexShrink: 0, marginTop: 2,
                    width: 18, height: 18, borderRadius: '50%',
                    background: C.cream, color: C.tealDeep,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  }}>{LI.check(12)}</span>
                  <span style={{ fontFamily: fInter, fontSize: isD ? 15 : 14, color: C.navy }}>{t}</span>
                </div>
              ))}
            </div>
            <button style={{
              marginTop: 'auto', height: 52, borderRadius: 12,
              background: 'transparent', color: C.navyDeep,
              border: `1.5px solid ${C.navyDeep}`, cursor: 'pointer',
              fontFamily: fNun, fontWeight: 700, fontSize: 15, letterSpacing: '-0.01em',
            }}>
              Free herunterladen
            </button>
          </div>

          {/* PRO */}
          <div style={{
            background: `linear-gradient(160deg, ${C.navyDeep} 0%, ${C.navy} 50%, ${C.tealDeep} 100%)`,
            borderRadius: 22, padding: isD ? 48 : 32,
            color: '#fff', position: 'relative', overflow: 'visible',
            display: 'flex', flexDirection: 'column',
          }}>
            {/* Most-Popular floating badge */}
            <div className="enerly-badge-bob" style={{
              position: 'absolute', top: -18, left: '50%',
              padding: '7px 16px', borderRadius: 999,
              background: C.cream, color: C.navyDeep,
              fontFamily: fNun, fontWeight: 800, fontSize: 11,
              letterSpacing: '0.14em', textTransform: 'uppercase',
              boxShadow: '0 8px 18px rgba(10,34,54,0.25)',
              display: 'inline-flex', alignItems: 'center', gap: 6,
              whiteSpace: 'nowrap', zIndex: 3,
            }}>
              <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.7 5.3L19 9l-5.3 1.7L12 16l-1.7-5.3L5 9l5.3-1.7L12 2z"/></svg>
              Meistgewählt
            </div>
            {/* Grid texture */}
            <div className="enerly-grid-pan" style={{
              position: 'absolute', inset: 0, pointerEvents: 'none', borderRadius: 22, overflow: 'hidden',
              backgroundImage: `linear-gradient(rgba(143,189,199,0.07) 1px, transparent 1px),
                                linear-gradient(90deg, rgba(143,189,199,0.07) 1px, transparent 1px)`,
              backgroundSize: '32px 32px',
            }}/>
            <div style={{ position: 'relative' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ fontFamily: fNun, fontWeight: 800, fontSize: isD ? 24 : 20, letterSpacing: '-0.01em' }}>Pro</div>
                  <ProPill/>
                </div>
                <div style={{
                  padding: '5px 10px', borderRadius: 999,
                  background: 'rgba(143,189,199,0.18)', color: C.tealLight,
                  fontFamily: fInter, fontSize: 11, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase',
                }}>
                  37% sparen
                </div>
              </div>

              {/* Year price */}
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 20 }}>
                <span style={{ fontFamily: fNun, fontWeight: 800, fontSize: isD ? 72 : 56, color: '#fff', lineHeight: 1, letterSpacing: '-0.03em' }}>€29,99</span>
                <span style={{ fontFamily: fInter, fontSize: 14, color: 'rgba(244,239,230,0.7)' }}>/ Jahr</span>
              </div>
              <div style={{ fontFamily: fInter, fontSize: 13, color: 'rgba(244,239,230,0.65)', marginTop: 6 }}>
                Entspricht <strong style={{ color: '#fff', fontWeight: 600 }}>€2,50/Mo</strong> · oder €3,99 monatlich
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, margin: isD ? '36px 0' : '24px 0' }}>
                {[
                  'Unbegrenzte Zähler & Geräte',
                  'Smart Forecast — Jahresprognose live',
                  'Smart Alerts bei Ausreißern',
                  'Verschlüsselter Cloud-Sync (optional)',
                  'CSV-Export & PDF-Reports',
                  'Priorisierter Support',
                ].map(t => (
                  <div key={t} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                    <span style={{
                      flexShrink: 0, marginTop: 2,
                      width: 18, height: 18, borderRadius: '50%',
                      background: 'rgba(143,189,199,0.25)', color: C.tealLight,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    }}>{LI.check(12)}</span>
                    <span style={{ fontFamily: fInter, fontSize: isD ? 15 : 14, color: '#fff', opacity: 0.94 }}>{t}</span>
                  </div>
                ))}
              </div>
              <button style={{
                marginTop: 'auto', height: 52, borderRadius: 12,
                background: '#fff', color: C.navyDeep, border: 'none', cursor: 'pointer',
                fontFamily: fNun, fontWeight: 800, fontSize: 15, letterSpacing: '-0.01em',
              }}>
                Pro freischalten →
              </button>
              <p style={{ fontFamily: fInter, fontSize: 11.5, color: 'rgba(244,239,230,0.6)', margin: '14px 0 0', textAlign: 'center' }}>
                14 Tage kostenlos testen · jederzeit kündbar
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// SECTION 6 · PRIVACY PROMISE
// ─────────────────────────────────────────────────────────────
function Privacy({ mode }) {
  const isD = mode === 'desktop';
  const points = [
    { n: '①', t: 'Alles lokal', d: 'Deine Zählerstände verlassen dein Gerät nicht — es sei denn, du aktivierst Sync.' },
    { n: '②', t: 'Kein Account', d: 'Keine E-Mail, kein Passwort, keine Tracking-ID. Wirklich.' },
    { n: '③', t: 'DSGVO ohne Sternchen', d: 'Quellcode prüfbar, Datenexport mit einem Tap, Löschung sofort.' },
  ];
  return (
    <section style={{
      background: C.navyDeep, color: '#fff',
      padding: isD ? '160px 96px' : '96px 24px',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Photovoltaic grid texture */}
      <div className="enerly-grid-pan" style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage: `linear-gradient(rgba(143,189,199,0.06) 1px, transparent 1px),
                          linear-gradient(90deg, rgba(143,189,199,0.06) 1px, transparent 1px)`,
        backgroundSize: '48px 48px',
      }}/>
      {/* Cream radial highlight */}
      <div style={{
        position: 'absolute', top: '-30%', left: '-10%',
        width: '70%', height: '120%',
        background: `radial-gradient(closest-side, rgba(244,239,230,0.10), transparent 70%)`,
      }}/>

      <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
        <SectionHead
          num="05"
          kicker="Privacy Promise"
          title="Deine Daten gehören dir."
          sub="Energiedaten verraten viel — Schlafzeiten, Urlaubsmuster, Haushaltsgröße. Wir wollen sie nicht sehen, also fragen wir auch nicht."
          mode={mode}
          color="#fff"
          ruleColor="rgba(143,189,199,0.2)"
        />

        <div style={{
          display: 'grid',
          gridTemplateColumns: isD ? '1fr 1fr 1fr' : '1fr',
          gap: isD ? 36 : 28,
          marginTop: isD ? 24 : 12,
        }}>
          {points.map((p, i) => (
            <div key={p.t} style={{
              padding: isD ? '32px 0 0' : '24px 0 0',
              borderTop: '1px solid rgba(143,189,199,0.18)',
            }}>
              <div style={{
                fontFamily: fNun, fontWeight: 800, fontSize: isD ? 64 : 48,
                color: C.tealLight, lineHeight: 1, letterSpacing: '-0.04em',
              }}>{p.n}</div>
              <h3 style={{
                fontFamily: fNun, fontWeight: 800, fontSize: isD ? 28 : 22,
                color: '#fff', margin: isD ? '24px 0 12px' : '16px 0 8px', letterSpacing: '-0.01em',
              }}>{p.t}</h3>
              <p style={{
                fontFamily: fInter, fontSize: isD ? 16 : 15, lineHeight: 1.55,
                color: 'rgba(244,239,230,0.7)', margin: 0,
              }}>{p.d}</p>
            </div>
          ))}
        </div>

        {/* Compliance ribbon */}
        <div style={{
          marginTop: isD ? 80 : 48,
          display: 'flex', flexWrap: 'wrap', gap: isD ? 32 : 18,
          alignItems: 'center', justifyContent: isD ? 'flex-start' : 'flex-start',
          padding: isD ? '24px 0 0' : '20px 0 0',
          borderTop: '1px solid rgba(143,189,199,0.18)',
        }}>
          {['DSGVO-konform', 'Hosted in EU', 'Open Audit Log', 'Made in Germany'].map(t => (
            <div key={t} style={{
              display: 'flex', alignItems: 'center', gap: 8,
              fontFamily: fInter, fontSize: isD ? 13 : 12, color: 'rgba(244,239,230,0.85)', fontWeight: 500,
            }}>
              <span style={{ color: C.tealLight }}>{LI.check(14)}</span>
              {t}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// SECTION 7 · DOWNLOAD CTA
// ─────────────────────────────────────────────────────────────
function DownloadCTA({ mode }) {
  const isD = mode === 'desktop';
  return (
    <section style={{
      background: C.cream, padding: isD ? '128px 96px' : '88px 24px',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: isD ? 32 : 24 }}>
          <EnerlyIcon size={isD ? 88 : 64} mode="gradient"/>
        </div>
        <h2 style={{
          fontFamily: fNun, fontWeight: 800,
          fontSize: isD ? 72 : 38, lineHeight: 1.02, letterSpacing: '-0.03em',
          color: C.navyDeep, margin: 0, textWrap: 'balance',
        }}>
          Bereit, Energiekosten <span style={{
            background: `linear-gradient(110deg, ${C.navyDeep} 0%, ${C.tealDeep} 70%, ${C.tealLight} 100%)`,
            WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
          }}>wirklich</span> zu verstehen?
        </h2>
        <p style={{
          fontFamily: fInter, fontSize: isD ? 19 : 16, lineHeight: 1.5,
          color: '#6B7480', margin: isD ? '24px auto 0' : '16px auto 0',
          maxWidth: 560, fontWeight: 400,
        }}>
          Kostenlos. In 12 Sekunden eingerichtet. Keine E-Mail. Ehrlich.
        </p>
        <div style={{
          display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap',
          marginTop: isD ? 44 : 32,
        }}>
          <StoreButton kind="apple" mode={mode}/>
          <StoreButton kind="play" mode={mode}/>
        </div>
        <div style={{
          marginTop: isD ? 28 : 20,
          display: 'flex', justifyContent: 'center', gap: 24, flexWrap: 'wrap',
          fontFamily: fInter, fontSize: 12, color: '#6B7480',
        }}>
          <span>Early Access · Beta Q3 2026</span>
          <span style={{ opacity: 0.3 }}>·</span>
          <span>iOS 15+ &nbsp; Android 9+</span>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// SECTION 8 · FOOTER
// ─────────────────────────────────────────────────────────────
function Footer({ mode }) {
  const isD = mode === 'desktop';
  return (
    <footer style={{
      background: C.navyDeep, color: 'rgba(244,239,230,0.6)',
      padding: isD ? '64px 96px 36px' : '48px 24px 32px',
      fontFamily: fInter,
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isD ? '1.5fr 1fr 1fr 1fr' : '1fr',
        gap: isD ? 48 : 32,
      }}>
        <div>
          <EnerlyLockup orientation="horizontal" size={32} mode="mono-cream" textMode="mono-cream"/>
          <p style={{ fontSize: 13, lineHeight: 1.55, margin: '20px 0 0', maxWidth: 320 }}>
            Energiekosten-Tracker für Mieter:innen und Eigentümer:innen im DACH-Raum.
            Privacy-first. Lokal. Ohne Account.
          </p>
        </div>
        {[
          { h: 'Produkt', l: ['Features', 'Preise', 'Roadmap', 'Changelog'] },
          { h: 'Unternehmen', l: ['Über enerly', 'Presse', 'Kontakt', 'Jobs'] },
          { h: 'Rechtliches', l: ['Datenschutz', 'AGB', 'Impressum', 'DSGVO'] },
        ].map(col => (
          <div key={col.h}>
            <div style={{ fontFamily: fNun, fontWeight: 800, fontSize: 13, color: '#fff', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 16 }}>
              {col.h}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {col.l.map(li => (
                <a key={li} style={{ fontSize: 14, color: 'rgba(244,239,230,0.65)' }}>{li}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        maxWidth: 1280, margin: isD ? '64px auto 0' : '40px auto 0',
        paddingTop: 24, borderTop: '1px solid rgba(143,189,199,0.15)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12,
        fontSize: 12,
      }}>
        <span>© 2026 enerly GmbH · Germany · Made with ⚡ in the EU</span>
        <span style={{ fontFamily: fMono, fontSize: 11 }}>v1.0 · Landing</span>
      </div>
    </footer>
  );
}

// ─────────────────────────────────────────────────────────────
// COMPOSED PAGE
// ─────────────────────────────────────────────────────────────
function LandingPage({ mode }) {
  return (
    <div style={{ background: C.paper, fontFamily: fInter, color: C.ink }}>
      <Hero mode={mode}/>
      <SocialProof mode={mode}/>
      <Problem mode={mode}/>
      <Features mode={mode}/>
      <ComingSoon mode={mode}/>
      <HowItWorks mode={mode}/>
      <Pricing mode={mode}/>
      <Privacy mode={mode}/>
      <DownloadCTA mode={mode}/>
      <Footer mode={mode}/>
    </div>
  );
}

window.LandingPage = LandingPage;
window.HeroPhoneMockup = HeroPhoneMockup;