/* LandingPage.jsx */
const { createElement: lh } = React;

function LandingPage({ go }) {
  const { Container, Section, Kicker, GradientButton, Button, Reveal, GridBG, GlowField, ConsoleMock, Capabilities, Partners, Icon } = window;

  return lh('div', null,
    /* ---------------- HERO ---------------- */
    lh('section', { style: { position: 'relative', overflow: 'hidden', paddingTop: 72, paddingBottom: 0 } },
      lh(GridBG, null), lh(GlowField, null),
      lh(Container, { style: { position: 'relative', textAlign: 'center' } },
        lh('div', { style: { display: 'flex', justifyContent: 'center', marginBottom: 26 } },
          lh('div', { style: { display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 14px 6px 8px', borderRadius: 'var(--radius-pill)', border: '1px solid var(--border-2)', background: 'var(--bg-2)', fontFamily: 'var(--font-mono)', fontSize: 11.5, letterSpacing: '.04em', color: 'var(--fg-2)' } },
            lh('span', { style: { padding: '2px 8px', borderRadius: 'var(--radius-pill)', background: 'var(--brand-gradient)', color: '#04222b', fontWeight: 700, fontSize: 10 } }, 'NEW'),
            'ANN-powered · self-hosted')),
        lh('h1', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(42px,6.6vw,84px)', lineHeight: 1.02, letterSpacing: '-.035em', margin: '0 auto', maxWidth: 1000, color: 'var(--fg-1)' } },
          'Contextual vulnerability intelligence, ', lh('span', { className: 'ys-grad-text' }, 'in real time.')),
        lh('p', { style: { color: 'var(--fg-2)', fontSize: 'clamp(17px,1.6vw,21px)', lineHeight: 1.55, maxWidth: 660, margin: '26px auto 0' } },
          'Security teams don\u2019t need more alerts \u2014 they need better decisions. Yottasecure\u2019s platform trains ANN models on the network they defend, and reprioritizes risk as the threat landscape moves.'),
        lh('div', { style: { display: 'flex', gap: 14, justifyContent: 'center', marginTop: 38 } },
          lh(GradientButton, { size: 'lg', icon: 'arrow-right', onClick: () => go('contact') }, 'Get started')),
        /* console mock */
        lh(Reveal, { delay: 120, style: { marginTop: 64, position: 'relative' } },
          lh('div', { style: { maxWidth: 1060, margin: '0 auto', padding: '0 0 0', transform: 'translateZ(0)' } },
            lh(ConsoleMock, null)),
          lh('div', { 'aria-hidden': true, style: { position: 'absolute', left: 0, right: 0, bottom: -1, height: 160, background: 'linear-gradient(180deg, transparent, var(--bg-1))', pointerEvents: 'none' } })
        )
      )
    ),

    /* ---------------- PARTNERS ---------------- */
    lh(Partners, null),

    /* ---------------- SERVICES SPLIT ---------------- */
    lh('section', { style: { padding: '104px 0', borderTop: '1px solid var(--border-1)' } },
      lh(Container, null,
        lh('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' } },
          lh('div', null,
            lh(Kicker, { style: { marginBottom: 18 } }, 'OUR SERVICES'),
            lh('h2', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(30px,3.6vw,42px)', letterSpacing: '-.03em', lineHeight: 1.08, margin: '0 0 18px', color: 'var(--fg-1)' } }, 'Security intelligence, simplified.'),
            lh('p', { style: { color: 'var(--fg-2)', fontSize: 17.5, lineHeight: 1.65, margin: '0 0 28px' } }, 'Transform vulnerability scans into actionable insight. Ask questions in plain language, get AI-powered recommendations, and stay continuously audit-ready \u2014 without drowning in raw findings.'),
            lh('ul', { style: { listStyle: 'none', padding: 0, margin: '0 0 32px', display: 'flex', flexDirection: 'column', gap: 13 } },
              ['Ask the context engine in natural language', 'AI-ranked remediation, mapped to your assets', 'Continuous, audit-ready compliance evidence'].map(t =>
                lh('li', { key: t, style: { display: 'flex', alignItems: 'center', gap: 12, color: 'var(--fg-1)', fontSize: 15.5 } },
                  lh('span', { style: { width: 22, height: 22, borderRadius: '50%', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--brand-gradient-soft)', border: '1px solid rgba(31,200,210,.3)' } }, lh(Icon, { name: 'check', size: 13, style: { color: 'var(--brand-300)' } })), t))),
            lh(GradientButton, { icon: 'arrow-right', onClick: () => go('why') }, 'See how it works')),
          lh(Reveal, { delay: 80 }, lh(ReprioVisual, null))
        )
      )
    ),

    /* ---------------- CAPABILITIES ---------------- */
    lh(Capabilities, { go }),

    /* ---------------- EXPLORE CARDS ---------------- */
    lh('section', { style: { padding: '104px 0', borderTop: '1px solid var(--border-1)' } },
      lh(Container, null,
        lh('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 } },
          [
            { k: 'about', icon: 'building-2', t: 'About Yottasecure', b: 'How we deliver proactive, AI-powered cybersecurity \u2014 the product and the why.' },
            { k: 'rsac', icon: 'presentation', t: 'RSAC 2026', b: 'Highlights from our participation, and what context-first security looked like on the floor.' },
            { k: 'about', icon: 'users', t: 'Our team', b: 'Meet the founders and advisors driving the platform forward.' },
          ].map((c, i) => lh(Reveal, { key: c.t, delay: i * 70 },
            lh('button', { onClick: () => go(c.k), className: 'ys-explore', style: { textAlign: 'left', width: '100%', height: '100%', boxSizing: 'border-box', cursor: 'pointer', padding: 26, borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-1)', background: 'var(--bg-2)', transition: 'all var(--dur)' } },
              lh('div', { style: { width: 40, height: 40, borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg-3)', border: '1px solid var(--border-2)', marginBottom: 40 } }, lh(Icon, { name: c.icon, size: 19, style: { color: 'var(--brand-300)' } })),
              lh('h3', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 19, letterSpacing: '-.01em', margin: '0 0 8px', color: 'var(--fg-1)' } }, c.t),
              lh('p', { style: { color: 'var(--fg-2)', fontSize: 14.5, lineHeight: 1.6, margin: '0 0 18px' } }, c.b),
              lh('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 7, color: 'var(--brand)', fontFamily: 'var(--font-mono)', fontSize: 12.5 } }, 'View more', lh(Icon, { name: 'arrow-right', size: 14 }))
            )
          ))
        )
      )
    )
  );
}

/* before/after reprioritization mini-visual for the services split */
function ReprioVisual() {
  const { Icon } = window;
  const before = [['CVE-2026-1904', '7.9'], ['CVE-2026-2210', '8.4'], ['CVE-2026-3391', '9.8']];
  const after = [['CVE-2026-3391', '9.4', '#FF4D5E'], ['CVE-2026-2877', '8.7', '#FF4D5E'], ['CVE-2026-1550', '6.0', '#F5B93C']];
  const col = (title, rows, accent, ranked) => lh('div', { style: { flex: 1, padding: 18, borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-1)', background: 'var(--bg-2)' } },
    lh('div', { style: { fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.12em', color: accent || 'var(--fg-4)', marginBottom: 14 } }, title),
    lh('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } },
      rows.map((r, i) => lh('div', { key: i, style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, padding: '8px 10px', borderRadius: 'var(--radius-sm)', background: 'var(--bg-3)', border: '1px solid var(--border-1)' } },
        lh('span', { style: { fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--fg-2)' } }, r[0]),
        lh('span', { style: { fontFamily: 'var(--font-mono)', fontSize: 12.5, fontWeight: 600, color: r[2] || 'var(--fg-3)' } }, r[1]))))
  );
  return lh('div', { style: { display: 'flex', alignItems: 'center', gap: 14 } },
    col('BY CVSS', before, null),
    lh('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, color: 'var(--brand)' } }, lh(Icon, { name: 'arrow-right', size: 20 }), lh('span', { style: { fontFamily: 'var(--font-mono)', fontSize: 8.5, color: 'var(--fg-4)', writingMode: 'horizontal-tb' } }, 'CONTEXT')),
    col('BY CONTEXTUAL RISK', after, 'var(--brand-300)', true)
  );
}

Object.assign(window, { LandingPage, ReprioVisual });