/* RsacPage.jsx — RSAC 2026 recap */
const { createElement: rh } = React;

function PhotoPlaceholder({ label, ratio = '4 / 3' }) {
  return rh('div', { style: { aspectRatio: ratio, borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-2)', background: 'radial-gradient(120% 120% at 30% 20%, #131c26, #0a0e15 75%)', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' } },
    rh('div', { 'aria-hidden': true, style: { position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(rgba(120,150,180,.12) 1px, transparent 1px)', backgroundSize: '20px 20px' } }),
    rh('img', { src: './assets/logo-mark.png', alt: '', style: { height: 40, opacity: .35, filter: 'grayscale(.2)' } }),
    rh('span', { style: { position: 'absolute', bottom: 12, left: 14, fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--fg-4)', letterSpacing: '.05em' } }, label)
  );
}

function RsacPage({ go }) {
  const { Container, Kicker, GridBG, GlowField, GradientButton, Reveal, Icon } = window;
  const shifts = [
    ['From CVEs', 'to actual risk'],
    ['From signals', 'to actionable decisions'],
    ['From compliance chaos', 'to audit-ready evidence'],
  ];
  return rh('div', null,
    /* hero */
    rh('section', { style: { position: 'relative', overflow: 'hidden', paddingTop: 84, paddingBottom: 64 } },
      rh(GridBG, null), rh(GlowField, null),
      rh(Container, { style: { position: 'relative' } },
        rh('div', { style: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22 } },
          rh(Kicker, null, 'RSAC 2026'),
          rh('span', { style: { fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--fg-3)', padding: '4px 10px', border: '1px solid var(--border-2)', borderRadius: 'var(--radius-pill)' } }, 'San Francisco · Moscone')),
        rh('h1', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(38px,5.4vw,68px)', lineHeight: 1.03, letterSpacing: '-.035em', margin: 0, maxWidth: 900, color: 'var(--fg-1)' } },
          'Yottasecure at RSAC 2026: ', rh('span', { className: 'ys-grad-text' }, 'the highlights.')),
        rh('p', { style: { color: 'var(--fg-2)', fontSize: 'clamp(17px,1.5vw,20px)', lineHeight: 1.6, maxWidth: 620, marginTop: 24 } }, 'Thanks for joining us on the floor. Here\u2019s what context-first security looked like at this year\u2019s conference.')
      )
    ),

    /* recap split */
    rh('section', { style: { padding: '40px 0 96px', borderTop: '1px solid var(--border-1)' } },
      rh(Container, null,
        rh('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'start', paddingTop: 64 } },
          rh('div', null,
            rh('p', { style: { color: 'var(--fg-1)', fontSize: 20, lineHeight: 1.6, margin: '0 0 24px', fontWeight: 500 } }, 'Yottasecure was built on a simple idea: security teams don\u2019t need more alerts \u2014 they need better decisions.'),
            rh('div', { style: { display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 32 } },
              shifts.map((s, i) => rh('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 14, padding: '14px 18px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-1)', background: 'var(--bg-2)' } },
                rh(Icon, { name: 'arrow-right', size: 16, style: { color: 'var(--brand)', flex: 'none' } }),
                rh('span', { style: { fontSize: 15.5, color: 'var(--fg-1)' } }, rh('span', { style: { color: 'var(--fg-3)' } }, s[0] + ' '), s[1])))),
            rh('p', { style: { color: 'var(--fg-2)', fontSize: 16.5, lineHeight: 1.7, margin: 0 } }, 'At RSAC, one thing was clear: everyone has AI. Very few have context. ', rh('span', { style: { color: 'var(--fg-1)' } }, 'This is where Yottasecure stands apart.'))),
          rh('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
            rh(Reveal, null, rh('img', { src: './assets/rsac-photo.jpeg', alt: 'Yottasecure booth at RSAC 2026', style: { width: '100%', aspectRatio: '16 / 10', borderRadius: 'var(--radius-lg)', objectFit: 'cover' } })),
            rh('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 } },))
        )
      )
    ),

    /* quote band */
    rh('section', { style: { padding: '96px 0', borderTop: '1px solid var(--border-1)', position: 'relative', overflow: 'hidden' } },
      rh(GlowField, { style: { background: 'radial-gradient(60% 120% at 50% 50%, rgba(31,200,210,.10), transparent 70%)' } }),
      rh(Container, { style: { position: 'relative', textAlign: 'center' } },
        rh('img', { src: './assets/logo-mark.png', alt: '', style: { height: 44, opacity: .9, marginBottom: 26 } }),
        rh('blockquote', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(24px,3.2vw,38px)', letterSpacing: '-.02em', lineHeight: 1.25, color: 'var(--fg-1)', maxWidth: 820, margin: '0 auto' } },
          '\u201CThanks to everyone who stopped by \u2014 ', rh('span', { className: 'ys-grad-text' }, 'context'), ' is the difference between knowing and deciding.\u201D'),
        rh('div', { style: { marginTop: 36 } }, rh(GradientButton, { size: 'lg', icon: 'arrow-right', onClick: () => go('contact') }, 'Book a demo'))
      )
    )
  );
}
Object.assign(window, { RsacPage });