// Sections for the landing page.
// All in one file but each section is a focused component.

// ─────────────────────────────────────────────────────────────────────────────
// Shared bits

function Container({ children, style, narrow }) {
  return (
    <div style={{
      maxWidth: narrow ? 880 : 1200,
      margin: '0 auto',
      padding: '0 32px',
      ...style,
    }}>
      {children}
    </div>
  );
}

function CTAButton({ children, primary, large, onClick, href, target }) {
  const style = {
    background: primary ? 'var(--accent)' : '#fff',
    color: primary ? '#fff' : 'var(--ink)',
    border: primary ? 'none' : '1px solid var(--border-strong)',
    padding: large ? '15px 26px' : '11px 18px',
    borderRadius: 9,
    fontSize: large ? 15 : 14,
    fontWeight: 500,
    fontFamily: 'inherit',
    cursor: 'pointer',
    letterSpacing: '-0.005em',
    whiteSpace: 'nowrap',
    flexShrink: 0,
    textDecoration: 'none',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    boxShadow: primary
      ? '0 6px 18px -6px color-mix(in oklab, var(--accent) 50%, transparent), inset 0 1px 0 rgba(255,255,255,0.15)'
      : 'none',
    transition: 'transform .12s ease, box-shadow .12s ease',
  };
  const onEnter = e => e.currentTarget.style.transform = 'translateY(-1px)';
  const onLeave = e => e.currentTarget.style.transform = 'translateY(0)';
  if (href) {
    return (
      <a href={href} target={target || '_self'} rel={target === '_blank' ? 'noopener noreferrer' : undefined}
         onMouseEnter={onEnter} onMouseLeave={onLeave} style={style}>
        {children}
      </a>
    );
  }
  return (
    <button onClick={onClick} onMouseEnter={onEnter} onMouseLeave={onLeave} style={style}>
      {children}
    </button>
  );
}

function SectionLabel({ children }) {
  return (
    <div className="mono" style={{
      fontSize: 12,
      letterSpacing: '0.08em',
      textTransform: 'uppercase',
      color: 'var(--accent)',
      fontWeight: 500,
      marginBottom: 14,
    }}>
      <span style={{
        display: 'inline-block', width: 8, height: 8, borderRadius: 2,
        background: 'var(--accent)', marginRight: 8, verticalAlign: 'middle',
      }} />
      {children}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// NAV

function Nav({ cta, ctaHref }) {
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(255,255,255,0.85)',
      backdropFilter: 'blur(14px) saturate(160%)',
      WebkitBackdropFilter: 'blur(14px) saturate(160%)',
      borderBottom: '1px solid var(--border)',
    }}>
      <Container style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 64,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <BrandMark />
          <span style={{ fontWeight: 600, letterSpacing: '-0.01em', fontSize: 15 }}>
            Konfigurator Garaży
          </span>
          <span className="mono" style={{
            fontSize: 10, padding: '2px 6px',
            background: 'var(--bg-soft)', borderRadius: 4,
            color: 'var(--ink-dim)', marginLeft: 4,
          }}>v2.4</span>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 28, fontSize: 14 }}>
          <a href="#problem" style={navLink}>Problem</a>
          <a href="#porownanie" style={navLink}>Porównanie</a>
          <a href="#demo" style={navLink}>Demo</a>
          <a href="#liczby" style={navLink}>Liczby</a>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <a href="#" style={{ ...navLink, fontSize: 13.5 }}>Zaloguj</a>
          <CTAButton primary href={ctaHref}>{cta}</CTAButton>
        </div>
      </Container>
    </nav>
  );
}
const navLink = {
  color: 'var(--ink-mid)', textDecoration: 'none',
  fontWeight: 450, letterSpacing: '-0.005em',
};

function BrandMark() {
  return (
    <div style={{
      width: 28, height: 28, borderRadius: 6,
      background: 'var(--ink)', display: 'grid', placeItems: 'center',
      position: 'relative', overflow: 'hidden',
    }}>
      <svg width="18" height="14" viewBox="0 0 18 14" fill="none">
        <path d="M1 13 L1 5 L9 1 L17 5 L17 13" stroke="white" strokeWidth="1.5" strokeLinejoin="round"/>
        <rect x="6" y="7" width="6" height="6" fill="var(--accent)" stroke="white" strokeWidth="0.8"/>
      </svg>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// HERO

function Hero({ headline, sub, cta, layout, vimeoId, ctaHref }) {
  if (layout === 'split') return <HeroSplit headline={headline} sub={sub} cta={cta} vimeoId={vimeoId} ctaHref={ctaHref} />;
  return <HeroCentered headline={headline} sub={sub} cta={cta} vimeoId={vimeoId} ctaHref={ctaHref} />;
}

function HeroCentered({ headline, sub, cta, vimeoId, ctaHref }) {
  return (
    <section style={{ paddingTop: 96, paddingBottom: 80, position: 'relative' }}>
      {/* subtle grid background */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `
          linear-gradient(to right, var(--border) 1px, transparent 1px),
          linear-gradient(to bottom, var(--border) 1px, transparent 1px)`,
        backgroundSize: '64px 64px',
        maskImage: 'radial-gradient(ellipse 60% 50% at 50% 30%, black 30%, transparent 80%)',
        WebkitMaskImage: 'radial-gradient(ellipse 60% 50% at 50% 30%, black 30%, transparent 80%)',
        opacity: 0.5, pointerEvents: 'none',
      }} />

      <Container narrow style={{ position: 'relative', textAlign: 'center' }}>
        <div className="mono" style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 12px',
          background: 'var(--accent-soft)',
          color: 'var(--accent-ink)',
          borderRadius: 999,
          fontSize: 12, letterSpacing: '0.02em',
          marginBottom: 26,
          border: '1px solid color-mix(in oklab, var(--accent) 20%, white)',
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: 999,
            background: 'var(--accent)',
            boxShadow: '0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent)',
          }} />
          Dla firm sprzedających garaże blaszane
        </div>

        <h1 style={{
          fontSize: 'clamp(40px, 6vw, 72px)',
          lineHeight: 1.02,
          letterSpacing: '-0.035em',
          fontWeight: 600,
          margin: 0,
          textWrap: 'balance',
        }}>
          {headline}
        </h1>

        <p style={{
          marginTop: 22, fontSize: 19, lineHeight: 1.5,
          color: 'var(--ink-dim)', maxWidth: 640,
          marginLeft: 'auto', marginRight: 'auto',
          letterSpacing: '-0.005em',
        }}>
          {sub}
        </p>

        <div style={{
          marginTop: 32, display: 'flex', gap: 12,
          justifyContent: 'center', flexWrap: 'wrap',
        }}>
          <CTAButton primary large href={ctaHref}>{cta} →</CTAButton>
          <CTAButton large href="#demo">Zobacz Loom (90 sek.)</CTAButton>
        </div>

        <div className="mono" style={{
          marginTop: 22, fontSize: 12, color: 'var(--ink-dim)',
        }}>
          bez karty · bez instalacji · uruchomienie w 3 dni
        </div>

        {/* Loom thumbnail */}
        <div style={{ marginTop: 60 }}>
          <LoomThumbnail vimeoId={vimeoId} />
        </div>
      </Container>
    </section>
  );
}

function HeroSplit({ headline, sub, cta, vimeoId, ctaHref }) {
  return (
    <section style={{ paddingTop: 88, paddingBottom: 80, position: 'relative' }}>
      <Container style={{
        display: 'grid', gridTemplateColumns: '1fr 1.1fr',
        gap: 64, alignItems: 'center',
      }}>
        <div>
          <div className="mono" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '5px 10px',
            background: 'var(--accent-soft)',
            color: 'var(--accent-ink)',
            borderRadius: 999, fontSize: 11.5, letterSpacing: '0.02em',
            marginBottom: 24, border: '1px solid color-mix(in oklab, var(--accent) 18%, white)',
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: 999,
              background: 'var(--accent)',
            }} />
            Dla firm sprzedających garaże blaszane
          </div>

          <h1 style={{
            fontSize: 'clamp(36px, 4.8vw, 60px)',
            lineHeight: 1.05,
            letterSpacing: '-0.03em',
            fontWeight: 600,
            margin: 0,
            textWrap: 'balance',
          }}>
            {headline}
          </h1>

          <p style={{
            marginTop: 22, fontSize: 18, lineHeight: 1.5,
            color: 'var(--ink-dim)', maxWidth: 520,
            letterSpacing: '-0.005em',
          }}>
            {sub}
          </p>

          <div style={{
            marginTop: 28, display: 'flex', gap: 10, flexWrap: 'wrap',
          }}>
            <CTAButton primary large href={ctaHref}>{cta} →</CTAButton>
            <CTAButton large href="#demo">Zobacz Loom (90 sek.)</CTAButton>
          </div>

          {/* mini logos / trust */}
          <div style={{
            marginTop: 40, paddingTop: 22,
            borderTop: '1px solid var(--border)',
            display: 'flex', alignItems: 'center', gap: 24,
            flexWrap: 'wrap',
          }}>
            <span className="mono" style={{
              fontSize: 11, color: 'var(--ink-dim)', letterSpacing: '0.05em',
              textTransform: 'uppercase',
            }}>Wdrażają producenci</span>
            <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
              <FakeLogo label="STAL-MET" />
              <FakeLogo label="GARBUD" />
              <FakeLogo label="BLASZAK PRO" />
              <FakeLogo label="METALON" />
            </div>
          </div>
        </div>

        <div>
          <LoomThumbnail compact vimeoId={vimeoId} />
        </div>
      </Container>
    </section>
  );
}

function FakeLogo({ label }) {
  return (
    <span className="mono" style={{
      fontSize: 12, color: 'var(--ink-dim)', fontWeight: 500,
      letterSpacing: '0.04em',
    }}>{label}</span>
  );
}

function LoomThumbnail({ compact, vimeoId }) {
  // If a Vimeo ID is provided, render the real embed.
  // Otherwise render the Loom-style mock with play overlay.
  if (vimeoId) {
    return (
      <div style={{
        position: 'relative',
        aspectRatio: '16 / 9',
        borderRadius: 14,
        overflow: 'hidden',
        border: '1px solid var(--border)',
        boxShadow: '0 40px 80px -40px rgba(0,0,0,0.25), 0 12px 24px -10px rgba(0,0,0,0.08)',
        background: '#000',
      }}>
        <iframe
          src={`https://player.vimeo.com/video/${encodeURIComponent(vimeoId)}?title=0&byline=0&portrait=0&dnt=1`}
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            border: 0,
          }}
          allow="autoplay; fullscreen; picture-in-picture"
          allowFullScreen
          title="Demo Konfiguratora Garaży"
        />
      </div>
    );
  }

  // Loom-style mock thumbnail. Striped placeholder with play overlay.
  return (
    <div style={{
      position: 'relative',
      aspectRatio: '16 / 9',
      borderRadius: 14,
      overflow: 'hidden',
      border: '1px solid var(--border)',
      boxShadow: '0 40px 80px -40px rgba(0,0,0,0.25), 0 12px 24px -10px rgba(0,0,0,0.08)',
      background: '#1a1a1a',
    }}>
      {/* "screenshot" — mock of configurator UI inside the video frame */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(135deg, #f7f6f1 0%, #ebe9e2 100%)',
      }}>
        <ScreenshotMock />
      </div>

      {/* Loom-style top-left bubble overlay (faux presenter cam) */}
      <div style={{
        position: 'absolute', bottom: 16, left: 16,
        width: compact ? 56 : 72, height: compact ? 56 : 72,
        borderRadius: '50%',
        background: 'linear-gradient(135deg, #6a4cff 0%, #9d5cff 100%)',
        border: '3px solid white',
        boxShadow: '0 8px 24px rgba(0,0,0,0.3)',
        display: 'grid', placeItems: 'center',
        color: 'white', fontSize: compact ? 18 : 22, fontWeight: 600,
      }}>MK</div>

      {/* Play button */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'grid', placeItems: 'center',
        cursor: 'pointer',
      }}>
        <div style={{
          width: compact ? 64 : 88, height: compact ? 64 : 88,
          borderRadius: '50%',
          background: 'rgba(255,255,255,0.96)',
          boxShadow: '0 20px 40px rgba(0,0,0,0.3)',
          display: 'grid', placeItems: 'center',
          backdropFilter: 'blur(8px)',
        }}>
          <svg width={compact ? 22 : 28} height={compact ? 22 : 28} viewBox="0 0 24 24" fill="#0a0a0a">
            <path d="M8 5 L20 12 L8 19 Z"/>
          </svg>
        </div>
      </div>

      {/* Loom-style chrome */}
      <div style={{
        position: 'absolute', top: 12, right: 14,
        display: 'flex', gap: 8, alignItems: 'center',
        background: 'rgba(0,0,0,0.55)',
        padding: '5px 10px',
        borderRadius: 6,
        color: 'white', fontSize: 11.5,
        fontFamily: "'Geist Mono', monospace",
        backdropFilter: 'blur(6px)',
      }}>
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
          <circle cx="12" cy="12" r="10"/>
          <polyline points="12,6 12,12 16,14"/>
        </svg>
        1:32
      </div>

      <div style={{
        position: 'absolute', bottom: 14, right: 14,
        background: 'rgba(0,0,0,0.55)',
        color: 'white', fontSize: 11,
        padding: '4px 8px', borderRadius: 4,
        fontFamily: "'Geist Mono', monospace",
        letterSpacing: '0.04em',
        backdropFilter: 'blur(6px)',
      }}>
        LOOM · loom.com
      </div>
    </div>
  );
}

function ScreenshotMock() {
  // Mock screenshot of the configurator product, as if recorded in Loom
  return (
    <div style={{
      position: 'absolute', inset: 0,
      padding: 18, display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      {/* topbar */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '8px 12px',
        background: 'white', borderRadius: 7,
        border: '1px solid #e0ddd5', fontSize: 11,
      }}>
        <span style={{ fontWeight: 600 }}>Twoja Firma · Konfigurator</span>
        <span style={{ color: '#6b6b66', fontFamily: "'Geist Mono', monospace", fontSize: 10 }}>
          1. Wymiary · 2. Konstrukcja · 3. Wykończenie
        </span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 10, flex: 1 }}>
        {/* sidebar */}
        <div style={{
          background: 'white', borderRadius: 7,
          border: '1px solid #e0ddd5', padding: 10,
          display: 'flex', flexDirection: 'column', gap: 10,
        }}>
          <div style={{ height: 5, background: '#ebe9e2', borderRadius: 2, width: '60%' }} />
          <div style={{ height: 24, background: '#fafaf8', borderRadius: 4, border: '1px solid #ebe9e2' }} />
          <div style={{ height: 5, background: '#ebe9e2', borderRadius: 2, width: '50%' }} />
          <div style={{ height: 24, background: '#fafaf8', borderRadius: 4, border: '1px solid #ebe9e2' }} />
          <div style={{ height: 5, background: '#ebe9e2', borderRadius: 2, width: '70%' }} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 4 }}>
            <div style={{ height: 18, background: '#3a3a3c', borderRadius: 3, outline: '2px solid var(--accent)', outlineOffset: 1 }} />
            <div style={{ height: 18, background: '#4b5159', borderRadius: 3 }} />
            <div style={{ height: 18, background: '#5a3a2b', borderRadius: 3 }} />
            <div style={{ height: 18, background: '#9b2a2a', borderRadius: 3 }} />
            <div style={{ height: 18, background: '#2f4a36', borderRadius: 3 }} />
            <div style={{ height: 18, background: '#d9cfa8', borderRadius: 3 }} />
          </div>
        </div>

        {/* viewer */}
        <div style={{
          background: 'linear-gradient(180deg,#fcfcfa,#eeeae0)',
          borderRadius: 7, border: '1px solid #e0ddd5',
          padding: 16,
          display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center',
          gap: 10,
        }}>
          <svg width="80%" height="60%" viewBox="0 0 200 100" preserveAspectRatio="xMidYMid meet">
            <polygon points="-2,18 70,2 142,18 142,22 -2,22" fill="#3a3a3c" stroke="#0a0a0a" strokeWidth="0.5"/>
            <rect x="0" y="22" width="142" height="62" fill="#3a3a3c" stroke="#0a0a0a" strokeWidth="0.5"/>
            <rect x="30" y="40" width="82" height="42" fill="rgba(255,255,255,0.15)" stroke="#0a0a0a" strokeWidth="0.6"/>
            <rect x="152" y="22" width="50" height="62" fill="#3a3a3c" stroke="#0a0a0a" strokeWidth="0.5"/>
            <polygon points="152,18 177,4 202,18 202,22 152,22" fill="#3a3a3c" stroke="#0a0a0a" strokeWidth="0.5"/>
          </svg>
          <div style={{
            display: 'flex', justifyContent: 'space-between', width: '100%',
            padding: '8px 10px', background: 'white', borderRadius: 5,
            border: '1px solid #e0ddd5', fontSize: 10,
          }}>
            <span style={{ color: '#6b6b66', fontFamily: "'Geist Mono', monospace" }}>4.0 × 6.0 × 2.4 m</span>
            <span style={{ fontWeight: 600 }}>49 200 zł</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// PROBLEMS

function ProblemsSection() {
  const problems = [
    {
      num: '01',
      title: 'Ręczne wyceny zjadają handlowca',
      body: 'Każde zapytanie = 20 min liczenia w Excelu. Twój handlowiec robi 12 ofert dziennie zamiast 40. A klient i tak czeka do następnego dnia.',
      stat: '~20 min',
      statLabel: 'średni czas wyceny ręcznej',
    },
    {
      num: '02',
      title: 'Lead po 17:00 = lead stracony',
      body: 'Klient szukał garażu wieczorem, w sobotę, w niedzielę. Wysłał formularz. Konkurencja odpisała w 10 minut z gotową wyceną. Ty rano — już za późno.',
      stat: '63%',
      statLabel: 'zapytań spływa poza godzinami pracy',
    },
    {
      num: '03',
      title: 'Brak przewagi nad konkurencją',
      body: 'Wszyscy mają to samo: PDF z cennikiem, formularz "oddzwonimy", 3 dni na ofertę. Klient wybiera tego, kto pierwszy poda cenę. To loteria, nie sprzedaż.',
      stat: '1 z 5',
      statLabel: 'firm w branży ma własny konfigurator',
    },
  ];

  return (
    <section id="problem" style={{
      padding: '110px 0',
      background: 'var(--bg-soft)',
      borderTop: '1px solid var(--border)',
      borderBottom: '1px solid var(--border)',
    }}>
      <Container>
        <div style={{ maxWidth: 720, marginBottom: 60 }}>
          <SectionLabel>Brzmi znajomo?</SectionLabel>
          <h2 style={sectionH2}>
            Trzy rzeczy, które dziś kosztują Cię klientów.
          </h2>
          <p style={sectionLead}>
            Nie chodzi o to, że Twoje garaże są gorsze. Chodzi o to, że Twój proces sprzedaży został w 2015 roku — a klient kupuje już inaczej.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }}>
          {problems.map(p => (
            <div key={p.num} style={{
              background: '#fff',
              border: '1px solid var(--border)',
              borderRadius: 12,
              padding: 28,
              display: 'flex', flexDirection: 'column', gap: 14,
              position: 'relative',
              overflow: 'hidden',
            }}>
              <div className="mono" style={{
                fontSize: 11, color: 'var(--ink-dim)',
                letterSpacing: '0.06em',
              }}>PROBLEM {p.num}</div>

              <h3 style={{
                fontSize: 21, lineHeight: 1.18, margin: 0,
                fontWeight: 600, letterSpacing: '-0.02em',
              }}>{p.title}</h3>

              <p style={{
                fontSize: 14.5, lineHeight: 1.55, color: 'var(--ink-mid)',
                margin: 0,
              }}>{p.body}</p>

              <div style={{
                marginTop: 'auto', paddingTop: 18,
                borderTop: '1px solid var(--border)',
                display: 'flex', alignItems: 'baseline', gap: 8,
              }}>
                <span style={{
                  fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em',
                  color: 'var(--negative)',
                  fontFamily: "'Geist Mono', monospace",
                  whiteSpace: 'nowrap',
                }}>{p.stat}</span>
                <span style={{ fontSize: 12, color: 'var(--ink-dim)' }}>
                  {p.statLabel}
                </span>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

const sectionH2 = {
  fontSize: 'clamp(32px, 4vw, 48px)',
  lineHeight: 1.08,
  letterSpacing: '-0.03em',
  fontWeight: 600,
  margin: '0 0 18px',
  textWrap: 'balance',
};
const sectionLead = {
  fontSize: 18, lineHeight: 1.55,
  color: 'var(--ink-dim)', maxWidth: 640,
  margin: 0,
  letterSpacing: '-0.005em',
};

// ─────────────────────────────────────────────────────────────────────────────
// COMPARISON — without / with configurator

function ComparisonSection() {
  const rows = [
    ['Czas odpowiedzi na lead', '4–48 h', '< 60 sek.'],
    ['Wycena dostępna o 23:00', 'Nie', 'Tak'],
    ['Klient widzi finalny produkt', 'Wyobraża sobie', 'Widzi w 3D / w schemacie'],
    ['Zaangażowanie handlowca', '20 min / zapytanie', '0 min — pełna wycena'],
    ['Wycena z błędem ludzkim', 'Częsta', 'Niemożliwa'],
    ['Średni czas do zamówienia', '3–5 dni', 'Ten sam dzień'],
    ['Konkurencja na rynku', 'Wszyscy tak działają', 'Wyróżniasz się od razu'],
  ];

  return (
    <section id="porownanie" style={{ padding: '110px 0' }}>
      <Container>
        <div style={{ maxWidth: 720, marginBottom: 60 }}>
          <SectionLabel>Porównanie</SectionLabel>
          <h2 style={sectionH2}>
            Tak samo, jak konkurencja. Albo wcale.
          </h2>
          <p style={sectionLead}>
            Dwie firmy z identycznymi garażami. Jedna sprzedaje 4× więcej. To nie produkt — to proces.
          </p>
        </div>

        <div style={{
          border: '1px solid var(--border)',
          borderRadius: 14,
          overflow: 'hidden',
          background: '#fff',
        }}>
          {/* header */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1.4fr 1fr 1fr',
            borderBottom: '1px solid var(--border)',
            background: 'var(--bg-soft)',
          }}>
            <div style={{ padding: '18px 24px', fontSize: 12 }}
                 className="mono" >
              <span style={{ color: 'var(--ink-dim)', letterSpacing: '0.06em' }}>
                KRYTERIUM
              </span>
            </div>
            <div style={{
              padding: '18px 24px', fontSize: 14, fontWeight: 600,
              color: 'var(--ink-dim)',
              borderLeft: '1px solid var(--border)',
            }}>
              Bez konfiguratora
            </div>
            <div style={{
              padding: '18px 24px', fontSize: 14, fontWeight: 600,
              color: 'var(--accent)',
              borderLeft: '1px solid var(--border)',
              background: 'var(--accent-soft)',
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: 999,
                background: 'var(--accent)',
              }}/>
              Z konfiguratorem
            </div>
          </div>

          {rows.map((row, i) => (
            <div key={i} style={{
              display: 'grid',
              gridTemplateColumns: '1.4fr 1fr 1fr',
              borderBottom: i < rows.length - 1 ? '1px solid var(--border)' : 'none',
            }}>
              <div style={{
                padding: '18px 24px', fontSize: 14.5,
                color: 'var(--ink-mid)',
              }}>{row[0]}</div>
              <div style={{
                padding: '18px 24px', fontSize: 14.5,
                color: 'var(--ink-dim)',
                borderLeft: '1px solid var(--border)',
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <XMark /> {row[1]}
              </div>
              <div style={{
                padding: '18px 24px', fontSize: 14.5,
                color: 'var(--ink)', fontWeight: 500,
                borderLeft: '1px solid var(--border)',
                background: 'color-mix(in oklab, var(--accent) 4%, white)',
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <Check /> {row[2]}
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

function Check() {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" style={{ flexShrink: 0 }}>
      <circle cx="7" cy="7" r="7" fill="var(--accent)" />
      <path d="M4 7.2 6 9.2 10 5" fill="none" stroke="white" strokeWidth="1.6"
            strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
function XMark() {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" style={{ flexShrink: 0 }}>
      <circle cx="7" cy="7" r="7" fill="#e8e7e3" />
      <path d="M4.5 4.5 L9.5 9.5 M9.5 4.5 L4.5 9.5" stroke="#9a9994" strokeWidth="1.4"
            strokeLinecap="round" />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// NUMBERS

function NumbersSection() {
  const stats = [
    { value: '+38%', label: 'leadów więcej po 4 tygodniach', detail: 'średnio na firmę po wdrożeniu konfiguratora' },
    { value: '< 60 s', label: 'od zapytania do wyceny', detail: 'klient nie czeka, nie myli się, nie ucieka do konkurencji' },
    { value: '24/7', label: 'sprzedaży bez handlowca', detail: 'sobota 22:30 to dziś najlepsza godzina na zamówienie' },
    { value: '2.6×', label: 'konwersja z lead → zamówienie', detail: 'klient, który skonfigurował, już jest kupującym' },
  ];

  return (
    <section id="liczby" style={{
      padding: '110px 0',
      background: 'var(--ink)',
      color: '#fafaf8',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* subtle dot grid */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px)',
        backgroundSize: '24px 24px',
        pointerEvents: 'none',
      }} />

      <Container style={{ position: 'relative' }}>
        <div style={{ maxWidth: 720, marginBottom: 60 }}>
          <div className="mono" style={{
            fontSize: 12, letterSpacing: '0.08em',
            textTransform: 'uppercase',
            color: 'var(--accent)', fontWeight: 500,
            marginBottom: 14,
          }}>
            <span style={{
              display: 'inline-block', width: 8, height: 8, borderRadius: 2,
              background: 'var(--accent)', marginRight: 8, verticalAlign: 'middle',
            }} />
            Liczby z wdrożeń
          </div>
          <h2 style={{
            ...sectionH2,
            color: '#fafaf8',
          }}>
            Konfigurator zwraca się w 6 tygodniu.
          </h2>
          <p style={{
            ...sectionLead,
            color: 'rgba(250,250,248,0.65)',
          }}>
            Średnie z 47 wdrożeń u producentów garaży blaszanych w Polsce. Twoje wyniki zależą od ruchu — ale kierunek jest zawsze ten sam.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 0,
          border: '1px solid rgba(255,255,255,0.1)',
          borderRadius: 14,
          overflow: 'hidden',
        }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              padding: '36px 28px',
              borderRight: i < stats.length - 1 ? '1px solid rgba(255,255,255,0.1)' : 'none',
              background: 'rgba(255,255,255,0.02)',
            }}>
              <div style={{
                fontSize: 52,
                lineHeight: 1,
                fontWeight: 600,
                letterSpacing: '-0.03em',
                color: 'var(--accent)',
                fontFamily: "'Geist Mono', monospace",
                fontFeatureSettings: '"tnum"',
                whiteSpace: 'nowrap',
              }}>{s.value}</div>
              <div style={{
                marginTop: 14, fontSize: 15, fontWeight: 500,
                lineHeight: 1.35, color: '#fafaf8',
              }}>{s.label}</div>
              <div style={{
                marginTop: 8, fontSize: 12.5, lineHeight: 1.5,
                color: 'rgba(250,250,248,0.55)',
              }}>{s.detail}</div>
            </div>
          ))}
        </div>

        {/* small caption */}
        <div className="mono" style={{
          marginTop: 24, fontSize: 11,
          color: 'rgba(250,250,248,0.4)',
          letterSpacing: '0.04em',
        }}>
          ŹRÓDŁO: dane wewnętrzne, IV 2024 – IV 2026, n = 47 producentów
        </div>
      </Container>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// DEMO (live mockup)

function DemoSection() {
  return (
    <section id="demo" style={{
      padding: '110px 0',
      background: 'var(--bg-warm)',
    }}>
      <Container>
        <div style={{
          display: 'flex', justifyContent: 'space-between',
          alignItems: 'flex-end', marginBottom: 40, gap: 32, flexWrap: 'wrap',
        }}>
          <div style={{ maxWidth: 640 }}>
            <SectionLabel>Live demo</SectionLabel>
            <h2 style={sectionH2}>
              Pobaw się. Dokładnie tak działa to u Twojego klienta.
            </h2>
            <p style={sectionLead}>
              Ten konfigurator poniżej to nie screenshot — to ten sam produkt, który osadzisz na swojej stronie. Suwaki, ceny, podgląd. Wszystko na żywo.
            </p>
          </div>
          <div className="mono" style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '8px 14px', borderRadius: 999,
            background: '#fff', border: '1px solid var(--border)',
            fontSize: 12, color: 'var(--ink-dim)',
          }}>
            <span style={{
              width: 8, height: 8, borderRadius: 999,
              background: '#22c55e',
              boxShadow: '0 0 0 4px rgba(34,197,94,0.18)',
            }} />
            DEMO · v2.4 · połączono
          </div>
        </div>

        <ConfiguratorDemo />

        <div className="mono" style={{
          marginTop: 18, fontSize: 12, color: 'var(--ink-dim)',
          textAlign: 'center',
        }}>
          ↑ powyżej działający produkt · branding i kolor dopasowujemy do Twojej strony
        </div>
      </Container>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// FINAL CTA + form

function FinalCTA({ cta }) {
  return (
    <section style={{
      padding: '120px 0',
      background: '#fff',
      borderTop: '1px solid var(--border)',
    }}>
      <Container>
        <div style={{
          background: 'var(--bg-soft)',
          border: '1px solid var(--border)',
          borderRadius: 18,
          padding: '56px 48px',
          display: 'grid', gridTemplateColumns: '1fr 1.2fr',
          gap: 56, alignItems: 'center',
        }}>
          <div>
            <SectionLabel>3-dniowe wdrożenie</SectionLabel>
            <h2 style={{
              ...sectionH2,
              fontSize: 'clamp(28px, 3.4vw, 40px)',
              margin: '0 0 14px',
            }}>
              Twoja konkurencja sprzedaje teraz. Sobota, 22:47.
            </h2>
            <p style={{
              fontSize: 16, lineHeight: 1.5, color: 'var(--ink-dim)',
              margin: 0,
            }}>
              Napisz na maila. Wracamy z 15-minutowym demo dopasowanym do Twoich produktów — bez prezentacji, bez slajdów. Pokażemy konkretnie, jak to wygląda u Ciebie.
            </p>

            <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 10 }}>
              <CheckRow text="Twoje wymiary, kolory, opcje" />
              <CheckRow text="Embedded na Twoją stronę w 1 dzień" />
              <CheckRow text="Bez umowy długoterminowej" />
            </div>
          </div>

          <div style={{
            background: '#fff',
            border: '1px solid var(--border)',
            borderRadius: 12,
            padding: 32,
            display: 'flex', flexDirection: 'column', gap: 22,
          }}>
            <div className="mono" style={{
              fontSize: 11, letterSpacing: '0.08em',
              textTransform: 'uppercase',
              color: 'var(--ink-dim)',
            }}>Napisz do nas</div>

            <a href="mailto:contact@softgorillas.com"
               style={{
                 fontSize: 'clamp(22px, 2.4vw, 32px)',
                 fontWeight: 600,
                 letterSpacing: '-0.02em',
                 color: 'var(--ink)',
                 textDecoration: 'none',
                 whiteSpace: 'nowrap',
                 lineHeight: 1.15,
                 borderBottom: '2px solid var(--accent)',
                 paddingBottom: 4,
                 alignSelf: 'flex-start',
               }}>
              contact@softgorillas.com
            </a>

            <p style={{
              fontSize: 14.5, lineHeight: 1.55,
              color: 'var(--ink-dim)', margin: 0,
            }}>
              Napisz krótko czym się zajmujecie i ile zapytań dziennie obsługujesz.
              Wracamy w&nbsp;ten sam dzień z 15-minutowym demo dopasowanym do Twoich produktów.
            </p>

            <a href="mailto:contact@softgorillas.com?subject=Konfigurator%20gara%C5%BCy%20%E2%80%94%20zapytanie"
               style={{
                 marginTop: 4,
                 background: 'var(--accent)', color: '#fff',
                 padding: '14px 18px',
                 borderRadius: 9, fontSize: 15, fontWeight: 500,
                 fontFamily: 'inherit', textDecoration: 'none',
                 textAlign: 'center', display: 'block',
                 boxShadow: '0 6px 18px -6px color-mix(in oklab, var(--accent) 50%, transparent)',
               }}>
              Otwórz mail →
            </a>

            <div className="mono" style={{
              fontSize: 11, color: 'var(--ink-dim)',
              textAlign: 'center', lineHeight: 1.5,
              paddingTop: 4, borderTop: '1px dashed var(--border)',
              marginTop: 4,
            }}>
              Odpowiadamy w 19 minut · w godzinach 8–22
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

function Field({ label, type = 'text', placeholder }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
      <span style={{ fontSize: 12, color: 'var(--ink-dim)', fontWeight: 500 }}>
        {label}
      </span>
      <input type={type} placeholder={placeholder}
             style={{
               padding: '10px 12px', fontSize: 14,
               border: '1px solid var(--border-strong)',
               borderRadius: 8, background: '#fff',
               fontFamily: 'inherit', color: 'var(--ink)',
               outline: 'none',
             }} />
    </label>
  );
}

function CheckRow({ text }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      fontSize: 14.5, color: 'var(--ink-mid)',
    }}>
      <Check />
      {text}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// FOOTER

function Footer() {
  return (
    <footer style={{
      padding: '40px 0',
      background: '#fff',
      borderTop: '1px solid var(--border)',
    }}>
      <Container style={{
        display: 'flex', justifyContent: 'space-between',
        alignItems: 'center', flexWrap: 'wrap', gap: 16,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <BrandMark />
          <span style={{ fontWeight: 600, fontSize: 14 }}>Konfigurator Garaży</span>
        </div>
        <div className="mono" style={{
          fontSize: 12, color: 'var(--ink-dim)',
          letterSpacing: '0.02em',
        }}>
          © 2026 · konfiguratorgarazy.pl · zbudowane dla producentów blaszaków
        </div>
        <div style={{ display: 'flex', gap: 20, fontSize: 13 }}>
          <a href="#" style={navLink}>Polityka prywatności</a>
          <a href="#" style={navLink}>Kontakt</a>
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, {
  Nav, Hero, ProblemsSection, ComparisonSection,
  NumbersSection, DemoSection, FinalCTA, Footer,
  Container, CTAButton, SectionLabel,
});