/* ============================================================
   Bizia — Marketing landing page  (/)
   ============================================================ */
(function () {
  const { useState, useEffect } = React;
  const { Button, Badge, Icon, BiziaLogo, BiziaMark, Card } = window;

  /* ---- Floating chip ---- */
  function FloatChip({ icon, label, tone = 'primary', style, delay = 0 }) {
    const [bg, fg] = window.BZ_TONES[tone];
    return React.createElement('div', {
      style: {
        position: 'absolute', display: 'flex', alignItems: 'center', gap: 8, padding: '9px 13px',
        background: 'var(--glass-strong)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
        border: '1px solid var(--border)', borderRadius: 'var(--r-pill)', boxShadow: 'var(--sh-lg)',
        fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', animation: 'bz-float 5s ease-in-out infinite',
        animationDelay: delay + 's', ...style,
      },
    },
      React.createElement('span', { style: { width: 24, height: 24, borderRadius: 7, background: bg, color: fg, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, React.createElement(Icon, { name: icon, size: 14 })),
      label,
    );
  }

  /* ---- Hero product mockup ---- */
  function HeroMock() {
    return React.createElement('div', { style: { position: 'relative', maxWidth: 720, margin: '0 auto' } },
      // floating chips
      React.createElement(FloatChip, { icon: 'globe', label: 'Domain connected', tone: 'secondary', style: { top: 40, left: -18, zIndex: 3 }, delay: 0 }),
      React.createElement(FloatChip, { icon: 'rocket', label: 'Hosting ready', tone: 'primary', style: { top: -16, right: 30, zIndex: 3 }, delay: 1.2 }),
      React.createElement(FloatChip, { icon: 'search', label: 'SEO ready · 88%', tone: 'accent', style: { bottom: 80, left: -34, zIndex: 3 }, delay: 0.6 }),
      React.createElement(FloatChip, { icon: 'google', label: 'Google can find it', tone: 'info', style: { bottom: 16, right: -10, zIndex: 3 }, delay: 1.8 }),
      React.createElement(FloatChip, { icon: 'check', label: 'Ready to publish', tone: 'success', style: { bottom: -14, left: '38%', zIndex: 3 }, delay: 0.9 }),
      // window
      React.createElement('div', {
        style: { position: 'relative', zIndex: 2, borderRadius: 'var(--r-xl)', overflow: 'hidden', border: '1px solid var(--border)', boxShadow: 'var(--sh-xl)', background: 'var(--surface)' },
      },
        // titlebar
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, padding: '12px 16px', borderBottom: '1px solid var(--border-soft)', background: 'var(--surface-2)' } },
          React.createElement('div', { style: { display: 'flex', gap: 6 } },
            ['#FF5F57', '#FEBC2E', '#28C840'].map((c, i) => React.createElement('span', { key: i, style: { width: 11, height: 11, borderRadius: 999, background: c } })),
          ),
          React.createElement('div', { style: { flex: 1, display: 'flex', justifyContent: 'center' } },
            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 7, padding: '5px 14px', borderRadius: 999, background: 'var(--surface-3)', fontSize: 12, color: 'var(--muted)', fontFamily: 'var(--font-mono)' } },
              React.createElement(Icon, { name: 'lock', size: 12 }), 'amazebites.cafe'),
          ),
        ),
        // prompt bar
        React.createElement('div', { style: { padding: '16px', borderBottom: '1px solid var(--border-soft)', background: 'linear-gradient(180deg,var(--primary-soft),transparent)' } },
          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 11, padding: '12px 14px', background: 'var(--surface)', borderRadius: 'var(--r-md)', border: '1px solid var(--primary)', boxShadow: '0 0 0 3px var(--ring)' } },
            React.createElement(BiziaMark, { size: 26 }),
            React.createElement('span', { style: { flex: 1, fontSize: 14, color: 'var(--text-2)' } }, '“Launch a website for my brunch cafe with online bookings”'),
            React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 12px', borderRadius: 8, background: 'var(--primary)', color: '#fff', fontSize: 12.5, fontWeight: 600 } }, React.createElement(Icon, { name: 'sparkles', size: 14 }), 'Generate'),
          ),
        ),
        // body: website preview + side panel
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 180px', minHeight: 240 } },
          // preview
          React.createElement('div', { style: { padding: 16, borderRight: '1px solid var(--border-soft)' } },
            React.createElement('div', { style: { height: 84, borderRadius: 'var(--r-md)', background: 'linear-gradient(120deg,#FF8A5B,#FFB454)', position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 16 } },
              React.createElement('div', { style: { fontSize: 15, fontWeight: 700, color: '#fff' } }, 'AmazeBites Cafe'),
              React.createElement('div', { style: { fontSize: 10.5, color: '#fff', opacity: 0.9, marginTop: 2 } }, 'Brunch · Coffee · Catering'),
              React.createElement('div', { style: { marginTop: 8, display: 'inline-flex', width: 'fit-content', padding: '4px 10px', borderRadius: 999, background: '#fff', color: '#C2410C', fontSize: 10, fontWeight: 700 } }, 'Book a table'),
            ),
            React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginTop: 10 } },
              [0, 1, 2].map(i => React.createElement('div', { key: i, style: { height: 46, borderRadius: 8, background: 'var(--surface-3)', backgroundImage: 'repeating-linear-gradient(135deg, var(--border-soft) 0 1px, transparent 1px 8px)' } })),
            ),
            React.createElement('div', { style: { marginTop: 10, display: 'flex', flexDirection: 'column', gap: 6 } },
              React.createElement('div', { style: { height: 8, width: '70%', borderRadius: 4, background: 'var(--surface-3)' } }),
              React.createElement('div', { style: { height: 8, width: '52%', borderRadius: 4, background: 'var(--surface-3)' } }),
            ),
          ),
          // side panel
          React.createElement('div', { style: { padding: 14, display: 'flex', flexDirection: 'column', gap: 10, background: 'var(--surface-2)' } },
            [['globe', 'Domain', 'amazebites.com'], ['rocket', 'Hosting', 'Cloudflare'], ['search', 'SEO', '88 / 100'], ['google', 'Google', 'Verified']].map((r, i) =>
              React.createElement('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 8 } },
                React.createElement('span', { style: { width: 24, height: 24, borderRadius: 7, background: 'var(--surface)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--primary)' } }, React.createElement(Icon, { name: r[0], size: 13 })),
                React.createElement('div', { style: { minWidth: 0 } },
                  React.createElement('div', { style: { fontSize: 10, color: 'var(--muted)' } }, r[1]),
                  React.createElement('div', { style: { fontSize: 10.5, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, r[2]),
                ),
                React.createElement('span', { style: { marginLeft: 'auto', width: 6, height: 6, borderRadius: 999, background: 'var(--success)' } }),
              )),
          ),
        ),
      ),
      // glow
      React.createElement('div', { style: { position: 'absolute', inset: '-10% -6% -22%', zIndex: 1, background: 'radial-gradient(60% 60% at 50% 40%, rgba(91,92,255,0.18), transparent 70%)', filter: 'blur(20px)' } }),
    );
  }

  function Nav() {
    const [scrolled, setScrolled] = useState(false);
    useEffect(() => {
      const el = document.getElementById('bz-landing-scroll');
      if (!el) return;
      const h = () => setScrolled(el.scrollTop > 12);
      el.addEventListener('scroll', h); return () => el.removeEventListener('scroll', h);
    }, []);
    const links = ['Features', 'How it works', 'Compare', 'Pricing'];
    return React.createElement('header', {
      style: {
        position: 'sticky', top: 0, zIndex: 50, display: 'flex', alignItems: 'center', gap: 20,
        padding: '14px 24px', borderBottom: '1px solid ' + (scrolled ? 'var(--border)' : 'transparent'),
        background: scrolled ? 'var(--glass-strong)' : 'transparent', backdropFilter: scrolled ? 'blur(14px)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(14px)' : 'none', transition: 'all .25s var(--ease)',
      },
    },
      React.createElement(BiziaLogo, { size: 22, showByline: true, onClick: () => window.navigate('/') }),
      React.createElement('nav', { className: 'bz-land-links', style: { display: 'flex', gap: 4, marginLeft: 18 } },
        links.map(l => React.createElement('a', { key: l, href: '#' + l.replace(/\s/g, '-').toLowerCase(), onClick: (e) => { e.preventDefault(); const t = document.getElementById('sec-' + l.replace(/\s/g, '-').toLowerCase()); if (t) t.scrollIntoView({ behavior: 'smooth', block: 'start' }); },
          style: { padding: '8px 12px', borderRadius: 8, fontSize: 14, fontWeight: 500, color: 'var(--muted)', cursor: 'pointer' },
          onMouseEnter: (e) => e.currentTarget.style.color = 'var(--text)', onMouseLeave: (e) => e.currentTarget.style.color = 'var(--muted)',
        }, l)),
      ),
      React.createElement('div', { style: { flex: 1 } }),
      React.createElement(Button, { variant: 'ghost', size: 'sm', onClick: () => window.navigate('/login') }, 'Log in'),
      React.createElement(Button, { variant: 'primary', size: 'sm', icon: 'wand', onClick: () => window.navigate('/signup') }, 'Build my website'),
    );
  }

  function FeatureGrid() {
    const feats = [
      { icon: 'sparkles', title: 'Prompt to website', desc: 'Describe your business in plain English. Bizia designs the site and writes every page for you.', tone: 'primary' },
      { icon: 'layoutTemplate', title: 'Template or scratch', desc: 'Start from a professional template, or let Bizia design from scratch — your choice.', tone: 'secondary' },
      { icon: 'layers', title: 'Visual & prompt editing', desc: 'Click any section to edit, or just tell Bizia: “make this hero more premium”.', tone: 'accent' },
      { icon: 'globe', title: 'Domain search & connect', desc: 'Find the right name, see real costs, and connect it — no DNS knowledge needed.', tone: 'info' },
      { icon: 'rocket', title: 'Hosting & publishing', desc: 'Bizia picks fast, low-cost hosting and deploys your site with one click.', tone: 'primary' },
      { icon: 'search', title: 'SEO & sitemap', desc: 'Titles, meta descriptions, sitemap.xml and robots.txt — generated automatically.', tone: 'secondary' },
      { icon: 'google', title: 'Google Search Console', desc: 'A guided checklist gets your site verified and indexed so Google can find it.', tone: 'accent' },
      { icon: 'inbox', title: 'Optional forms & login', desc: 'Add contact, booking or quote forms — and customer login only if you need it.', tone: 'info' },
    ];
    return React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(250px,1fr))', gap: 18 } },
      feats.map((f, i) => {
        const [bg, fg] = window.BZ_TONES[f.tone];
        return React.createElement(Card, { key: i, hover: true, pad: 22, style: { animation: 'bz-fade-up .5s var(--ease) forwards', animationDelay: (i * 0.05) + 's' } },
          React.createElement('div', { style: { width: 44, height: 44, borderRadius: 12, background: bg, color: fg, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 } }, React.createElement(Icon, { name: f.icon, size: 22 })),
          React.createElement('h4', { style: { fontSize: 16.5, fontWeight: 650 } }, f.title),
          React.createElement('p', { style: { fontSize: 14, color: 'var(--muted)', marginTop: 8, lineHeight: 1.55 } }, f.desc),
        );
      }),
    );
  }

  function HowItWorks() {
    const steps = [
      { n: '01', icon: 'chat', title: 'Describe your website', desc: 'Tell Bizia about your business in one prompt — what you do and the pages you want.' },
      { n: '02', icon: 'sparkles', title: 'Get pages & a plan', desc: 'Bizia designs the site, writes the pages, and recommends a domain, hosting and SEO.' },
      { n: '03', icon: 'layers', title: 'Edit visually or by prompt', desc: 'Refine any section by clicking it or asking. Preview on desktop, tablet and mobile.' },
      { n: '04', icon: 'rocket', title: 'Connect domain & publish', desc: 'Connect your domain, deploy to fast hosting, and go live — Google-ready from day one.' },
    ];
    return React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(230px,1fr))', gap: 18 } },
      steps.map((s, i) => React.createElement('div', { key: i, style: { position: 'relative' } },
        React.createElement(Card, { pad: 22, style: { height: '100%' } },
          React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
            React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600, color: 'var(--primary)' } }, s.n),
            React.createElement('div', { style: { width: 40, height: 40, borderRadius: 11, background: 'var(--surface-3)', color: 'var(--text-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, React.createElement(Icon, { name: s.icon, size: 20 })),
          ),
          React.createElement('h4', { style: { fontSize: 16.5, fontWeight: 650, marginTop: 18 } }, s.title),
          React.createElement('p', { style: { fontSize: 13.5, color: 'var(--muted)', marginTop: 8, lineHeight: 1.55 } }, s.desc),
        ),
      )),
    );
  }

  function Comparison() {
    const rows = [
      ['Build a full website from one prompt', true, true, true, false],
      ['Template or AI-from-scratch design', true, true, false, false],
      ['Edit visually or by prompt', true, false, false, false],
      ['Domain search & one-click connect', true, true, false, true],
      ['Picks & configures hosting for you', true, true, false, false],
      ['Auto SEO: titles, sitemap, robots.txt', true, false, false, false],
      ['Guided Google Search Console setup', true, false, false, false],
      ['No technical work, plain language', true, false, false, false],
    ];
    const cols = ['Bizia', 'Wix', 'Webflow', 'Shopify', 'WordPress'];
    const Cell = ({ v, hero }) => React.createElement('td', { style: { textAlign: 'center', padding: '14px 10px', background: hero ? 'var(--primary-soft)' : 'transparent' } },
      v === true ? React.createElement('span', { style: { display: 'inline-flex', width: 24, height: 24, borderRadius: 999, background: hero ? 'var(--primary)' : 'var(--success-soft)', color: hero ? '#fff' : 'var(--success)', alignItems: 'center', justifyContent: 'center' } }, React.createElement(Icon, { name: 'check', size: 15 }))
        : React.createElement('span', { style: { color: 'var(--muted-2)' } }, React.createElement(Icon, { name: 'minus', size: 16, style: { display: 'inline' } })),
    );
    return React.createElement(Card, { pad: 0, style: { overflow: 'hidden' } },
      React.createElement('div', { style: { overflowX: 'auto' } },
        React.createElement('table', { style: { width: '100%', borderCollapse: 'collapse', minWidth: 640 } },
          React.createElement('thead', null,
            React.createElement('tr', { style: { borderBottom: '1px solid var(--border)' } },
              React.createElement('th', { style: { textAlign: 'left', padding: '16px 18px', fontSize: 13, fontWeight: 600, color: 'var(--muted)' } }, 'Capability'),
              cols.map((c, i) => React.createElement('th', { key: c, style: { padding: '16px 10px', fontSize: 14, fontWeight: 700, color: i === 0 ? 'var(--primary)' : 'var(--text-2)', background: i === 0 ? 'var(--primary-soft)' : 'transparent', minWidth: 90 } }, c)),
            ),
          ),
          React.createElement('tbody', null,
            rows.map((r, ri) => React.createElement('tr', { key: ri, style: { borderBottom: ri < rows.length - 1 ? '1px solid var(--border-soft)' : 'none' } },
              React.createElement('td', { style: { padding: '14px 18px', fontSize: 14, fontWeight: 500 } }, r[0]),
              r.slice(1).map((v, ci) => React.createElement(Cell, { key: ci, v, hero: ci === 0 })),
            )),
          ),
        ),
      ),
    );
  }

  function PricingPreview() {
    const plans = window.DATA.plans.slice(0, 3).concat(window.DATA.plans[3]);
    return React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(230px,1fr))', gap: 16 } },
      [window.DATA.plans[1], window.DATA.plans[2], window.DATA.plans[3]].map((p) =>
        React.createElement(Card, { key: p.id, pad: 24, hover: true, style: p.highlight ? { border: '1.5px solid var(--primary)', boxShadow: 'var(--sh-lg)' } : {} },
          p.highlight ? React.createElement(Badge, { tone: 'primary', icon: 'star', style: { marginBottom: 12 } }, 'Most popular') : null,
          React.createElement('h4', { style: { fontSize: 17, fontWeight: 650 } }, p.name),
          React.createElement('p', { style: { fontSize: 13, color: 'var(--muted)', marginTop: 4 } }, p.tagline),
          React.createElement('div', { style: { display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 16 } },
            React.createElement('span', { style: { fontSize: 34, fontWeight: 750, letterSpacing: '-0.03em' } }, '$' + p.price),
            React.createElement('span', { style: { fontSize: 14, color: 'var(--muted)' } }, '/' + p.period),
          ),
          React.createElement(Button, { variant: p.highlight ? 'primary' : 'outline', full: true, style: { marginTop: 16 }, onClick: () => window.navigate('/signup') }, 'Start free'),
          React.createElement('div', { style: { marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10 } },
            p.features.slice(0, 5).map((f, i) => React.createElement('div', { key: i, style: { display: 'flex', gap: 9, fontSize: 13.5, color: 'var(--text-2)' } },
              React.createElement(Icon, { name: 'check', size: 16, style: { color: 'var(--secondary)', flexShrink: 0, marginTop: 1 } }), f)),
          ),
        )),
    );
  }

  function Section({ id, eyebrow, title, sub, children, style }) {
    return React.createElement('section', { id: 'sec-' + id, style: { padding: '64px 24px', ...style } },
      React.createElement('div', { style: { maxWidth: 1180, margin: '0 auto' } },
        React.createElement('div', { style: { textAlign: 'center', maxWidth: 680, margin: '0 auto 40px' } },
          eyebrow ? React.createElement('div', { style: { display: 'inline-flex', alignItems: 'center', gap: 7, padding: '6px 13px', borderRadius: 999, background: 'var(--primary-soft)', color: 'var(--primary-700)', fontSize: 12.5, fontWeight: 650, letterSpacing: '0.02em', marginBottom: 16 } },
            React.createElement(Icon, { name: 'sparkles', size: 14 }), eyebrow) : null,
          React.createElement('h2', { style: { fontSize: 'clamp(28px,4vw,40px)', fontWeight: 720, letterSpacing: '-0.035em', lineHeight: 1.08 } }, title),
          sub ? React.createElement('p', { style: { fontSize: 16.5, color: 'var(--muted)', marginTop: 14, lineHeight: 1.55 } }, sub) : null,
        ),
        children,
      ),
    );
  }

  function LandingPage() {
    const [theme, setTheme] = window.useTheme();
    const [prompt, setPrompt] = useState('');
    return React.createElement('div', { id: 'bz-landing-scroll', className: 'bz-app-bg', style: { height: '100vh', overflowY: 'auto', overflowX: 'hidden' } },
      React.createElement(Nav, null),

      // HERO
      React.createElement('section', { style: { position: 'relative', padding: '56px 24px 40px', textAlign: 'center', overflow: 'hidden' } },
        React.createElement('div', { style: { maxWidth: 880, margin: '0 auto', position: 'relative', zIndex: 2 } },
          React.createElement('div', { style: { display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 14px', borderRadius: 999, background: 'var(--glass-strong)', border: '1px solid var(--border)', boxShadow: 'var(--sh-sm)', fontSize: 13, fontWeight: 550, marginBottom: 22 } },
            React.createElement('span', { style: { width: 7, height: 7, borderRadius: 999, background: 'var(--secondary)' } }),
            'The complete website launch platform',
          ),
          React.createElement('h1', { style: { fontSize: 'clamp(36px,6vw,62px)', fontWeight: 760, letterSpacing: '-0.04em', lineHeight: 1.02 } },
            'Create and launch a complete website ',
            React.createElement('span', { className: 'bz-grad-text' }, 'from one prompt.'),
          ),
          React.createElement('p', { style: { fontSize: 'clamp(16px,2.2vw,20px)', color: 'var(--muted)', marginTop: 20, maxWidth: 680, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.5 } },
            'Bizia designs your website, sets up the pages, connects your domain, prepares hosting, adds SEO, and guides you to publish — without technical work.'),
          // prompt CTA
          React.createElement('div', { style: { maxWidth: 580, margin: '30px auto 0' } },
            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, padding: 8, background: 'var(--surface)', borderRadius: 'var(--r-lg)', border: '1px solid var(--border-strong)', boxShadow: 'var(--sh-lg)' } },
              React.createElement(BiziaMark, { size: 30 }),
              React.createElement('input', {
                value: prompt, onChange: (e) => setPrompt(e.target.value),
                onKeyDown: (e) => e.key === 'Enter' && window.navigate('/signup'),
                placeholder: 'e.g. A dental clinic in Newark with appointment booking…',
                style: { flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 15.5, color: 'var(--text)', minWidth: 0 },
              }),
              React.createElement(Button, { variant: 'primary', icon: 'wand', onClick: () => window.navigate('/signup') }, 'Build my website'),
            ),
            React.createElement('div', { style: { display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap', marginTop: 14 } },
              ['Dental clinic', 'Brunch cafe', 'Coaching business', 'Real estate'].map(s => React.createElement('button', { key: s, onClick: () => setPrompt('A ' + s.toLowerCase() + ' website'),
                style: { padding: '6px 12px', borderRadius: 999, border: '1px solid var(--border)', background: 'var(--surface)', fontSize: 12.5, color: 'var(--muted)', cursor: 'pointer' } }, s)),
            ),
          ),
        ),
        // hero mock
        React.createElement('div', { style: { marginTop: 56, position: 'relative', zIndex: 2 } }, React.createElement(HeroMock, null)),
        React.createElement('div', { style: { position: 'absolute', top: -100, left: '50%', transform: 'translateX(-50%)', width: 900, height: 500, background: 'radial-gradient(50% 50% at 50% 50%, rgba(18,184,166,0.10), transparent 70%)', zIndex: 1 } }),
      ),

      // PROBLEM
      React.createElement(Section, { id: 'problem', eyebrow: 'The problem', title: 'Going online shouldn’t take ten tools and a developer',
        sub: 'Most builders stop at the website. You’re still left juggling domains, hosting, logins, email, socials and lead tracking — alone.' },
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 18 } },
          [['x', 'Too many disconnected tools', 'A builder here, a domain registrar there, a CRM somewhere else.'],
           ['x', 'Confusing technical choices', 'DNS, hosting tiers, auth providers — decisions you shouldn’t have to make.'],
           ['x', 'No clear path to launch', 'You build a page and then wonder: what now? Bizia gives you the whole plan.']].map((r, i) =>
            React.createElement(Card, { key: i, pad: 22 },
              React.createElement('div', { style: { width: 38, height: 38, borderRadius: 10, background: 'var(--danger-soft)', color: 'var(--danger)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 } }, React.createElement(Icon, { name: r[0], size: 19 })),
              React.createElement('h4', { style: { fontSize: 15.5, fontWeight: 650 } }, r[1]),
              React.createElement('p', { style: { fontSize: 13.5, color: 'var(--muted)', marginTop: 7, lineHeight: 1.55 } }, r[2]),
            )),
        ),
      ),

      // FEATURES
      React.createElement(Section, { id: 'features', eyebrow: 'From prompt to published', title: 'Everything to build and launch',
        sub: 'Bizia handles the website and everything around it — design, domain, hosting, SEO and Google. Forms, login and integrations are optional add-ons.', style: { background: 'var(--surface)', borderTop: '1px solid var(--border-soft)', borderBottom: '1px solid var(--border-soft)' } },
        React.createElement(FeatureGrid, null),
      ),

      // HOW IT WORKS
      React.createElement(Section, { id: 'how-it-works', eyebrow: 'How it works', title: 'From idea to live in four steps',
        sub: 'Bizia recommends the simplest safe setup first — then lets you customize when you’re ready.' },
        React.createElement(HowItWorks, null),
      ),

      // COMPARE
      React.createElement(Section, { id: 'compare', eyebrow: 'Why Bizia', title: 'Bizia vs the usual suspects',
        sub: 'Other tools build pages. Bizia launches the whole business.', style: { background: 'var(--surface)', borderTop: '1px solid var(--border-soft)', borderBottom: '1px solid var(--border-soft)' } },
        React.createElement(Comparison, null),
      ),

      // PRICING
      React.createElement(Section, { id: 'pricing', eyebrow: 'Pricing', title: 'Start free. Pay when you launch.',
        sub: 'Domains and infrastructure are billed at cost, separately and transparently. No surprises.' },
        React.createElement(PricingPreview, null),
        React.createElement('div', { style: { textAlign: 'center', marginTop: 28 } },
          React.createElement(Button, { variant: 'ghost', iconRight: 'arrowRight', onClick: () => window.navigate('/app/billing') }, 'Compare all plans'),
        ),
      ),

      // CTA
      React.createElement('section', { style: { padding: '24px 24px 80px' } },
        React.createElement('div', { style: { maxWidth: 1000, margin: '0 auto', borderRadius: 'var(--r-2xl)', padding: '56px 32px', textAlign: 'center', position: 'relative', overflow: 'hidden', background: 'linear-gradient(120deg,var(--primary),var(--primary-700))', boxShadow: 'var(--sh-xl)' } },
          React.createElement('div', { style: { position: 'absolute', inset: 0, backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 16px)' } }),
          React.createElement('div', { style: { position: 'relative' } },
            React.createElement(BiziaMark, { size: 52, plain: false, glow: true }),
            React.createElement('h2', { style: { fontSize: 'clamp(28px,4vw,40px)', fontWeight: 720, color: '#fff', letterSpacing: '-0.03em', marginTop: 20 } }, 'Your website, live today.'),
            React.createElement('p', { style: { fontSize: 17, color: 'rgba(255,255,255,0.85)', marginTop: 12, maxWidth: 480, margin: '12px auto 0' } }, 'Describe it once. Bizia builds, connects and publishes it.'),
            React.createElement('div', { style: { display: 'flex', gap: 12, justifyContent: 'center', marginTop: 28, flexWrap: 'wrap' } },
              React.createElement(Button, { variant: 'dark', size: 'lg', icon: 'wand', style: { background: '#fff', color: 'var(--primary-700)', border: 'none' }, onClick: () => window.navigate('/signup') }, 'Build my website'),
              React.createElement(Button, { variant: 'ghost', size: 'lg', iconRight: 'arrowRight', style: { color: '#fff', border: '1px solid rgba(255,255,255,0.4)' }, onClick: () => { const t = document.getElementById('sec-how-it-works'); if (t) t.scrollIntoView({ behavior: 'smooth' }); } }, 'See how launch works'),
            ),
          ),
        ),
      ),

      // FOOTER
      React.createElement('footer', { style: { borderTop: '1px solid var(--border)', background: 'var(--surface)', padding: '48px 24px 32px' } },
        React.createElement('div', { style: { maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 32 }, className: 'bz-footer-grid' },
          React.createElement('div', null,
            React.createElement(BiziaLogo, { size: 22, showByline: true }),
            React.createElement('p', { style: { fontSize: 13.5, color: 'var(--muted)', marginTop: 14, maxWidth: 280, lineHeight: 1.55 } }, 'Launch your business online from one prompt. Website, domain, hosting, socials, e-cards, leads and analytics — all in one guided platform.'),
            React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 16 } },
              ['instagram', 'twitter', 'linkedin', 'youtube'].map(s => React.createElement('a', { key: s, href: '#', onClick: (e) => e.preventDefault(), style: { width: 34, height: 34, borderRadius: 9, border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--muted)' } }, React.createElement(Icon, { name: s, size: 16 }))),
            ),
          ),
          ...[['Product', ['Features', 'Templates', 'Pricing', 'Domain center']], ['Company', ['About', 'Careers', 'Blog', 'Contact']], ['Resources', ['Docs', 'Help center', 'Status', 'Privacy']]].map((col, i) =>
            React.createElement('div', { key: i },
              React.createElement('h5', { style: { fontSize: 13, fontWeight: 650, marginBottom: 14 } }, col[0]),
              React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
                col[1].map(l => React.createElement('a', { key: l, href: '#', onClick: (e) => e.preventDefault(), style: { fontSize: 13.5, color: 'var(--muted)' } }, l)),
              ),
            )),
        ),
        React.createElement('div', { style: { maxWidth: 1180, margin: '32px auto 0', paddingTop: 24, borderTop: '1px solid var(--border-soft)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontSize: 13, color: 'var(--muted-2)' } },
          React.createElement('span', null, '© 2026 Bizia by Brandsap. All rights reserved.'),
          React.createElement('span', null, 'Made for small businesses, everywhere.'),
        ),
      ),
      React.createElement('style', null, '@media(max-width:840px){.bz-land-links{display:none !important}.bz-footer-grid{grid-template-columns:1fr 1fr !important}}'),
    );
  }

  window.LandingPage = LandingPage;
})();