const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = JSON.parse(
  document.getElementById('tweak-defaults').textContent
    .replace(/\/\*EDITMODE-(BEGIN|END)\*\//g, '')
);

// ---------- ICONS ----------
const Icon = {
  arrow: (p) => (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}>
      <path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  check: (p) => (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <path d="M4 12l5 5L20 6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  plus: (p) => (
    <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <path d="M12 5v14M5 12h14" strokeLinecap="round" />
    </svg>
  ),
  bracket: (p) => (
    <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <path d="M9 4H5v16h4M15 4h4v16h-4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
};

// ---------- CORNER MARKERS ----------
const Corners = ({ color = 'var(--line-3)', size = 10, inset = 0 }) => (
  <>
    {[
      { top: inset, left: inset, borderTop: `1px solid ${color}`, borderLeft: `1px solid ${color}` },
      { top: inset, right: inset, borderTop: `1px solid ${color}`, borderRight: `1px solid ${color}` },
      { bottom: inset, left: inset, borderBottom: `1px solid ${color}`, borderLeft: `1px solid ${color}` },
      { bottom: inset, right: inset, borderBottom: `1px solid ${color}`, borderRight: `1px solid ${color}` },
    ].map((s, i) => (
      <span key={i} aria-hidden style={{ position: 'absolute', width: size, height: size, ...s, pointerEvents: 'none' }} />
    ))}
  </>
);

// ---------- LOGO ----------
const Logo = ({ small }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'Inter Tight, sans-serif', fontWeight: 700, fontSize: small ? 16 : 18, letterSpacing: '-0.02em' }}>
    <div style={{ position: 'relative', width: small ? 20 : 24, height: small ? 20 : 24 }}>
      <svg width={small ? 20 : 24} height={small ? 20 : 24} viewBox="0 0 24 24" fill="none">
        <rect x="1.5" y="1.5" width="21" height="21" rx="5" stroke="var(--accent)" strokeWidth="1.4" />
        <rect x="6" y="6" width="12" height="12" rx="2" fill="var(--accent)" />
        <rect x="6" y="6" width="12" height="12" rx="2" fill="var(--accent-2)" style={{ mixBlendMode: 'screen', opacity: 0.55 }} />
      </svg>
    </div>
    <span>QuantumImmo</span>
  </div>
);

// ---------- NAV ----------
const Nav = () => (
  <nav style={{ position: 'sticky', top: 0, zIndex: 50, background: 'rgba(10,14,20,0.7)', backdropFilter: 'blur(14px) saturate(140%)', WebkitBackdropFilter: 'blur(14px) saturate(140%)', borderBottom: '1px solid var(--line)' }}>
    <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 64 }}>
      <Logo />
      <div className="mono navsys" style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--ink-3)' }}>
        <span className="pulse-dot" style={{ width: 6, height: 6, borderRadius: '50%', background: '#3DD68C', display: 'inline-block' }} />
        <span style={{ letterSpacing: '0.04em' }}>SYS / EARLY ACCESS · OPEN</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 24, fontSize: 14, color: 'var(--ink-2)' }}>
        <a href="#features" className="navlink">Funktionen</a>
        <a href="#pricing" className="navlink">Preise</a>
        <a href="#faq" className="navlink">FAQ</a>
        <a href="#waitlist" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'var(--accent)', color: '#0A0E14', padding: '8px 14px', borderRadius: 8, fontWeight: 600, boxShadow: '0 0 0 1px var(--accent), 0 8px 24px -8px var(--accent-glow)' }}>
          Early Access <Icon.arrow />
        </a>
      </div>
    </div>
    <style>{`
      .navlink:hover { color: var(--ink); }
      @media (max-width: 760px) { .navlink, .navsys { display: none; } }
    `}</style>
  </nav>
);

// ---------- TERMINAL BLOCK ----------
const TerminalBlock = () => {
  const [step, setStep] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setStep((s) => (s + 1) % 5), 1600);
    return () => clearInterval(id);
  }, []);
  const lines = [
    { c: 'var(--ink-3)', t: '$ quantumimmo init --tenant=perkonig' },
    { c: 'var(--accent-2)', t: '› Importing 142 properties from JustImmo...' },
    { c: 'var(--ink-2)', t: '› Generating white-label site → perkonig.at' },
    { c: 'var(--ink-2)', t: '› Wiring lead-capture + search agents...' },
    { c: 'var(--accent)', t: '✓ Live in 4m 18s. Tool-stack: 1.' },
  ];
  return (
    <div style={{ position: 'relative', borderRadius: 14, background: 'linear-gradient(180deg, #0F1620 0%, #0B1018 100%)', border: '1px solid var(--line-2)', boxShadow: '0 30px 60px -30px rgba(74,158,255,0.25), 0 30px 60px -30px rgba(255,122,51,0.20), inset 0 1px 0 rgba(255,255,255,0.04)', overflow: 'hidden' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 16px', borderBottom: '1px solid var(--line)', background: 'rgba(255,255,255,0.02)' }}>
        <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#FF5F57' }} />
        <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#FEBC2E' }} />
        <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#28C840' }} />
        <div className="mono" style={{ marginLeft: 12, fontSize: 11, color: 'var(--ink-3)', display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ color: 'var(--accent-2)' }}>~</span> / quantumimmo / setup
        </div>
        <div className="mono" style={{ marginLeft: 'auto', fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>v0.9.4-beta</div>
      </div>
      <div className="mono" style={{ padding: '20px 22px 22px', fontSize: 13, lineHeight: 1.85, fontWeight: 500 }}>
        {lines.map((l, i) => (
          <div key={i} style={{ color: l.c, opacity: i <= step ? 1 : 0.18, transition: 'opacity 0.4s ease' }}>
            {l.t}
            {i === step && <span className="cursor-blink" style={{ display: 'inline-block', width: 7, height: 14, background: 'currentColor', marginLeft: 6, verticalAlign: 'middle' }} />}
          </div>
        ))}
        <div style={{ marginTop: 14, height: 1, background: 'var(--line)' }} />
        <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, fontSize: 11 }}>
          {[
            { k: 'sites', v: '1', c: 'var(--accent)' },
            { k: 'projects', v: '3', c: 'var(--accent-2)' },
            { k: 'leads/24h', v: '47', c: '#3DD68C' },
          ].map((m, i) => (
            <div key={i} style={{ padding: '10px 12px', border: '1px solid var(--line)', borderRadius: 8, background: 'rgba(255,255,255,0.015)' }}>
              <div style={{ color: 'var(--ink-3)', fontSize: 10, letterSpacing: '0.05em', textTransform: 'uppercase' }}>{m.k}</div>
              <div style={{ color: m.c, fontSize: 18, fontWeight: 600, marginTop: 2 }}>{m.v}</div>
            </div>
          ))}
        </div>
      </div>
      <div aria-hidden style={{ position: 'absolute', top: -60, right: -60, width: 220, height: 220, borderRadius: '50%', background: 'radial-gradient(circle, var(--accent-2-glow) 0%, transparent 70%)', filter: 'blur(20px)', pointerEvents: 'none' }} />
      <div aria-hidden style={{ position: 'absolute', bottom: -60, left: -40, width: 200, height: 200, borderRadius: '50%', background: 'radial-gradient(circle, var(--accent-glow) 0%, transparent 70%)', filter: 'blur(24px)', pointerEvents: 'none', opacity: 0.6 }} />
    </div>
  );
};

// ---------- HERO FORM ----------
const HeroForm = ({ compact }) => {
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);
  return submitted ? (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '14px 16px', background: 'var(--accent-soft)', border: '1px solid color-mix(in srgb, var(--accent) 40%, transparent)', borderRadius: 10, fontSize: 14, color: 'var(--ink)', maxWidth: compact ? '100%' : 460 }}>
      <Icon.check style={{ color: 'var(--accent)' }} /> Du bist auf der Liste. Wir melden uns, sobald wir live sind.
    </div>
  ) : (
    <form onSubmit={(e) => { e.preventDefault(); if (email.includes('@')) setSubmitted(true); }}
      style={{ display: 'flex', gap: 6, padding: 6, background: 'rgba(255,255,255,0.04)', border: '1px solid var(--line-2)', borderRadius: 12, maxWidth: compact ? '100%' : 460, boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 24px -12px rgba(74,158,255,0.25)' }}>
      <span className="mono" style={{ display: 'inline-flex', alignItems: 'center', padding: '0 8px 0 10px', color: 'var(--accent-2)', fontSize: 13 }}>›</span>
      <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
        placeholder="dein@maklerbuero.at"
        style={{ flex: 1, border: 0, outline: 0, background: 'transparent', padding: '10px 4px', fontSize: 15, color: 'var(--ink)', fontFamily: 'JetBrains Mono, monospace' }} />
      <button type="submit" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'var(--accent)', color: '#0A0E14', padding: '10px 16px', borderRadius: 8, fontSize: 14, fontWeight: 600, boxShadow: '0 0 0 1px var(--accent), 0 8px 24px -8px var(--accent-glow)' }}>
        Vormerken <Icon.arrow />
      </button>
    </form>
  );
};

// ---------- SCREENSHOT FRAME ----------
const ScreenshotPlaceholder = ({ label, ratio = '4 / 3', accent = 'var(--accent-2)' }) => (
  <div style={{ position: 'relative' }}>
    <div style={{ position: 'relative', width: '100%', aspectRatio: ratio, background: 'linear-gradient(180deg, #0F1620 0%, #0B1018 100%)', border: '1px solid var(--line-2)', borderRadius: 14, overflow: 'hidden', boxShadow: `0 30px 60px -30px ${accent === 'var(--accent)' ? 'var(--accent-glow)' : 'var(--accent-2-glow)'}, inset 0 1px 0 rgba(255,255,255,0.04)` }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '10px 14px', borderBottom: '1px solid var(--line)', background: 'rgba(255,255,255,0.02)' }}>
        <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#2A3340' }} />
        <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#2A3340' }} />
        <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#2A3340' }} />
        <div className="mono" style={{ marginLeft: 12, fontSize: 11, color: 'var(--ink-3)' }}>app.quantumimmo.at/dashboard</div>
        <div className="mono" style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 10, color: 'var(--ink-3)' }}>
          <span style={{ width: 5, height: 5, borderRadius: '50%', background: accent }} />
          LIVE
        </div>
      </div>
      <div style={{ position: 'absolute', inset: '40px 0 0 0', backgroundImage: 'linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px)', backgroundSize: '32px 32px' }} />
      <div aria-hidden style={{ position: 'absolute', top: '20%', left: '30%', width: '60%', height: '60%', background: `radial-gradient(circle, ${accent === 'var(--accent)' ? 'var(--accent-glow)' : 'var(--accent-2-glow)'} 0%, transparent 60%)`, filter: 'blur(40px)', opacity: 0.45, pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', inset: '40px 0 0 0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div className="mono" style={{ fontSize: 11, color: 'var(--ink-2)', padding: '7px 14px', border: '1px dashed var(--line-3)', borderRadius: 6, background: 'rgba(10,14,20,0.55)', backdropFilter: 'blur(4px)', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 6, height: 6, borderRadius: 1, background: accent }} />
          {label}
        </div>
      </div>
    </div>
    <Corners color="var(--line-2)" size={8} inset={-4} />
  </div>
);

// ---------- HERO ----------
const Hero = ({ layout }) => {
  const isSplit = layout === 'split';
  return (
    <section style={{ position: 'relative', borderBottom: '1px solid var(--line)', background: 'var(--bg)', overflow: 'hidden' }}>
      <div className="grid-bg" />
      <div aria-hidden style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: 'linear-gradient(90deg, var(--accent) 0%, var(--accent) 30%, transparent 30%, transparent 34%, var(--accent-2) 34%, var(--accent-2) 50%, transparent 50%)' }} />
      <div aria-hidden style={{ position: 'absolute', top: '-20%', right: '-10%', width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(circle, var(--accent-glow) 0%, transparent 60%)', filter: 'blur(60px)', pointerEvents: 'none', opacity: 0.7 }} />
      <div aria-hidden style={{ position: 'absolute', bottom: '-30%', left: '-15%', width: 700, height: 700, borderRadius: '50%', background: 'radial-gradient(circle, var(--accent-2-glow) 0%, transparent 60%)', filter: 'blur(70px)', pointerEvents: 'none', opacity: 0.55 }} />
      <div className="container" style={{ position: 'relative', paddingTop: isSplit ? 88 : 110, paddingBottom: isSplit ? 96 : 100 }}>
        {isSplit ? (
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.1fr)', gap: 64, alignItems: 'center' }} className="hero-grid">
            <div>
              <div className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 11, color: 'var(--accent)', padding: '6px 12px', border: '1px solid color-mix(in srgb, var(--accent) 45%, transparent)', borderRadius: 999, marginBottom: 28, background: 'var(--accent-soft)', letterSpacing: '0.04em' }}>
                <span className="pulse-dot" style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }} />
                EARLY ACCESS · FRÜHJAHR 2026
              </div>
              <h1 style={{ fontSize: 'clamp(38px, 5.2vw, 60px)', lineHeight: 1.04, marginBottom: 22 }}>
                <span style={{ color: 'var(--accent)' }}>Eine</span> Plattform.<br />
                <span style={{ color: 'var(--ink-3)' }}>Statt vier verschiedener Tools.</span>
              </h1>
              <p style={{ fontSize: 18, color: 'var(--ink-2)', marginBottom: 32, maxWidth: 480 }}>
                Maklersoftware, Website, Bauprojekt-Vermarktung und Lead-Capture in einem System. Für Einzelmakler und kleine Büros, die genug haben vom Tool-Stack-Chaos.
              </p>
              <div id="waitlist"><HeroForm /></div>
              <div className="mono" style={{ marginTop: 18, fontSize: 11, color: 'var(--ink-3)', display: 'flex', gap: 18, flexWrap: 'wrap' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ color: 'var(--accent-2)' }}>✓</span> Keine Kreditkarte</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ color: 'var(--accent-2)' }}>✓</span> DSGVO-konform · AT</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ color: 'var(--accent-2)' }}>✓</span> Kein Lock-in</span>
              </div>
            </div>
            <div><TerminalBlock /></div>
          </div>
        ) : (
          <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
            <div className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 11, color: 'var(--accent)', padding: '6px 12px', border: '1px solid color-mix(in srgb, var(--accent) 45%, transparent)', borderRadius: 999, marginBottom: 28, background: 'var(--accent-soft)', letterSpacing: '0.04em' }}>
              <span className="pulse-dot" style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }} />
              EARLY ACCESS · FRÜHJAHR 2026
            </div>
            <h1 style={{ fontSize: 'clamp(40px, 6vw, 68px)', lineHeight: 1.04, marginBottom: 22 }}>
              <span style={{ color: 'var(--accent)' }}>Eine</span> Plattform.<br />
              <span style={{ color: 'var(--ink-3)' }}>Statt vier verschiedener Tools.</span>
            </h1>
            <p style={{ fontSize: 19, color: 'var(--ink-2)', marginBottom: 32, maxWidth: 580, marginLeft: 'auto', marginRight: 'auto' }}>
              Maklersoftware, Website, Bauprojekt-Vermarktung und Lead-Capture in einem System. Für Einzelmakler und kleine Büros, die genug haben vom Tool-Stack-Chaos.
            </p>
            <div id="waitlist" style={{ display: 'flex', justifyContent: 'center' }}><HeroForm /></div>
            <div style={{ marginTop: 64, maxWidth: 980, marginLeft: 'auto', marginRight: 'auto' }}>
              <TerminalBlock />
            </div>
          </div>
        )}
      </div>
      <style>{`@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }`}</style>
    </section>
  );
};

// ---------- PILOT BAR ----------
const PilotBar = () => {
  const TOTAL = 12;
  const TAKEN = 4;
  const slots = Array.from({ length: TOTAL });
  return (
    <section style={{ borderBottom: '1px solid var(--line)', background: 'var(--bg-2)', position: 'relative' }}>
      <div className="container" style={{ padding: '44px 32px', position: 'relative' }}>
        <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', textAlign: 'center', marginBottom: 22, letterSpacing: '0.12em', textTransform: 'uppercase', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
          <span style={{ flex: 1, maxWidth: 80, height: 1, background: 'var(--line)' }} />
          // pilotpartner-programm · 2026
          <span style={{ flex: 1, maxWidth: 80, height: 1, background: 'var(--line)' }} />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14, textAlign: 'center', maxWidth: 620, margin: '0 auto' }}>
          <div style={{ fontSize: 18, color: 'var(--ink)', fontFamily: 'Inter Tight, sans-serif', fontWeight: 600, letterSpacing: '-0.01em' }}>
            Wir suchen <span style={{ color: 'var(--accent)' }}>{TOTAL - TAKEN} Pilot-Maklerbüros</span> in Österreich.
          </div>
          <p style={{ fontSize: 14, color: 'var(--ink-2)', maxWidth: 520 }}>
            Du bekommst persönliches Onboarding, Einfluss auf die Roadmap und Pilot-Konditionen für 24 Monate. Wir zeigen dich (mit deinem Einverständnis) als Referenz.
          </p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6, flexWrap: 'wrap', justifyContent: 'center' }}>
            {slots.map((_, i) => {
              const filled = i < TAKEN;
              return (
                <span key={i} aria-hidden style={{
                  width: 22, height: 22, borderRadius: 4,
                  border: '1px solid ' + (filled ? 'color-mix(in srgb, var(--accent) 60%, transparent)' : 'var(--line-2)'),
                  background: filled ? 'var(--accent-soft)' : 'transparent',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {filled && <span style={{ width: 8, height: 8, borderRadius: 2, background: 'var(--accent)', boxShadow: '0 0 8px var(--accent-glow)' }} />}
                </span>
              );
            })}
          </div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.06em' }}>
            <span style={{ color: 'var(--accent)' }}>{TAKEN}</span> / {TOTAL} Slots vergeben
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- PROBLEM ----------
const ProblemSection = () => {
  const pains = [
    { tag: 'PAIN_01', title: 'Vier Tools, vier Wahrheiten', blurb: 'JustImmo. Wordpress. Mailchimp. Excel. Jedes Property dreimal pflegen, Reportings sind Excel-Voodoo, und am Ende stimmt nirgends was.', stat: '4–6 Tools', statLabel: 'parallel im Einsatz' },
    { tag: 'PAIN_02', title: 'Bauträger sagen ab', blurb: 'Standard-Maklersoftware kann keine Bauprojekt-Microsites. Wer Neubau-Mandate will, braucht eine Agentur — oder verliert das Geschäft.', stat: '3–8 k€', statLabel: 'pro Microsite extern' },
    { tag: 'PAIN_03', title: 'Leads versickern', blurb: 'Anfragen kommen per Mail. Keiner trackt sie. Follow-ups gehen unter. Die guten gehen zur Konkurrenz, die schneller war.', stat: '30–50 %', statLabel: 'Leads verloren' },
    { tag: 'PAIN_04', title: 'Generic-Look statt Marke', blurb: 'Standard-Templates, eingebettete iFrames, fremde Designs. Dein Maklerbüro sieht aus wie hundert andere — und wird austauschbar.', stat: '0', statLabel: 'eigene Markenwirkung' },
  ];
  return (
    <section style={{ borderBottom: '1px solid var(--line)', background: 'var(--bg-2)', position: 'relative', overflow: 'hidden' }}>
      <div className="grid-bg" style={{ opacity: 0.3 }} />
      <div aria-hidden style={{ position: 'absolute', top: '-20%', left: '-10%', width: 480, height: 480, borderRadius: '50%', background: 'radial-gradient(circle, var(--accent-glow) 0%, transparent 60%)', filter: 'blur(80px)', opacity: 0.35, pointerEvents: 'none' }} />
      <div className="container" style={{ position: 'relative', paddingTop: 96, paddingBottom: 96 }}>
        <div style={{ maxWidth: 680, marginBottom: 56 }}>
          <div className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--accent)', marginBottom: 18, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '5px 10px', background: 'var(--accent-soft)', border: '1px solid color-mix(in srgb, var(--accent) 40%, transparent)', borderRadius: 4 }}>
            <span style={{ width: 6, height: 6, borderRadius: 1, background: 'var(--accent)' }} />
            / das problem
          </div>
          <h2 style={{ fontSize: 'clamp(30px, 4.2vw, 46px)', lineHeight: 1.1, marginBottom: 14 }}>
            Was Standard-Tools<br />
            <span style={{ color: 'var(--ink-3)' }}>nicht für dich tun.</span>
          </h2>
          <p style={{ fontSize: 17, color: 'var(--ink-2)', maxWidth: 560 }}>
            Status quo in den meisten Maklerbüros. Wenn du dich in zwei oder mehr Punkten wiedererkennst, lies weiter.
          </p>
        </div>
        <div className="problem-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
          {pains.map((p, i) => (
            <div key={i} style={{ position: 'relative', padding: 24, background: 'rgba(255,255,255,0.025)', border: '1px solid var(--line-2)', borderRadius: 12, display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Corners color="var(--line-2)" size={8} inset={-3} />
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
                <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.1em' }}>{p.tag}</span>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                  <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 22, fontWeight: 600, color: 'var(--accent)', letterSpacing: '-0.02em' }}>{p.stat}</span>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.04em' }}>{p.statLabel}</span>
                </div>
              </div>
              <h3 style={{ fontSize: 20, color: 'var(--ink)', marginTop: 4 }}>{p.title}</h3>
              <p style={{ fontSize: 14.5, color: 'var(--ink-2)' }}>{p.blurb}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 760px) { .problem-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
};

// ---------- FEATURES ----------
const FeatureRow = ({ num, title, blurb, points, screenshotLabel, reverse, accent, codeSnippet }) => (
  <div className="feature-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center', padding: '72px 0', borderBottom: '1px solid var(--line)' }}>
    <div style={{ order: reverse ? 2 : 1 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 18 }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontWeight: 600, fontSize: 56, lineHeight: 1, color: accent, letterSpacing: '-0.04em', textShadow: `0 0 40px ${accent === 'var(--accent)' ? 'var(--accent-glow)' : 'var(--accent-2-glow)'}` }}>
          {num.split(' ')[0]}
        </div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
          {num.split(' ').slice(2).join(' ')}
        </div>
      </div>
      <h3 style={{ fontSize: 32, marginBottom: 14, color: 'var(--ink)' }}>{title}</h3>
      <p style={{ fontSize: 16, color: 'var(--ink-2)', marginBottom: 22, maxWidth: 460 }}>{blurb}</p>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, marginBottom: codeSnippet ? 22 : 0 }}>
        {points.map((p, i) => (
          <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, fontSize: 14.5, color: 'var(--ink)' }}>
            <span className="mono" style={{ marginTop: 2, color: accent, fontSize: 11, opacity: 0.9 }}>0{i + 1}</span>
            {p}
          </li>
        ))}
      </ul>
      {codeSnippet && (
        <div className="mono" style={{ fontSize: 12, padding: '12px 14px', background: 'rgba(255,255,255,0.025)', border: '1px solid var(--line)', borderRadius: 8, color: 'var(--ink-2)', maxWidth: 460 }}>
          <span style={{ color: 'var(--ink-3)' }}>$ </span>
          <span style={{ color: accent }}>{codeSnippet.cmd}</span>
          <span style={{ color: 'var(--ink-2)' }}> {codeSnippet.args}</span>
        </div>
      )}
    </div>
    <div style={{ order: reverse ? 1 : 2 }}>
      <ScreenshotPlaceholder label={screenshotLabel} ratio="4 / 3" accent={accent} />
    </div>
    <style>{`@media (max-width: 860px) { .feature-row { grid-template-columns: 1fr !important; gap: 32px !important; padding: 56px 0 !important; } .feature-row > div { order: unset !important; } }`}</style>
  </div>
);

const Features = () => (
  <section id="features" style={{ borderBottom: '1px solid var(--line)', background: 'var(--bg)', position: 'relative' }}>
    <div className="grid-bg" style={{ opacity: 0.4 }} />
    <div className="container" style={{ position: 'relative', paddingTop: 100, paddingBottom: 24 }}>
      <div style={{ maxWidth: 680 }}>
        <div className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--accent-2)', marginBottom: 18, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '5px 10px', background: 'var(--accent-2-soft)', border: '1px solid color-mix(in srgb, var(--accent-2) 40%, transparent)', borderRadius: 4 }}>
          <span style={{ width: 6, height: 6, borderRadius: 1, background: 'var(--accent-2)' }} />
          / modules
        </div>
        <h2 style={{ fontSize: 'clamp(32px, 4.4vw, 48px)', lineHeight: 1.1, marginBottom: 16 }}>
          Vier Module, ein Login,<br />
          <span style={{ color: 'var(--ink-3)' }}>null Workarounds.</span>
        </h2>
        <p style={{ fontSize: 17, color: 'var(--ink-2)' }}>
          Statt Maklersoftware, Website-Baukasten, Lead-Tool und Excel parallel zu pflegen, machst du alles an einem Ort. Die Daten liegen bei dir.
        </p>
      </div>
    </div>
    <div className="container" style={{ position: 'relative' }}>
      <FeatureRow
        num="01 — Öffentliche Website"
        accent="var(--accent)"
        title="Deine Maklerseite. Ohne Webentwickler."
        blurb="Fertige, SEO-optimierte Website mit Immobilien-Suche, Detailseiten, Team und Kontakt. White-Label — eigenes Logo, eigene Farben."
        points={[
          'Filter nach Kauf/Miete, Typ, Preis, Zimmer, Fläche, Ausstattung',
          'Detailseite mit Galerie, Karte, Grundriss-PDF',
          'Suchagent: User legen Suchprofile an, werden automatisch benachrichtigt',
          'SEO-Settings & Domain-Anbindung pro Maklerunternehmen',
        ]}
        screenshotLabel="Maklerseite — Property Listing"
        codeSnippet={{ cmd: 'qi site', args: '--domain=perkonig.at --theme=warm' }}
      />
      <FeatureRow
        num="02 — Bauprojekt-Modul"
        accent="var(--accent-2)"
        title="Neubau-Vermarktung in einer Liga, die Standard-Tools nicht spielen."
        blurb="Eigene Microsite pro Bauprojekt. Mit Unit-Tabelle, POI-Karte, Downloads und eigenem Branding."
        points={[
          'Hero, Beschreibungs-Sektionen, Unit-Tabelle (Status, Fläche, Preis)',
          'Interaktive Karte mit POIs (Schulen, Verkehr, Nahversorgung)',
          'Downloads: Exposés, Pläne, Datenblätter',
          'Eigenes Branding und URL pro Projekt',
        ]}
        screenshotLabel="Bauprojekt-Microsite"
        codeSnippet={{ cmd: 'qi project new', args: '"Donaupark Linz" --units=42' }}
        reverse
      />
      <FeatureRow
        num="03 — Admin-Backend"
        accent="var(--accent)"
        title="Properties anlegen in fünf Schritten. Keine Schulung nötig."
        blurb="5-Schritt-Wizard mit Live-Vorschau und Entwurfs-Speicherung. Bulk-Aktionen über Multi-Select. Lead-Verwaltung mit Status-Tracking."
        points={[
          'Wizard: Basis → Eckdaten → Inhalte → Medien → Veröffentlichen',
          'Bulk: Status setzen, Makler zuteilen, exportieren, löschen',
          'Lead-Tracking mit Status und Notizen',
          'Team-Verwaltung mit Drag-and-Drop-Sortierung',
        ]}
        screenshotLabel="Admin Property Wizard"
        codeSnippet={{ cmd: 'qi property add', args: '--type=apartment --status=draft' }}
      />
      <FeatureRow
        num="04 — Schnittstellen"
        accent="var(--accent-2)"
        title="JustImmo, OpenImmo, raus mit den Daten — wann immer du willst."
        blurb="Bestehende Bestände automatisch importieren. Standard-Format-Support. Keine Vendor-Lock-in-Falle."
        points={[
          'JustImmo-Anbindung für automatischen Import',
          'OpenImmo-Format für Drittanbieter',
          'Automatisierte E-Mail-Benachrichtigungen',
          'Daten-Export jederzeit. Du behältst die Kontrolle.',
        ]}
        screenshotLabel="Integrations & Import"
        codeSnippet={{ cmd: 'qi import', args: '--from=justimmo --sync=hourly' }}
        reverse
      />
    </div>
  </section>
);

// ---------- COMPARISON ----------
const Comparison = () => {
  const rows = [
    { label: 'Anzahl Tools', stack: '4–6', qi: '1' },
    { label: 'Monatliche Kosten', stack: '200–400 €', qi: 'ab 79 €' },
    { label: 'Datenpflege', stack: 'parallel in jedem Tool', qi: 'einmal, auto-synced' },
    { label: 'Bauprojekt-Microsites', stack: 'externe Agentur · 3–8 k€', qi: 'inklusive, unbegrenzt' },
    { label: 'Lead-Tracking', stack: 'Excel + Mail-Postfach', qi: 'integriert mit Status & Notizen' },
    { label: 'White-Label', stack: 'bedingt, oft Iframe', qi: 'komplett, eigene Domain' },
    { label: 'Datenexport', stack: 'meist Vendor-Lock-in', qi: 'OpenImmo · jederzeit' },
    { label: 'Hosting', stack: 'EU/USA gemischt', qi: 'Österreich · DSGVO' },
  ];
  return (
    <section style={{ borderBottom: '1px solid var(--line)', background: 'var(--bg)', position: 'relative', overflow: 'hidden' }}>
      <div className="grid-bg" style={{ opacity: 0.35 }} />
      <div className="container" style={{ position: 'relative', paddingTop: 100, paddingBottom: 100 }}>
        <div style={{ maxWidth: 680, marginBottom: 48 }}>
          <div className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--accent-2)', marginBottom: 18, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '5px 10px', background: 'var(--accent-2-soft)', border: '1px solid color-mix(in srgb, var(--accent-2) 40%, transparent)', borderRadius: 4 }}>
            <span style={{ width: 6, height: 6, borderRadius: 1, background: 'var(--accent-2)' }} />
            / vergleich
          </div>
          <h2 style={{ fontSize: 'clamp(30px, 4.2vw, 46px)', lineHeight: 1.1, marginBottom: 14 }}>
            Standard-Stack<br />
            <span style={{ color: 'var(--ink-3)' }}>vs. eine Plattform.</span>
          </h2>
          <p style={{ fontSize: 17, color: 'var(--ink-2)', maxWidth: 560 }}>
            Was du heute mit drei bis sechs Tools machst — und was passiert, wenn alles in einer Plattform lebt.
          </p>
        </div>
        <div style={{ position: 'relative', borderRadius: 14, overflow: 'hidden', border: '1px solid var(--line-2)', background: 'linear-gradient(180deg, #0F1620 0%, #0B1018 100%)', boxShadow: '0 30px 60px -30px rgba(74,158,255,0.20), inset 0 1px 0 rgba(255,255,255,0.04)' }}>
          <div className="cmp-row cmp-head" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr 1fr', borderBottom: '1px solid var(--line-2)', background: 'rgba(255,255,255,0.02)' }}>
            <div className="mono" style={{ padding: '16px 20px', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>// kriterium</div>
            <div className="mono" style={{ padding: '16px 20px', fontSize: 12, color: 'var(--ink-2)', borderLeft: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--ink-3)' }} />
              Standard-Stack
            </div>
            <div className="mono" style={{ padding: '16px 20px', fontSize: 12, color: 'var(--accent)', borderLeft: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 8, background: 'var(--accent-soft)' }}>
              <span className="pulse-dot" style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }} />
              QuantumImmo
            </div>
          </div>
          {rows.map((r, i) => (
            <div key={i} className="cmp-row" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr 1fr', borderBottom: i === rows.length - 1 ? 'none' : '1px solid var(--line)' }}>
              <div style={{ padding: '16px 20px', fontSize: 14, color: 'var(--ink)', fontWeight: 500 }}>{r.label}</div>
              <div style={{ padding: '16px 20px', fontSize: 14, color: 'var(--ink-3)', borderLeft: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 8 }}>
                <span aria-hidden style={{ color: 'var(--ink-4)' }}>×</span>
                {r.stack}
              </div>
              <div style={{ padding: '16px 20px', fontSize: 14, color: 'var(--ink)', borderLeft: '1px solid var(--line)', background: 'rgba(255,122,51,0.04)', display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ color: 'var(--accent)' }}><Icon.check /></span>
                {r.qi}
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap', justifyContent: 'space-between' }}>
          <p className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>// Kostenvergleich basiert auf typischen AT-Maklerbüro-Setups (5–15 Mitarbeiter).</p>
          <a href="#waitlist" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 14, color: 'var(--accent)', fontWeight: 600 }}>
            Selbst rechnen lassen <Icon.arrow />
          </a>
        </div>
        <style>{`
          @media (max-width: 760px) {
            .cmp-row { grid-template-columns: 1fr !important; }
            .cmp-row > div { border-left: 0 !important; border-bottom: 1px solid var(--line) !important; }
            .cmp-row > div:last-child { border-bottom: 0 !important; }
            .cmp-head { display: none !important; }
          }
        `}</style>
      </div>
    </section>
  );
};

// ---------- TIMELINE ----------
const Timeline = () => {
  const steps = [
    { day: 'TAG 0', title: '30-min Demo', blurb: 'Wir zeigen dir das System mit deinen echten Daten — du siehst sofort, ob es passt.', accent: 'var(--accent)' },
    { day: 'TAG 1', title: 'Setup-Workshop', blurb: 'Domain, Logo, Farben, Team. Du wählst, wir konfigurieren — gemeinsam in einem Call.', accent: 'var(--accent-2)' },
    { day: 'TAG 3', title: 'Datenmigration', blurb: 'JustImmo, OpenImmo oder Excel — wir migrieren. Du checkst und gibst frei.', accent: 'var(--accent)' },
    { day: 'TAG 7', title: 'Live', blurb: 'Öffentliche Maklerseite und Admin-Backend produktiv. Du arbeitest, wir bleiben dran.', accent: 'var(--accent-2)' },
  ];
  return (
    <section style={{ borderBottom: '1px solid var(--line)', background: 'var(--bg-2)', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', top: '20%', left: '-10%', width: 500, height: 500, borderRadius: '50%', background: 'radial-gradient(circle, var(--accent-2-glow) 0%, transparent 60%)', filter: 'blur(80px)', opacity: 0.4 }} />
      <div aria-hidden style={{ position: 'absolute', bottom: '0%', right: '-10%', width: 500, height: 500, borderRadius: '50%', background: 'radial-gradient(circle, var(--accent-glow) 0%, transparent 60%)', filter: 'blur(80px)', opacity: 0.35 }} />
      <div className="container" style={{ position: 'relative', paddingTop: 100, paddingBottom: 100 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 56 }}>
          <div style={{ maxWidth: 540 }}>
            <div className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--accent)', marginBottom: 18, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '5px 10px', background: 'var(--accent-soft)', border: '1px solid color-mix(in srgb, var(--accent) 40%, transparent)', borderRadius: 4 }}>
              <span style={{ width: 6, height: 6, borderRadius: 1, background: 'var(--accent)' }} />
              / onboarding
            </div>
            <h2 style={{ fontSize: 'clamp(30px, 4.2vw, 46px)', lineHeight: 1.1, marginBottom: 14 }}>
              Von Demo bis live<br />
              <span style={{ color: 'var(--accent)' }}>in sieben Tagen.</span>
            </h2>
          </div>
          <p style={{ fontSize: 16, color: 'var(--ink-2)', maxWidth: 380 }}>
            Kein Wochen-Workshop. Kein "melden Sie sich in Q3". Vier klare Schritte, persönlich begleitet.
          </p>
        </div>
        <div className="timeline-grid" style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          <div aria-hidden className="timeline-line" style={{ position: 'absolute', top: 30, left: '6%', right: '6%', height: 1, background: 'linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent) 100%)', opacity: 0.35 }} />
          {steps.map((s, i) => (
            <div key={i} style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ width: 60, height: 60, borderRadius: '50%', background: 'var(--bg-2)', border: '1px solid ' + s.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', boxShadow: `0 0 0 4px var(--bg-2), 0 0 24px -4px ${s.accent === 'var(--accent)' ? 'var(--accent-glow)' : 'var(--accent-2-glow)'}` }}>
                <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 18, fontWeight: 600, color: s.accent }}>0{i + 1}</span>
              </div>
              <div className="mono" style={{ fontSize: 11, color: s.accent, letterSpacing: '0.12em', marginTop: 4 }}>{s.day}</div>
              <h3 style={{ fontSize: 19, color: 'var(--ink)', letterSpacing: '-0.01em' }}>{s.title}</h3>
              <p style={{ fontSize: 14, color: 'var(--ink-2)' }}>{s.blurb}</p>
            </div>
          ))}
        </div>
        <style>{`
          @media (max-width: 860px) { .timeline-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } .timeline-line { display: none !important; } }
          @media (max-width: 480px) { .timeline-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </div>
    </section>
  );
};

// ---------- PRICING ----------
const PricingCard = ({ name, price, period, blurb, features, featured, cta }) => (
  <div style={{
    position: 'relative', padding: 28,
    background: featured ? 'linear-gradient(180deg, #131C28 0%, #0E1620 100%)' : 'rgba(255,255,255,0.025)',
    color: 'var(--ink)',
    border: '1px solid ' + (featured ? 'color-mix(in srgb, var(--accent) 50%, transparent)' : 'var(--line-2)'),
    borderRadius: 14, display: 'flex', flexDirection: 'column', gap: 22,
    boxShadow: featured ? '0 30px 60px -30px var(--accent-glow), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px 0 rgba(255,255,255,0.04)' : 'inset 0 1px 0 rgba(255,255,255,0.03)',
    overflow: 'hidden',
  }}>
    {featured && (
      <>
        <div aria-hidden style={{ position: 'absolute', top: -80, right: -80, width: 240, height: 240, borderRadius: '50%', background: 'radial-gradient(circle, var(--accent-glow) 0%, transparent 70%)', filter: 'blur(30px)', pointerEvents: 'none', opacity: 0.6 }} />
        <div className="mono" style={{ position: 'absolute', top: -1, left: 24, fontSize: 10, padding: '4px 10px', background: 'var(--accent)', color: '#0A0E14', borderRadius: '0 0 4px 4px', letterSpacing: '0.08em', fontWeight: 600 }}>
          ▸ EMPFOHLEN
        </div>
      </>
    )}
    <div style={{ position: 'relative' }}>
      <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>// {name}</div>
      <p style={{ fontSize: 14, color: 'var(--ink-2)' }}>{blurb}</p>
    </div>
    <div style={{ position: 'relative', display: 'flex', alignItems: 'baseline', gap: 6 }}>
      <span style={{ fontFamily: 'Inter Tight, sans-serif', fontSize: 44, fontWeight: 600, letterSpacing: '-0.03em', color: featured ? 'var(--accent)' : 'var(--ink)' }}>{price}</span>
      {period && <span className="mono" style={{ fontSize: 13, color: 'var(--ink-3)' }}>{period}</span>}
    </div>
    <a href="#waitlist" style={{
      position: 'relative', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
      padding: '12px 14px', borderRadius: 8, fontSize: 14, fontWeight: 600,
      background: featured ? 'var(--accent)' : 'rgba(255,255,255,0.08)',
      color: featured ? '#0A0E14' : 'var(--ink)',
      border: '1px solid ' + (featured ? 'var(--accent)' : 'var(--line-2)'),
      boxShadow: featured ? '0 8px 24px -8px var(--accent-glow)' : 'none',
    }}>
      {cta} <Icon.arrow />
    </a>
    <div style={{ height: 1, background: 'var(--line)' }} />
    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, position: 'relative' }}>
      {features.map((f, i) => (
        <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14, color: 'var(--ink-2)' }}>
          <span style={{ marginTop: 2, color: featured ? 'var(--accent)' : 'var(--accent-2)' }}><Icon.check /></span>
          {f}
        </li>
      ))}
    </ul>
  </div>
);

const Pricing = () => (
  <section id="pricing" style={{ borderBottom: '1px solid var(--line)', background: 'var(--bg-2)', position: 'relative' }}>
    <div aria-hidden style={{ position: 'absolute', top: '20%', right: '-10%', width: 500, height: 500, borderRadius: '50%', background: 'radial-gradient(circle, var(--accent-glow) 0%, transparent 60%)', filter: 'blur(80px)', pointerEvents: 'none', opacity: 0.4 }} />
    <div aria-hidden style={{ position: 'absolute', bottom: '0%', left: '-10%', width: 500, height: 500, borderRadius: '50%', background: 'radial-gradient(circle, var(--accent-2-glow) 0%, transparent 60%)', filter: 'blur(80px)', pointerEvents: 'none', opacity: 0.35 }} />
    <div className="container" style={{ position: 'relative', paddingTop: 100, paddingBottom: 100 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 48 }}>
        <div style={{ maxWidth: 540 }}>
          <div className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--accent)', marginBottom: 18, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '5px 10px', background: 'var(--accent-soft)', border: '1px solid color-mix(in srgb, var(--accent) 40%, transparent)', borderRadius: 4 }}>
            <span style={{ width: 6, height: 6, borderRadius: 1, background: 'var(--accent)' }} />
            / pricing
          </div>
          <h2 style={{ fontSize: 'clamp(30px, 4vw, 44px)', lineHeight: 1.1 }}>
            Transparent.<br />
            <span style={{ color: 'var(--ink-3)' }}>Monatlich kündbar.</span>
          </h2>
        </div>
        <p style={{ fontSize: 15, color: 'var(--ink-2)', maxWidth: 320 }}>
          Während der Early-Access-Phase: <span style={{ color: 'var(--accent)', fontWeight: 600 }}>50 % Rabatt</span> für die ersten zwölf Monate.
        </p>
      </div>
      <div className="pricing-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        <PricingCard name="Basic" price="€79" period="/ Monat" blurb="Für Einzelmakler. Alles fürs Tagesgeschäft." cta="Vormerken"
          features={['Öffentliche Maklerseite (White-Label)','Bis zu 50 Properties','Lead-Capture & Suchagent','JustImmo-Import','E-Mail-Support']} />
        <PricingCard name="Premium" price="€249" period="/ Monat" blurb="Für Büros mit Bauträger-Mandaten und Team." cta="Vormerken" featured
          features={['Alles aus Basic','Unbegrenzte Properties','Bauprojekt-Modul (unbegrenzte Projekte)','Multi-User mit Rollen','Custom Domain & SEO-Tools','Priority-Support']} />
        <PricingCard name="Individuell" price="Auf Anfrage" period="" blurb="Mehrere Standorte, Sonderintegrationen, SLA." cta="Gespräch buchen"
          features={['Alles aus Premium','Mehrere Maklermarken in einem Account','Custom-Integrationen','Dediziertes Onboarding','SLA & Account-Manager']} />
      </div>
      <style>{`@media (max-width: 860px) { .pricing-grid { grid-template-columns: 1fr !important; } }`}</style>
    </div>
  </section>
);

// ---------- FAQ ----------
const FAQItem = ({ q, a, idx }) => {
  const [open, setOpen] = useState(idx === 0);
  return (
    <div style={{ borderBottom: '1px solid var(--line)' }}>
      <button type="button" onClick={() => setOpen(!open)}
        style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '22px 0', textAlign: 'left' }}>
        <span style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
          <span className="mono" style={{ fontSize: 11, color: 'var(--accent-2)', marginTop: 4, letterSpacing: '0.06em' }}>Q.{String(idx + 1).padStart(2, '0')}</span>
          <span style={{ fontFamily: 'Inter Tight, sans-serif', fontSize: 18, fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.01em' }}>{q}</span>
        </span>
        <span style={{
          width: 28, height: 28, borderRadius: 6, border: '1px solid var(--line-2)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          color: open ? 'var(--accent)' : 'var(--ink-2)',
          transition: 'transform 0.25s ease, color 0.25s ease',
          transform: open ? 'rotate(45deg)' : 'rotate(0deg)',
          background: open ? 'var(--accent-soft)' : 'transparent',
        }}><Icon.plus /></span>
      </button>
      <div style={{ maxHeight: open ? 600 : 0, overflow: 'hidden', transition: 'max-height 0.35s ease, opacity 0.25s ease', opacity: open ? 1 : 0 }}>
        <div style={{ paddingLeft: 50, paddingBottom: 22, paddingRight: 44 }}>
          <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.65 }}>{a}</p>
        </div>
      </div>
    </div>
  );
};

const FAQ = () => {
  const faqs = [
    { q: 'Wie funktioniert die Migration von JustImmo?', a: 'Wir lesen deinen JustImmo-Bestand per OpenImmo-Export ein, mappen die Felder auf unser Datenmodell und übertragen alles inklusive Bildern, Dokumenten und Status. Du siehst eine Vorschau und gibst frei, bevor irgendetwas öffentlich wird. Typische Dauer: 1–2 Tage je nach Bestandsgröße.' },
    { q: 'Was passiert mit meinen Daten, wenn ich kündige?', a: 'Du kannst jederzeit einen kompletten OpenImmo-Export ziehen — Properties, Medien, Leads. Kein Lock-in, keine Übergabefrist, keine Extra-Kosten. Das ist im Vertrag fixiert.' },
    { q: 'Wo werden die Daten gehostet?', a: 'Server in Österreich (Wien) und Deutschland (Frankfurt). DSGVO-konform, Auftragsverarbeitungsvertrag standardmäßig dabei. Keine US-Cloud, keine Datentransfers außerhalb der EU.' },
    { q: 'Kann ich meine bestehende Domain weiternutzen?', a: 'Ja. Du verbindest deine Domain (perkonig.at, makler-mueller.at, ...) per DNS-Eintrag mit deiner QuantumImmo-Maklerseite. SSL-Zertifikat richten wir automatisch ein. Subdomains für Bauprojekte sind genauso möglich.' },
    { q: 'Was ist mit willhaben, ImmoNet und Co.?', a: 'Wir exportieren deine Properties im OpenImmo-Format — das verstehen alle relevanten Portale (willhaben, ImmoScout24 AT, ImmoNet, ImmoWelt, ...). Du pflegst einmal in QuantumImmo, der Export läuft automatisch.' },
    { q: 'Wir sind drei Standorte — kann das QuantumImmo abbilden?', a: 'Ja, im Individuell-Tarif. Mehrere Maklermarken und Standorte in einem Account, jeweils mit eigener Website, eigenem Branding und eigenem Property-Bestand. Cross-Standort-Reporting im zentralen Dashboard.' },
    { q: 'Was kostet die Bauprojekt-Microsite extra?', a: 'Nichts. Im Premium-Tarif sind unbegrenzte Bauprojekt-Microsites enthalten — inklusive Unit-Tabelle, POI-Karte, Downloads und eigenem Branding pro Projekt.' },
    { q: 'Wann genau geht ihr live?', a: 'Frühjahr 2026. Pilotpartner starten ab Februar 2026 mit Vorab-Zugang. Wer auf der Early-Access-Liste steht, bekommt vor allen anderen ein Onboarding-Slot und 50 % Rabatt für die ersten 12 Monate.' },
  ];
  return (
    <section id="faq" style={{ borderBottom: '1px solid var(--line)', background: 'var(--bg)', position: 'relative', overflow: 'hidden' }}>
      <div className="grid-bg" style={{ opacity: 0.3 }} />
      <div className="container" style={{ position: 'relative', paddingTop: 100, paddingBottom: 100 }}>
        <div className="faq-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64, alignItems: 'flex-start' }}>
          <div className="faq-side" style={{ position: 'sticky', top: 96 }}>
            <div className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--accent-2)', marginBottom: 18, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '5px 10px', background: 'var(--accent-2-soft)', border: '1px solid color-mix(in srgb, var(--accent-2) 40%, transparent)', borderRadius: 4 }}>
              <span style={{ width: 6, height: 6, borderRadius: 1, background: 'var(--accent-2)' }} />
              / faq
            </div>
            <h2 style={{ fontSize: 'clamp(28px, 3.8vw, 42px)', lineHeight: 1.1, marginBottom: 14 }}>
              Was du wissen<br />willst, bevor du<br />
              <span style={{ color: 'var(--ink-3)' }}>vormerkst.</span>
            </h2>
            <p style={{ fontSize: 15, color: 'var(--ink-2)', marginBottom: 24 }}>
              Steht deine Frage nicht dabei? Schreib uns — Antwort innerhalb von einem Werktag.
            </p>
            <a href="mailto:hello@quantumimmo.at" className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--accent)', padding: '10px 14px', border: '1px solid color-mix(in srgb, var(--accent) 40%, transparent)', borderRadius: 8, background: 'var(--accent-soft)' }}>
              <span style={{ color: 'var(--accent)' }}>›</span> hello@quantumimmo.at
            </a>
          </div>
          <div>
            {faqs.map((f, i) => <FAQItem key={i} idx={i} q={f.q} a={f.a} />)}
          </div>
        </div>
        <style>{`
          @media (max-width: 860px) {
            .faq-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
            .faq-side { position: static !important; }
          }
        `}</style>
      </div>
    </section>
  );
};

// ---------- FINAL CTA ----------
const CTAForm = () => {
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);
  return submitted ? (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '14px 16px', background: 'rgba(255,255,255,0.06)', border: '1px solid var(--line-2)', borderRadius: 10, fontSize: 14, color: 'var(--ink)', maxWidth: 460 }}>
      <Icon.check style={{ color: 'var(--accent)' }} /> Du bist auf der Liste.
    </div>
  ) : (
    <form onSubmit={(e) => { e.preventDefault(); if (email.includes('@')) setSubmitted(true); }}
      style={{ display: 'flex', gap: 6, padding: 6, background: 'rgba(255,255,255,0.04)', border: '1px solid var(--line-2)', borderRadius: 12, maxWidth: 460, boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 24px -12px var(--accent-glow)' }}>
      <span className="mono" style={{ display: 'inline-flex', alignItems: 'center', padding: '0 8px 0 10px', color: 'var(--accent-2)', fontSize: 13 }}>›</span>
      <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
        placeholder="dein@maklerbuero.at"
        style={{ flex: 1, border: 0, outline: 0, background: 'transparent', padding: '10px 4px', fontSize: 15, color: 'var(--ink)', fontFamily: 'JetBrains Mono, monospace' }} />
      <button type="submit" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'var(--accent)', color: '#0A0E14', padding: '10px 16px', borderRadius: 8, fontSize: 14, fontWeight: 600, boxShadow: '0 0 0 1px var(--accent), 0 8px 24px -8px var(--accent-glow)' }}>
        Vormerken <Icon.arrow />
      </button>
    </form>
  );
};

const FinalCTA = ({ layout }) => {
  const isSplit = layout === 'split';
  return (
    <section style={{ position: 'relative', background: 'var(--bg)', color: 'var(--ink)', overflow: 'hidden', borderBottom: '1px solid var(--line)' }}>
      <div className="grid-bg" />
      <div aria-hidden style={{ position: 'absolute', top: '-30%', right: '-10%', width: 620, height: 620, borderRadius: '50%', background: 'radial-gradient(circle, var(--accent-glow) 0%, transparent 65%)', filter: 'blur(50px)', pointerEvents: 'none' }} />
      <div aria-hidden style={{ position: 'absolute', bottom: '-30%', left: '-10%', width: 560, height: 560, borderRadius: '50%', background: 'radial-gradient(circle, var(--accent-2-glow) 0%, transparent 65%)', filter: 'blur(60px)', pointerEvents: 'none' }} />
      <div className="container" style={{ position: 'relative', paddingTop: 100, paddingBottom: 100 }}>
        {isSplit ? (
          <div className="cta-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
            <div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--accent)', marginBottom: 18, letterSpacing: '0.12em', textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 24, height: 1, background: 'var(--accent)' }} />
                / final boot
              </div>
              <h2 style={{ fontSize: 'clamp(34px, 4.8vw, 52px)', lineHeight: 1.05, marginBottom: 18 }}>
                Schluss mit dem<br /><span style={{ color: 'var(--accent)' }}>Tool-Stack-Chaos.</span>
              </h2>
              <p style={{ fontSize: 17, color: 'var(--ink-2)', maxWidth: 440 }}>
                Trag dich ein. Zum Launch bist du dabei — mit 50 % Rabatt für die ersten zwölf Monate.
              </p>
            </div>
            <div><CTAForm /></div>
          </div>
        ) : (
          <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto' }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent)', marginBottom: 18, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
              / final boot
            </div>
            <h2 style={{ fontSize: 'clamp(36px, 5vw, 56px)', lineHeight: 1.05, marginBottom: 18 }}>
              Schluss mit dem<br /><span style={{ color: 'var(--accent)' }}>Tool-Stack-Chaos.</span>
            </h2>
            <p style={{ fontSize: 18, color: 'var(--ink-2)', marginBottom: 36 }}>
              Trag dich ein. Zum Launch bist du dabei — mit 50 % Rabatt für die ersten zwölf Monate.
            </p>
            <div style={{ display: 'flex', justifyContent: 'center' }}><CTAForm /></div>
          </div>
        )}
      </div>
      <style>{`@media (max-width: 860px) { .cta-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
    </section>
  );
};

// ---------- FOOTER ----------
const FooterCol = ({ title, links }) => (
  <div>
    <div className="mono" style={{ fontSize: 11, fontWeight: 500, color: 'var(--ink-3)', marginBottom: 14, letterSpacing: '0.08em', textTransform: 'uppercase' }}>// {title}</div>
    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
      {links.map((l, i) => (
        <li key={i}>
          <a href={l.href} style={{ fontSize: 13, color: l.muted ? 'var(--ink-3)' : 'var(--ink-2)' }}>{l.label}</a>
        </li>
      ))}
    </ul>
  </div>
);

const Footer = () => (
  <footer style={{ background: 'var(--bg)', borderTop: '1px solid var(--line)', position: 'relative' }}>
    <div className="container" style={{ paddingTop: 56, paddingBottom: 32, display: 'flex', flexWrap: 'wrap', gap: 24, justifyContent: 'space-between', alignItems: 'flex-start' }}>
      <div style={{ maxWidth: 320 }}>
        <Logo small />
        <p style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 12 }}>
          Ein Produkt von QuantumTech. Maklersoftware, neu gedacht.
        </p>
        <div className="mono" style={{ marginTop: 16, fontSize: 10, color: 'var(--ink-3)', display: 'inline-flex', alignItems: 'center', gap: 8, padding: '4px 10px', border: '1px solid var(--line)', borderRadius: 999 }}>
          <span className="pulse-dot" style={{ width: 5, height: 5, borderRadius: '50%', background: '#3DD68C' }} />
          ALL SYSTEMS · OPERATIONAL
        </div>
      </div>
      <div style={{ display: 'flex', gap: 56, flexWrap: 'wrap' }}>
        <FooterCol title="Produkt" links={[
          { label: 'Funktionen', href: '#features' },
          { label: 'Preise', href: '#pricing' },
          { label: 'FAQ', href: '#faq' },
          { label: 'Early Access', href: '#waitlist' },
        ]} />
        <FooterCol title="Unternehmen" links={[
          { label: 'Kontakt', href: 'mailto:hello@quantumimmo.at' },
          { label: 'Pilotpartner werden', href: '#waitlist' },
          { label: 'Impressum', href: '#legal', muted: true },
          { label: 'Datenschutz', href: '#legal', muted: true },
        ]} />
        <FooterCol title="Ressourcen" links={[
          { label: 'JustImmo-Import', href: '#features' },
          { label: 'OpenImmo-Export', href: '#features' },
          { label: 'Roadmap', href: '#waitlist', muted: true },
        ]} />
      </div>
    </div>
    <div id="legal" className="container" style={{ paddingTop: 14, paddingBottom: 14, borderTop: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
      <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.06em' }}>// hinweis</span>
      <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>
        Impressum, Datenschutzerklärung und AGB werden zum öffentlichen Launch ergänzt. Bei konkreten Fragen während der Pilotphase: <a href="mailto:hello@quantumimmo.at" style={{ color: 'var(--accent-2)' }}>hello@quantumimmo.at</a>.
      </span>
    </div>
    <div className="container" style={{ paddingBottom: 28, paddingTop: 16, borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8 }}>
      <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>© 2026 QuantumTech · v0.9.4-beta</span>
      <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>Made in Austria · 🇦🇹</span>
    </div>
  </footer>
);

// ---------- TWEAKS ----------
const Tweaks = ({ tweaks, setTweak }) => (
  <TweaksPanel title="Tweaks">
    <TweakSection label="Layout">
      <TweakRadio label="Hero & Final CTA" value={tweaks.layout} onChange={(v) => setTweak('layout', v)}
        options={[{ value: 'split', label: 'Split' },{ value: 'centered', label: 'Zentriert' }]} />
    </TweakSection>
    <TweakSection label="Tech-Vibes">
      <TweakRadio label="Glow-Intensität" value={tweaks.intensity} onChange={(v) => setTweak('intensity', v)}
        options={[{ value: 'low', label: 'Low' },{ value: 'med', label: 'Med' },{ value: 'high', label: 'High' }]} />
    </TweakSection>
  </TweaksPanel>
);

const useIntensity = (level) => {
  useEffect(() => {
    const root = document.documentElement;
    if (level === 'low') {
      root.style.setProperty('--accent-glow', 'rgba(255,122,51,0.20)');
      root.style.setProperty('--accent-2-glow', 'rgba(74,158,255,0.20)');
    } else if (level === 'med') {
      root.style.setProperty('--accent-glow', 'rgba(255,122,51,0.35)');
      root.style.setProperty('--accent-2-glow', 'rgba(74,158,255,0.35)');
    } else {
      root.style.setProperty('--accent-glow', 'rgba(255,122,51,0.5)');
      root.style.setProperty('--accent-2-glow', 'rgba(74,158,255,0.5)');
    }
  }, [level]);
};

// ---------- APP ----------
const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useIntensity(tweaks.intensity);
  return (
    <>
      <Nav />
      <Hero layout={tweaks.layout} />
      <PilotBar />
      <ProblemSection />
      <Features />
      <Comparison />
      <Timeline />
      <Pricing />
      <FAQ />
      <FinalCTA layout={tweaks.layout} />
      <Footer />
      <Tweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
};

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