// Sections of the osiguraj.to landing page.
// Visual language follows LAQO Hrvatska: mint #00E78A on navy #001A4C, rounded white cards, pill buttons, underlined accent words.

const {
  Diamond, HandPhone, Cone, House, Plane, CarEuro, Confetti,
  Camera, Chip, ShieldInfinity, VoiceWave, Vault, ClaimsCar, Chat,
} = window.Illustrations;

// ——— Small primitives ———

const Pill = ({ children, variant = 'primary', as: As = 'button', ...rest }) => {
  const styles = {
    primary: { background: 'var(--navy)', color: 'white' },
    ghost:   { background: 'transparent', color: 'var(--navy)', border: '1.5px solid var(--navy)' },
    mint:    { background: 'var(--mint)', color: 'var(--navy)' },
    white:   { background: 'white', color: 'var(--navy)' },
  }[variant];
  return (
    <As
      style={{
        ...styles,
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '14px 26px', borderRadius: 999, border: 'none',
        fontFamily: 'inherit', fontSize: 16, fontWeight: 600, cursor: 'pointer',
        transition: 'transform .15s ease, filter .15s ease',
        whiteSpace: 'nowrap',
      }}
      onMouseEnter={e => e.currentTarget.style.filter = 'brightness(1.06)'}
      onMouseLeave={e => e.currentTarget.style.filter = 'brightness(1)'}
      {...rest}
    >
      {children}
    </As>
  );
};

const Check = ({ size = 24 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true" style={{ flexShrink: 0 }}>
    <circle cx="12" cy="12" r="12" fill="var(--mint)" />
    <path d="M6.5 12.5l3.5 3.5 8-8" stroke="var(--navy)" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const Underline = ({ children, color }) => (
  <span style={{
    background: `linear-gradient(transparent 65%, ${color || 'var(--mint)'} 65%, ${color || 'var(--mint)'} 92%, transparent 92%)`,
    padding: '0 2px',
  }}>{children}</span>
);

// ——— Nav ———

const Nav = () => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // close menu on resize to desktop
  React.useEffect(() => {
    if (!menuOpen) return;
    const onResize = () => { if (window.innerWidth > 768) setMenuOpen(false); };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, [menuOpen]);

  const navBg = scrolled
    ? 'rgba(255,255,255,0.82)'
    : 'rgba(255,255,255,0.0)';
  const navBorder = scrolled
    ? '1px solid rgba(0,26,76,0.08)'
    : '1px solid transparent';

  return (
    <>
      <style>{`
        .nav-links { display: flex; align-items: center; gap: 32px; }
        .nav-hamburger { display: none; }
        .nav-mobile-menu {
          display: none;
          flex-direction: column;
          gap: 0;
          padding: 8px 0 16px;
        }
        .nav-mobile-menu.open { display: flex; }
        @media (max-width: 768px) {
          .nav-links { display: none !important; }
          .nav-hamburger { display: flex; }
        }
      `}</style>
      <header style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
        background: navBg,
        backdropFilter: scrolled ? 'blur(16px) saturate(180%)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(16px) saturate(180%)' : 'none',
        borderBottom: navBorder,
        transition: 'background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease',
      }}>
        <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 0' }}>
          <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 0, textDecoration: 'none', color: 'var(--navy)' }}>
            <span style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-0.02em' }}>osiguraj</span>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--mint)', display: 'inline-block', margin: '0 2px 4px 2px' }} />
            <span style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-0.02em' }}>to</span>
          </a>

          {/* Desktop links */}
          <nav className="nav-links">
            <a href="#proizvodi" style={navLink}>Osiguranja</a>
            <a href="#kako" style={navLink}>Kako radi</a>
            <a href="#stete" style={navLink}>Štete</a>
            <a href="#za-partnere" style={navLink}>Za partnere</a>
            <span style={{ width: 1, height: 22, background: 'rgba(0,26,76,0.15)' }} />
            <a href="#prijava" style={{ ...navLink, fontWeight: 600 }}>Prijavi se</a>
            <Pill variant="primary">Pošalji sliku</Pill>
          </nav>

          {/* Hamburger button */}
          <button
            className="nav-hamburger"
            onClick={() => setMenuOpen(o => !o)}
            aria-label={menuOpen ? 'Zatvori izbornik' : 'Otvori izbornik'}
            style={{
              background: 'none', border: 'none', cursor: 'pointer',
              padding: 8, color: 'var(--navy)', display: 'flex', flexDirection: 'column',
              gap: 5, alignItems: 'center', justifyContent: 'center',
            }}
          >
            <span style={{
              display: 'block', width: 24, height: 2, background: 'var(--navy)',
              borderRadius: 2,
              transform: menuOpen ? 'translateY(7px) rotate(45deg)' : 'none',
              transition: 'transform 0.22s ease',
            }} />
            <span style={{
              display: 'block', width: 24, height: 2, background: 'var(--navy)',
              borderRadius: 2, opacity: menuOpen ? 0 : 1,
              transition: 'opacity 0.15s ease',
            }} />
            <span style={{
              display: 'block', width: 24, height: 2, background: 'var(--navy)',
              borderRadius: 2,
              transform: menuOpen ? 'translateY(-7px) rotate(-45deg)' : 'none',
              transition: 'transform 0.22s ease',
            }} />
          </button>
        </div>

        {/* Mobile dropdown */}
        <div className={`nav-mobile-menu${menuOpen ? ' open' : ''}`} style={{
          background: 'rgba(255,255,255,0.96)',
          backdropFilter: 'blur(16px)',
          borderTop: '1px solid rgba(0,26,76,0.07)',
        }}>
          {[
            ['#proizvodi', 'Osiguranja'],
            ['#kako',      'Kako radi'],
            ['#stete',     'Štete'],
            ['#za-partnere', 'Za partnere'],
            ['#prijava',   'Prijavi se'],
          ].map(([href, label]) => (
            <a
              key={href} href={href}
              onClick={() => setMenuOpen(false)}
              style={{
                display: 'block', padding: '14px 32px',
                color: 'var(--navy)', textDecoration: 'none',
                fontSize: 17, fontWeight: 500,
                borderBottom: '1px solid rgba(0,26,76,0.05)',
              }}
            >{label}</a>
          ))}
          <div style={{ padding: '16px 32px' }}>
            <Pill variant="primary" style={{ width: '100%', justifyContent: 'center' }}>Pošalji sliku</Pill>
          </div>
        </div>
      </header>
      {/* Spacer so hero isn't hidden under fixed nav */}
      <div style={{ height: 64 }} />
    </>
  );
};
const navLink = { color: 'var(--navy)', textDecoration: 'none', fontSize: 15, fontWeight: 500 };

// ——— Hero ———

const Hero = () => (
  <section id="top" style={{
    background: 'var(--mint)',
    paddingTop: 80, paddingBottom: 120,
    position: 'relative', overflow: 'hidden',
  }}>
    <div className="container" style={{
      display: 'grid', gridTemplateColumns: '1.05fr 0.95fr',
      gap: 60, alignItems: 'center',
    }}>
      <div>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          background: 'rgba(0,26,76,0.08)', color: 'var(--navy)',
          padding: '8px 16px', borderRadius: 999,
          fontSize: 14, fontWeight: 600, marginBottom: 28,
        }}>
          <span style={{ width: 7, height: 7, borderRadius: 999, background: 'var(--navy)' }} />
          Tvoj digitalni insurance concierge
        </span>
        <h1 style={{
          fontSize: 'clamp(48px, 5.4vw, 78px)',
          fontWeight: 800, lineHeight: 1.02, letterSpacing: '-0.025em',
          color: 'var(--navy)', margin: 0, textWrap: 'balance',
        }}>
          Ne <Underline color="white">tipkaš.</Underline><br />
          Pošalješ <Underline color="white">sliku.</Underline>
        </h1>
        <p style={{
          fontSize: 22, lineHeight: 1.45, color: 'var(--navy)',
          opacity: 0.85, maxWidth: 540, marginTop: 28,
        }}>
          Slikaj prometnu, staru policu ili tablicu —{' '}
          AI očita podatke, pita samo ono što fali i u nekoliko sekundi predloži{' '}
          <b>tri najbolje ponude</b> iz tržišta. Bez 60 polja formulara.
        </p>
        <div style={{ display: 'flex', gap: 14, marginTop: 36, flexWrap: 'wrap' }}>
          <Pill variant="primary">Probaj sada — slikaj prometnu</Pill>
          <Pill variant="ghost">Pogledaj kako radi</Pill>
        </div>
        <div style={{ display: 'flex', gap: 28, marginTop: 40, color: 'var(--navy)', flexWrap: 'wrap' }}>
          <div>
            <div style={{ fontSize: 32, fontWeight: 800, letterSpacing: '-0.02em' }}>58 sek</div>
            <div style={{ fontSize: 14, opacity: 0.7 }}>najbrža kupnja police</div>
          </div>
          <div style={{ width: 1, background: 'rgba(0,26,76,0.2)' }} />
          <div>
            <div style={{ fontSize: 32, fontWeight: 800, letterSpacing: '-0.02em' }}>17 h</div>
            <div style={{ fontSize: 14, opacity: 0.7 }}>najbrža isplata štete</div>
          </div>
          <div style={{ width: 1, background: 'rgba(0,26,76,0.2)' }} />
          <div>
            <div style={{ fontSize: 32, fontWeight: 800, letterSpacing: '-0.02em' }}>0 €</div>
            <div style={{ fontSize: 14, opacity: 0.7 }}>provizija za kupca</div>
          </div>
        </div>
      </div>
      <div style={{ position: 'relative', display: 'grid', placeItems: 'center', minHeight: 480 }}>
        <HandPhone counter="52" width={420} />
        {/* floating callouts */}
        <div style={{
          position: 'absolute', top: 24, left: 0, maxWidth: 200,
          background: 'var(--navy)', color: 'white',
          padding: '14px 16px', borderRadius: 14, fontSize: 14, lineHeight: 1.4,
          boxShadow: '0 12px 32px rgba(0,26,76,0.22)',
        }}>
          <b>OCR:</b> Škoda Octavia, 85 kW, ističe 04/02/2026
        </div>
        <div style={{
          position: 'absolute', bottom: 40, right: -10, maxWidth: 220,
          background: 'white', color: 'var(--navy)',
          padding: '14px 16px', borderRadius: 14, fontSize: 14, lineHeight: 1.4,
          boxShadow: '0 12px 32px rgba(0,26,76,0.18)',
          border: '1.5px solid rgba(0,26,76,0.08)',
        }}>
          ✦ <b>3 ponude</b> spremne. Najpovoljnija već skenirana.
        </div>
      </div>
    </div>
  </section>
);

// ——— Product cards (mirrors LAQO "Odaberi svoje osiguranje") ———

const ProductCard = ({ icon, title, lines, primaryCta = 'Provjeri cijenu', secondaryCta = 'Saznaj više' }) => (
  <div style={{
    background: 'white', borderRadius: 28, padding: '40px 40px 32px',
    boxShadow: '0 4px 24px rgba(0,26,76,0.06)',
    border: '1px solid rgba(0,26,76,0.06)',
    display: 'flex', flexDirection: 'column', gap: 24,
    position: 'relative', overflow: 'hidden',
  }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 20 }}>
      <h3 style={{
        fontSize: 30, fontWeight: 800, color: 'var(--navy)',
        letterSpacing: '-0.02em', lineHeight: 1.08, margin: 0, maxWidth: 220,
      }}>{title}</h3>
      <div style={{ position: 'relative', width: 170, height: 150, flexShrink: 0 }}>
        <Diamond size={130} />
        <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', zIndex: 1 }}>
          {icon}
        </div>
      </div>
    </div>
    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
      {lines.map((l, i) => (
        <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 16, color: 'var(--navy)' }}>
          <Check />
          <span>{l}</span>
        </li>
      ))}
    </ul>
    <div style={{ display: 'flex', gap: 12, marginTop: 8 }}>
      <Pill variant="primary">{primaryCta}</Pill>
      <Pill variant="ghost">{secondaryCta}</Pill>
    </div>
  </div>
);

const Products = () => (
  <section id="proizvodi" style={{ background: 'var(--mint)', padding: '110px 0 130px' }}>
    <div className="container">
      <h2 style={sectionTitle}>
        Odaberi svoje <span style={{ display: 'inline-block' }}>osiguranje</span>
      </h2>
      <p style={{ ...sectionSub, color: 'var(--navy)', opacity: 0.8 }}>
        Auto, dom, putovanje — sve kreće od jedne slike. Bez formulara.
      </p>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        gap: 28, marginTop: 56,
      }}>
        <ProductCard
          title={<>Osiguranje<br/>vozila</>}
          icon={<Cone size={140} />}
          lines={[
            <><b>50% bonusa</b> za prvo ugovaranje</>,
            <><b>20% popusta</b> na Kasko uz Obvezno</>,
            <><b>AI Trijaža štete</b> — prijava u trenutku</>,
          ]}
        />
        <ProductCard
          title={<>Osiguranje<br/>imovine</>}
          icon={<House size={130} />}
          lines={[
            <><b>Mjesečno ili godišnje</b> plaćanje</>,
            <><b>Moj Majstor</b> hitne intervencije 24/7</>,
            <><b>LAQOsfera</b> program vjernosti</>,
          ]}
        />
        <ProductCard
          title={<>Putno<br/>osiguranje</>}
          icon={<Plane size={130} />}
          lines={[
            <><b>Trenutno</b> izdavanje preko WhatsAppa</>,
            <><b>Asistencija</b> u 196 zemalja</>,
            <><b>Pravna pomoć</b> i Document Vault</>,
          ]}
        />
      </div>
    </div>
  </section>
);

// ——— How it works (3 steps from PDF: Ne tipkaš → AI analizira → Doživotna vrijednost) ———

const HowStep = ({ n, icon, title, body }) => (
  <div style={{
    background: 'white', borderRadius: 24, padding: 36,
    border: '1px solid rgba(0,26,76,0.08)',
    boxShadow: '0 2px 16px rgba(0,26,76,0.04)',
    display: 'flex', flexDirection: 'column', gap: 18, position: 'relative',
  }}>
    <span style={{
      position: 'absolute', top: 24, right: 28,
      fontSize: 56, fontWeight: 800, color: 'var(--mint)',
      lineHeight: 1, letterSpacing: '-0.04em',
    }}>0{n}</span>
    <div style={{ height: 130 }}>{icon}</div>
    <h3 style={{ fontSize: 26, fontWeight: 800, color: 'var(--navy)', letterSpacing: '-0.02em', margin: 0 }}>
      {title}
    </h3>
    <p style={{ fontSize: 16, lineHeight: 1.5, color: 'var(--navy)', opacity: 0.75, margin: 0 }}>
      {body}
    </p>
  </div>
);

const HowItWorks = () => (
  <section id="kako" style={{ background: 'white', padding: '120px 0' }}>
    <div className="container">
      <div style={{ maxWidth: 780, marginBottom: 56 }}>
        <span style={kicker}>Kako radi</span>
        <h2 style={{ ...sectionTitle, textAlign: 'left' }}>
          Najbrži put od potrebe <Underline>do police.</Underline>
        </h2>
        <p style={{ ...sectionSub, textAlign: 'left' }}>
          Ovo nije <i>“još jedan kalkulator”</i>. Cjenovni rat gubi vrijednost, a komparatori postaju zamjenjivi.
          osiguraj.to je <b>digitalni concierge</b> — vodi te od potrebe, kroz pametno bodovanje, sve do isplate štete.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        <HowStep
          n={1}
          icon={<Camera size={130} />}
          title="Ne tipkaš. Pošalješ sliku."
          body="Tablica, stara polica ili prometna dozvola — AI izdvaja VIN, marku, snagu i datum isteka. 60 polja formulara → 1 fotografija."
        />
        <HowStep
          n={2}
          icon={<Chip size={130} />}
          title="AI analizira i pita samo bitno."
          body="Adaptivni chat preskače pitanja na koja je već odgovoreno. „Pročitao sam: Škoda Octavia, 85 kW. Potvrdi?“"
        />
        <HowStep
          n={3}
          icon={<ShieldInfinity size={130} />}
          title="Doživotna vrijednost."
          body="Nakon kupnje smo tu — Document Vault, obnova bez trenja, AI Trijaža kod štete i vođeno snimanje oštećenja."
        />
      </div>
    </div>
  </section>
);

// ——— Big speed callout (mirrors second LAQO screenshot) ———

const SpeedCallout = () => (
  <section style={{ background: 'white', paddingBottom: 80 }}>
    <style>{`
      .speed-grid {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 40px;
        padding-top: 40px;
        padding-bottom: 40px;
      }
      .speed-left { display: flex; justify-content: flex-end; }
      .speed-phone { display: grid; place-items: center; order: 0; }
      .speed-right { display: flex; justify-content: flex-start; }
      @media (max-width: 680px) {
        .speed-grid {
          grid-template-columns: 1fr !important;
          gap: 20px;
          padding-top: 32px;
          padding-bottom: 32px;
        }
        .speed-phone { order: -1; }
        .speed-left { justify-content: center; }
        .speed-right { justify-content: center; }
      }
    `}</style>
    <div className="container speed-grid">
      <div className="speed-left">
        <div style={{
          background: 'var(--mint)', color: 'var(--navy)',
          padding: '18px 22px', borderRadius: 16,
          fontSize: 16, lineHeight: 1.4, maxWidth: 260, fontWeight: 500,
        }}>
          Najbrža zabilježena kupnja dovršena je za samo <b>58 sekundi.</b>
        </div>
      </div>
      <div className="speed-phone">
        <HandPhone counter="58" width={280} />
      </div>
      <div className="speed-right">
        <div style={{
          color: 'var(--navy)', padding: '18px 22px', maxWidth: 280,
          fontSize: 16, lineHeight: 1.5,
        }}>
          Najbrža isplata <Underline>dogodila se</Underline> već <b>17 sati nakon prijave</b> štete.
        </div>
      </div>
    </div>
  </section>
);

// ——— Komparator vs Concierge (from PDF p3) ———

const ComparatorVsConcierge = () => {
  const rows = [
    ['Ulaz podataka',  'Ručni unos (60+ polja formulara)',          'Slika + glas + adaptivni AI chat'],
    ['Logika preporuke','Rangiranje isključivo po najnižoj cijeni','AI „Best-Fit“ — 3 najrelevantnije ponude'],
    ['Kvaliteta prihoda','Jednokratni lead-generation',             'Ponovljivi prihod, obnove i cross-sell'],
    ['Post-Sale i Štete','Ne postoji — odnos završava prodajom',    'Integrirana prijava štete, pravna pomoć, Document Vault'],
  ];
  return (
    <section style={{ background: 'var(--cream)', padding: '110px 0' }}>
      <div className="container">
        <span style={kicker}>Zašto smo drugačiji</span>
        <h2 style={sectionTitle}>Komparator <span style={{ opacity: 0.4 }}>vs.</span> Concierge</h2>
        <p style={sectionSub}>Stari model rangira po cijeni. Mi vlasništvo prebacujemo s prve police na <b>doživotni odnos s klijentom.</b></p>

        <div style={{
          marginTop: 56, display: 'grid', gridTemplateColumns: '180px 1fr 1fr', gap: 0,
          borderRadius: 28, overflow: 'hidden',
          boxShadow: '0 10px 40px rgba(0,26,76,0.08)',
        }}>
          <div />
          <div style={{ background: 'rgba(0,26,76,0.06)', padding: '20px 28px', color: 'var(--navy)', fontSize: 15, fontWeight: 700 }}>
            Komparator <span style={{ opacity: 0.6, fontWeight: 500 }}>(stari model)</span>
          </div>
          <div style={{ background: 'var(--navy)', padding: '20px 28px', color: 'white', fontSize: 15, fontWeight: 700 }}>
            osiguraj.to <span style={{ color: 'var(--mint)', fontWeight: 600 }}>(novi standard)</span>
          </div>
          {rows.map(([label, a, b], i) => (
            <React.Fragment key={i}>
              <div style={{ background: 'white', padding: '22px 28px', fontWeight: 700, color: 'var(--navy)', fontSize: 15, borderTop: '1px solid rgba(0,26,76,0.06)' }}>
                {label}
              </div>
              <div style={{ background: 'white', padding: '22px 28px', color: 'var(--navy)', opacity: 0.75, fontSize: 15, borderTop: '1px solid rgba(0,26,76,0.06)' }}>
                {a}
              </div>
              <div style={{ background: 'var(--navy)', padding: '22px 28px', color: 'white', fontSize: 15, borderTop: '1px solid rgba(255,255,255,0.08)', display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                <Check size={20} />
                <span>{b}</span>
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
};

// ——— Best-fit algorithm radar ———

const BestFitRadar = () => {
  const axes = [
    { label: 'Cijena', pct: 40, angle: -90 },
    { label: 'Pokriće i izuzeća', pct: 25, angle: -18 },
    { label: 'Uvjeti štete i servis', pct: 15, angle: 54 },
    { label: 'Način plaćanja', pct: 10, angle: 126 },
    { label: 'Dodatne pogodnosti', pct: 10, angle: 198 },
  ];
  const cx = 200, cy = 200, R = 160;
  const pt = (angle, r) => {
    const a = angle * Math.PI / 180;
    return [cx + Math.cos(a) * r, cy + Math.sin(a) * r];
  };
  const innerPoly = axes.map(ax => pt(ax.angle, (ax.pct / 40) * R * 0.95).join(',')).join(' ');
  const outerPoly = axes.map(ax => pt(ax.angle, R).join(',')).join(' ');

  return (
    <section style={{ background: 'white', padding: '120px 0' }}>
      <div className="container">
        <span style={kicker}>Best-Fit algoritam</span>
        <h2 style={sectionTitle}>Inteligentno <Underline>bodovanje</Underline> ponuda</h2>
        <p style={sectionSub}>
          Nije sve u cijeni. Naš algoritam svaku ponudu vrednuje kroz pet dimenzija, a tebi predlaže <b>tri najrelevantnije.</b>
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 60, marginTop: 64, alignItems: 'center' }}>
          <div style={{ position: 'relative', display: 'grid', placeItems: 'center' }}>
            <svg viewBox="0 0 400 400" width="100%" style={{ maxWidth: 480 }}>
              {/* concentric polygons */}
              {[0.25, 0.5, 0.75, 1].map((s, i) => (
                <polygon key={i}
                  points={axes.map(ax => pt(ax.angle, R * s).join(',')).join(' ')}
                  fill="none" stroke="rgba(0,26,76,0.18)" strokeWidth="1.2"
                />
              ))}
              {/* spokes */}
              {axes.map((ax, i) => {
                const [x, y] = pt(ax.angle, R);
                return <line key={i} x1={cx} y1={cy} x2={x} y2={y} stroke="rgba(0,26,76,0.18)" strokeWidth="1.2" />;
              })}
              {/* data polygon */}
              <polygon points={innerPoly} fill="var(--mint)" fillOpacity="0.55" stroke="var(--navy)" strokeWidth="2.5" />
              {axes.map((ax, i) => {
                const [x, y] = pt(ax.angle, (ax.pct / 40) * R * 0.95);
                return <circle key={i} cx={x} cy={y} r="6" fill="var(--navy)" />;
              })}
              {/* labels */}
              {axes.map((ax, i) => {
                const [x, y] = pt(ax.angle, R + 28);
                return (
                  <g key={i}>
                    <text x={x} y={y - 8} textAnchor="middle" fontSize="22" fontWeight="800" fill="var(--navy)" fontFamily="inherit">
                      {ax.pct}%
                    </text>
                    <text x={x} y={y + 14} textAnchor="middle" fontSize="13" fill="var(--navy)" opacity="0.7" fontFamily="inherit">
                      {ax.label}
                    </text>
                  </g>
                );
              })}
            </svg>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <ProfileCard
              title="Basic"
              body="Zakonski minimum uz fokus na najnižu cijenu."
            />
            <ProfileCard
              title="Balanced"
              tag="Best value"
              highlight
              body="Optimalni omjer cijene, pokrića i zaštite stakala / asistencije."
            />
            <ProfileCard
              title="Max Protect"
              body="Sveobuhvatno Kasko pokriće i premium asistencija bez kompromisa."
            />
          </div>
        </div>
      </div>
    </section>
  );
};

const ProfileCard = ({ title, body, tag, highlight }) => (
  <div style={{
    background: highlight ? 'var(--navy)' : 'white',
    color: highlight ? 'white' : 'var(--navy)',
    border: highlight ? 'none' : '1px solid rgba(0,26,76,0.12)',
    borderRadius: 20, padding: '24px 26px',
    display: 'flex', gap: 18, alignItems: 'center',
    boxShadow: highlight ? '0 10px 30px rgba(0,26,76,0.18)' : 'none',
  }}>
    <div style={{
      width: 12, height: 60, borderRadius: 6,
      background: highlight ? 'var(--mint)' : 'rgba(0,26,76,0.1)',
    }} />
    <div style={{ flex: 1 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
        <h3 style={{ fontSize: 22, fontWeight: 800, margin: 0, letterSpacing: '-0.02em' }}>{title}</h3>
        {tag && (
          <span style={{
            fontSize: 11, fontWeight: 700, letterSpacing: '0.06em',
            background: 'var(--mint)', color: 'var(--navy)',
            padding: '4px 10px', borderRadius: 999, textTransform: 'uppercase',
          }}>{tag}</span>
        )}
      </div>
      <p style={{ margin: '6px 0 0', fontSize: 15, lineHeight: 1.45, opacity: highlight ? 0.85 : 0.7 }}>
        {body}
      </p>
    </div>
  </div>
);

// ——— Features grid (LaqoPrevent-style) ———

const FeatureCard = ({ icon, title, body }) => (
  <div style={{
    background: 'white', borderRadius: 24, padding: '36px 32px',
    border: '1px solid rgba(0,26,76,0.08)',
    display: 'flex', flexDirection: 'column', gap: 18,
  }}>
    <div style={{
      width: 130, height: 130,
      background: 'rgba(0,231,138,0.18)', borderRadius: '50%',
      display: 'grid', placeItems: 'center', marginBottom: 4,
    }}>{icon}</div>
    <h3 style={{ fontSize: 24, fontWeight: 800, color: 'var(--navy)', letterSpacing: '-0.02em', margin: 0, lineHeight: 1.15 }}>{title}</h3>
    <p style={{ fontSize: 15, lineHeight: 1.5, color: 'var(--navy)', opacity: 0.7, margin: 0 }}>{body}</p>
    <a href="#" style={{ marginTop: 4, color: 'var(--navy)', fontWeight: 600, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
      Saznaj više
      <span style={{ display: 'inline-block', width: 18, height: 2, background: 'var(--mint)', verticalAlign: 'middle' }} />
      <span>›</span>
    </a>
  </div>
);

const Features = () => (
  <section style={{ background: 'var(--cream)', padding: '110px 0' }}>
    <div className="container">
      <span style={kicker}>Više od police</span>
      <h2 style={sectionTitle}>Vrijednost koja se <Underline>nastavlja.</Underline></h2>
      <p style={sectionSub}>Nakon kupnje smo tek krenuli. Štete, obnove, pravna pomoć — sve unutar jednog razgovora.</p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22, marginTop: 56 }}>
        <FeatureCard
          icon={<CarEuro size={120} />}
          title={<>Manje voziš, <Underline>manje plaćaš</Underline></>}
          body="Ako nakon ugovaranja pređeš manje od 10 000 km, sljedeće godine ostvaruješ do 10% popusta pri obnovi."
        />
        <FeatureCard
          icon={<Confetti size={130} />}
          title={<>Vozi sigurno i osvajaj <Underline>nagrade</Underline></>}
          body="Uključi se u LaqoPrevent program prevencije — odgovorne vozače nagrađujemo vrijednim nagradama."
        />
        <FeatureCard
          icon={<Vault size={120} />}
          title={<>Document <Underline>Vault</Underline></>}
          body="Sve police, računi, štete i prometne dozvole na jednom mjestu. Šifrirano i tvoje — za uvijek."
        />
        <FeatureCard
          icon={<VoiceWave size={130} />}
          title={<>Voice AI <Underline>asistent</Underline></>}
          body="FNOL — prijava štete u trenutku šoka, glasovno. Bez tipkanja, bez čekanja na poziv."
        />
      </div>
    </div>
  </section>
);

// ——— Claims anatomy (PDF p8) ———

const Claims = () => (
  <section id="stete" style={{ background: 'var(--navy)', color: 'white', padding: '120px 0' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 80, alignItems: 'flex-start' }}>
        <div>
          <span style={{ ...kicker, color: 'var(--mint)' }}>Štete na novi način</span>
          <h2 style={{
            fontSize: 'clamp(40px, 4.4vw, 60px)', fontWeight: 800,
            letterSpacing: '-0.025em', lineHeight: 1.05, margin: '12px 0 24px',
            color: 'white',
          }}>
            Prijaviš <Underline color="var(--mint)">u 5 koraka.</Underline><br />
            Bez obrazaca i čekanja.
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.5, opacity: 0.8, maxWidth: 460, marginBottom: 40 }}>
            AI prepoznaje tip nesreće, navodi te kroz vođeno snimanje šteta i u realnom vremenu korigira fotografije. Rezultat: brža isplata.
          </p>
          <div style={{
            background: 'rgba(255,255,255,0.06)', borderRadius: 24, padding: 32,
            border: '1px solid rgba(255,255,255,0.1)', maxWidth: 460,
          }}>
            <ClaimsCar size={200} />
            <div style={{ marginTop: 16, fontSize: 13, opacity: 0.7, fontFamily: 'monospace' }}>
              AI ANALYSIS · SEVERITY LEVEL 3<br />
              DAMAGE: DENT / SCRATCH · 25cm × 15cm
            </div>
          </div>
        </div>
        <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 18 }}>
          {[
            ['Incident Intake', 'AI prepoznaje tip nesreće kroz chat ili glas.'],
            ['AI Trijaža', 'Hitna provjera: Ozlijeđeni? Pokretno? Policija?'],
            ['Vođeno snimanje', 'AI diktira kutove fotografiranja — „fotografiraj lijevi bok.“'],
            ['Quality Control', 'U stvarnom vremenu: „Slika je mutna, odmakni se 2 m.“'],
            ['Smart Routing', 'Automatsko usmjeravanje prema servisu, brokeru ili osiguratelju.'],
          ].map(([t, b], i) => (
            <li key={i} style={{
              display: 'flex', gap: 22, alignItems: 'flex-start',
              padding: '20px 24px', borderRadius: 16,
              background: i === 2 ? 'rgba(0,231,138,0.12)' : 'rgba(255,255,255,0.04)',
              border: i === 2 ? '1px solid var(--mint)' : '1px solid rgba(255,255,255,0.08)',
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: i === 2 ? 'var(--mint)' : 'rgba(255,255,255,0.1)',
                color: i === 2 ? 'var(--navy)' : 'white',
                display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 18, flexShrink: 0,
              }}>{i + 1}</div>
              <div>
                <div style={{ fontSize: 19, fontWeight: 700, marginBottom: 4 }}>{t}</div>
                <div style={{ fontSize: 15, opacity: 0.75, lineHeight: 1.5 }}>{b}</div>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </div>
  </section>
);

// ——— Channels strip ———

const Channels = () => (
  <section style={{ background: 'white', padding: '90px 0' }}>
    <style>{`
      .channels-outer { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: center; }
      .channels-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
      @media (max-width: 900px) {
        .channels-outer { grid-template-columns: 1fr !important; gap: 40px; }
      }
      @media (max-width: 680px) {
        .channels-cards { grid-template-columns: 1fr 1fr !important; }
      }
    `}</style>
    <div className="container channels-outer">
      <div>
        <span style={kicker}>Tamo gdje već jesi</span>
        <h2 style={{ fontSize: 44, fontWeight: 800, letterSpacing: '-0.025em', lineHeight: 1.05, color: 'var(--navy)', margin: '12px 0 16px' }}>
          WhatsApp, Viber,<br />web, glas.
        </h2>
        <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--navy)', opacity: 0.75, margin: 0 }}>
          Ne moraš preuzimati novu aplikaciju. Pošalji prometnu u WhatsApp i razgovor počinje.
        </p>
      </div>
      <div className="channels-cards">
        {[
          { name: 'WhatsApp', body: 'Foto + chat, najbrži kanal.', bg: '#25D366' },
          { name: 'Viber',    body: 'Native za HR/BIH tržište.',    bg: '#7360F2' },
          { name: 'Web',      body: 'osiguraj.to — jedan klik.',    bg: 'var(--mint)' },
          { name: 'Voice',    body: 'AI agent na pozivu, 0–24.',    bg: 'var(--navy)' },
        ].map((c, i) => (
          <div key={i} style={{
            background: 'white', borderRadius: 20, padding: '24px 22px',
            border: '1px solid rgba(0,26,76,0.08)',
            display: 'flex', flexDirection: 'column', gap: 12, minHeight: 170,
          }}>
            <div style={{
              width: 44, height: 44, borderRadius: 14, background: c.bg,
              display: 'grid', placeItems: 'center',
              color: ['Web','Voice'].includes(c.name) ? (c.name === 'Voice' ? 'white' : 'var(--navy)') : 'white',
              fontWeight: 800, fontSize: 20,
            }}>
              {c.name[0]}
            </div>
            <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--navy)' }}>{c.name}</div>
            <div style={{ fontSize: 14, color: 'var(--navy)', opacity: 0.7, lineHeight: 1.45 }}>{c.body}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ——— Architecture (PDF p6) — 4 layers ———

const Architecture = () => (
  <section id="za-partnere" style={{ background: 'var(--cream)', padding: '120px 0' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'flex-start' }}>
        <div>
          <span style={kicker}>Za partnere · arhitektura</span>
          <h2 style={{ ...sectionTitle, textAlign: 'left' }}>
            Četiri sloja koja <Underline>rade za tebe.</Underline>
          </h2>
          <p style={{ ...sectionSub, textAlign: 'left', marginBottom: 24 }}>
            Modularna arhitektura s licenciranim brokerom srednjeg sloja — potpuna regulatorna ispravnost za EU tržišta i skalabilnost za B2B2C distribuciju (banke, telekomi, retail).
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Pill variant="primary">Zatraži Business Blueprint</Pill>
            <Pill variant="ghost">WhatsApp prototip</Pill>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {[
            ['A', 'Korisnički kanal', 'WhatsApp · Viber · Web · Voice', 'var(--mint)'],
            ['B', 'AI Orchestration', 'OCR · ekstrakcija · logika pitanja · triage · Document Vault', '#A3F0CC'],
            ['C', 'Broker Layer', 'Licencirani Broker-of-Record. Pregovara i izdaje policu.', '#D4F5E5'],
            ['D', 'Insurer Network', 'API integracije osiguravajućih kuća.', '#EBF8F1'],
          ].map(([k, t, b, bg], i) => (
            <div key={k} style={{
              background: 'white', borderRadius: 20, padding: '24px 28px',
              border: '1px solid rgba(0,26,76,0.08)',
              display: 'grid', gridTemplateColumns: '64px 1fr', gap: 22, alignItems: 'center',
            }}>
              <div style={{
                width: 64, height: 64, borderRadius: 18, background: bg,
                display: 'grid', placeItems: 'center', color: 'var(--navy)',
                fontWeight: 800, fontSize: 26, letterSpacing: '-0.02em',
              }}>{k}</div>
              <div>
                <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--navy)', letterSpacing: '-0.01em' }}>
                  Sloj {k}: {t}
                </div>
                <div style={{ fontSize: 14, color: 'var(--navy)', opacity: 0.7, lineHeight: 1.5, marginTop: 4 }}>
                  {b}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// ——— Roadmap (PDF p11) ———

const Roadmap = () => {
  const phases = [
    ['MVO',        'Auto AO + osnovni Kasko. WhatsApp & web, jednostavan bind proces.', 'live'],
    ['Efficiency', 'Multilingualno širenje (HR / BIH / SLO) i automatizacija.',          'live'],
    ['Claims',     'Integracija AI Trijaže i vođene prijave šteta.',                     'now'],
    ['Multi-line', 'Širenje vertikala: Imovina, Putno, SME, Odgovornost.',               'next'],
    ['Ecosystem',  'White-label B2B2C i API distribucija za banke, telekome, retail.',   'next'],
  ];
  return (
    <section style={{ background: 'white', padding: '120px 0' }}>
      <div className="container">
        <span style={kicker}>Roadmap</span>
        <h2 style={sectionTitle}>Skaliranje u <Underline>5 faza.</Underline></h2>
        <p style={sectionSub}>Od MVO-a do API ekosustava. Trenutno smo u Fazi 3.</p>

        <div style={{ marginTop: 80, position: 'relative' }}>
          <div style={{
            position: 'absolute', top: 38, left: '5%', right: '5%', height: 4,
            background: 'rgba(0,26,76,0.1)', borderRadius: 4,
          }} />
          <div style={{
            position: 'absolute', top: 38, left: '5%', width: '45%', height: 4,
            background: 'var(--mint)', borderRadius: 4,
          }} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 18, position: 'relative' }}>
            {phases.map(([t, b, status], i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
                <div style={{
                  width: 80, height: 80, borderRadius: '50%',
                  background: status === 'next' ? 'white' : 'var(--mint)',
                  border: status === 'now' ? '4px solid var(--navy)' : '4px solid var(--mint)',
                  display: 'grid', placeItems: 'center', position: 'relative',
                  zIndex: 1, fontSize: 26, fontWeight: 800, color: 'var(--navy)',
                  letterSpacing: '-0.02em',
                  boxShadow: status === 'now' ? '0 0 0 8px rgba(0,231,138,0.25)' : 'none',
                }}>
                  0{i + 1}
                </div>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', color: status === 'now' ? 'var(--navy)' : 'rgba(0,26,76,0.5)', textTransform: 'uppercase', marginTop: 12 }}>
                  {status === 'live' ? 'Završeno' : status === 'now' ? 'U tijeku' : 'Slijedi'}
                </div>
                <div style={{ fontSize: 20, fontWeight: 800, color: 'var(--navy)', letterSpacing: '-0.02em', marginTop: 8 }}>
                  {t}
                </div>
                <div style={{ fontSize: 14, color: 'var(--navy)', opacity: 0.7, lineHeight: 1.45, marginTop: 8, maxWidth: 220 }}>
                  {b}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ——— Testimonial / social proof ———

const Voices = () => (
  <section style={{ background: 'var(--mint)', padding: '110px 0' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
        <BlockQuote
          quote="Slikao sam tablicu, AI je za 12 sekundi izvukao sve podatke. Polica je bila plaćena prije nego što sam parkirao."
          who="Marko · Zagreb · Auto AO"
        />
        <BlockQuote
          quote="Kad mi je puknula cijev, pisao sam u WhatsApp. Majstor je bio za 40 minuta na vratima, a šteta se sama prijavila."
          who="Iva · Split · Osiguranje imovine"
          dark
        />
      </div>
    </div>
  </section>
);

const BlockQuote = ({ quote, who, dark }) => (
  <div style={{
    background: dark ? 'var(--navy)' : 'white',
    color: dark ? 'white' : 'var(--navy)',
    borderRadius: 28, padding: '44px 40px',
    display: 'flex', flexDirection: 'column', gap: 20,
  }}>
    <svg width="40" height="32" viewBox="0 0 40 32" aria-hidden="true">
      <path d="M0 32 V18 Q0 4 14 0 L14 8 Q6 12 6 18 L14 18 V32 Z M22 32 V18 Q22 4 36 0 L36 8 Q28 12 28 18 L36 18 V32 Z"
        fill={dark ? 'var(--mint)' : 'var(--mint)'} />
    </svg>
    <p style={{ fontSize: 24, lineHeight: 1.35, fontWeight: 500, letterSpacing: '-0.01em', margin: 0 }}>
      „{quote}"
    </p>
    <div style={{ fontSize: 14, fontWeight: 600, opacity: 0.7, marginTop: 8 }}>{who}</div>
  </div>
);

// ——— Final CTA ———

const FinalCTA = () => (
  <section id="prijava" style={{ background: 'white', padding: '120px 0' }}>
    <div className="container">
      <div style={{
        background: 'var(--navy)', borderRadius: 36, padding: '80px 80px',
        color: 'white', position: 'relative', overflow: 'hidden',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 60, alignItems: 'center',
      }}>
        {/* decoration */}
        <div style={{
          position: 'absolute', right: -120, top: -120,
          width: 360, height: 360, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(0,231,138,0.4), transparent 70%)',
        }} />
        <div style={{ position: 'relative' }}>
          <h2 style={{
            fontSize: 'clamp(40px, 4.6vw, 62px)', fontWeight: 800,
            letterSpacing: '-0.025em', lineHeight: 1.02, margin: 0,
          }}>
            Spreman? <Underline color="var(--mint)">Pošalji sliku.</Underline>
          </h2>
          <p style={{ fontSize: 19, lineHeight: 1.5, opacity: 0.8, maxWidth: 480, marginTop: 24 }}>
            Skeniraj QR ili otvori WhatsApp. Tvoj concierge već čeka — 0 polja, 0 čekanja, 0 € provizije za tebe.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            <Pill variant="mint">Otvori WhatsApp chat</Pill>
            <Pill variant="ghost" style={{ borderColor: 'rgba(255,255,255,0.4)', color: 'white' }}>Skeniraj QR</Pill>
          </div>
        </div>
        <div style={{ display: 'grid', placeItems: 'center', position: 'relative' }}>
          <div style={{
            width: 240, height: 240, background: 'white', borderRadius: 24, padding: 24,
            display: 'grid', placeItems: 'center',
          }}>
            {/* fake QR */}
            <svg width="200" height="200" viewBox="0 0 21 21" aria-hidden="true" shapeRendering="crispEdges">
              {Array.from({ length: 21 }).map((_, y) =>
                Array.from({ length: 21 }).map((_, x) => {
                  const isCorner = (x < 7 && y < 7) || (x > 13 && y < 7) || (x < 7 && y > 13);
                  const cornerOuter = isCorner && (x === 0 || y === 0 || x === 6 || y === 6 || x === 14 || x === 20 || y === 14 || y === 20 || (x > 13 && x < 21 && (x === 14 || x === 20)));
                  const cornerInner = isCorner && ((x === 2 && y >= 2 && y <= 4) || (y === 2 && x >= 2 && x <= 4) || (x === 4 && y >= 2 && y <= 4) || (y === 4 && x >= 2 && x <= 4) || (x === 3 && y === 3));
                  const noise = (Math.abs(Math.sin(x * 7 + y * 13)) > 0.55);
                  if (isCorner) {
                    const lx = x % 7, ly = y % 7;
                    const onBorder = lx === 0 || ly === 0 || lx === 6 || ly === 6;
                    const center = lx >= 2 && lx <= 4 && ly >= 2 && ly <= 4;
                    if (onBorder || center) return <rect key={`${x}-${y}`} x={x} y={y} width="1" height="1" fill="var(--navy)" />;
                    return null;
                  }
                  return noise ? <rect key={`${x}-${y}`} x={x} y={y} width="1" height="1" fill="var(--navy)" /> : null;
                })
              )}
            </svg>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ——— Footer ———

const Footer = () => (
  <footer style={{ background: '#F6F8FB', padding: '64px 0 32px', color: 'var(--navy)' }}>
    <style>{`
      .footer-grid {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: 40px;
      }
      .footer-links-row {
        display: contents;
      }
      @media (max-width: 680px) {
        .footer-grid {
          grid-template-columns: 1fr 1fr !important;
          gap: 32px 24px;
        }
        .footer-brand {
          grid-column: 1 / -1;
        }
      }
    `}</style>
    <div className="container footer-grid">
      <div className="footer-brand">
        <a href="#top" style={{ display: 'flex', alignItems: 'center', textDecoration: 'none', color: 'var(--navy)' }}>
          <span style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-0.02em' }}>osiguraj</span>
          <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--mint)', display: 'inline-block', margin: '0 2px 4px 2px' }} />
          <span style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-0.02em' }}>to</span>
        </a>
        <p style={{ fontSize: 14, lineHeight: 1.55, opacity: 0.65, maxWidth: 320, marginTop: 14 }}>
          Tvoj digitalni insurance concierge. AI inteligencija susreće sigurnost tradicionalnog osiguranja.
        </p>
      </div>
      {[
        ['Proizvodi', ['Auto AO i Kasko', 'Osiguranje imovine', 'Putno osiguranje', 'SME i Odgovornost']],
        ['Tvrtka',    ['O nama', 'Investitori', 'Karijere', 'Kontakt']],
        ['Pravno',    ['Uvjeti korištenja', 'Privatnost', 'Broker-of-Record', 'HANFA registar']],
      ].map(([h, links]) => (
        <div key={h}>
          <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 14, letterSpacing: '0.04em', textTransform: 'uppercase', opacity: 0.7 }}>{h}</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {links.map(l => (
              <li key={l}><a href="#" style={{ color: 'var(--navy)', textDecoration: 'none', fontSize: 15, opacity: 0.85 }}>{l}</a></li>
            ))}
          </ul>
        </div>
      ))}
    </div>
    <div className="container" style={{
      marginTop: 56, paddingTop: 24,
      borderTop: '1px solid rgba(0,26,76,0.1)',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12,
    }}>
      <div style={{ fontSize: 13, opacity: 0.6 }}>© 2026 osiguraj.to · Sva prava pridržana.</div>
      <div style={{ fontSize: 13, opacity: 0.6 }}>Made with 🌱 in Zagreb — for HR · BIH · SLO.</div>
    </div>
  </footer>
);

// ——— Shared styles ———

const sectionTitle = {
  fontSize: 'clamp(38px, 4.2vw, 58px)',
  fontWeight: 800, letterSpacing: '-0.025em', lineHeight: 1.04,
  color: 'var(--navy)', margin: 0, textAlign: 'center', textWrap: 'balance',
};
const sectionSub = {
  fontSize: 19, lineHeight: 1.5,
  color: 'var(--navy)', opacity: 0.75, margin: '16px auto 0',
  maxWidth: 680, textAlign: 'center',
};
const kicker = {
  display: 'inline-block', fontSize: 13, fontWeight: 700,
  letterSpacing: '0.12em', textTransform: 'uppercase',
  color: 'var(--navy)', opacity: 0.7, marginBottom: 14,
};

Object.assign(window, {
  Nav, Hero, Products, HowItWorks, SpeedCallout, ComparatorVsConcierge,
  BestFitRadar, Features, Claims, Channels, Architecture, Roadmap,
  Voices, FinalCTA, Footer,
});