/* AboutPage.jsx — The Product + The Why + Team + Partners */
const { createElement: ah } = React;

function PageHero({ kicker, title, titleAccent, sub }) {
  const { Container, Kicker, GridBG, GlowField } = window;
  return ah('section', { style: { position: 'relative', overflow: 'hidden', paddingTop: 84, paddingBottom: 72 } },
    ah(GridBG, null), ah(GlowField, { style: { background: 'radial-gradient(60% 80% at 50% -20%, rgba(22,187,233,.14), transparent 65%)' } }),
    ah(Container, { style: { position: 'relative' } },
      ah(Kicker, { style: { marginBottom: 22 } }, kicker),
      ah('h1', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(38px,5.4vw,68px)', lineHeight: 1.03, letterSpacing: '-.035em', margin: 0, maxWidth: 880, color: 'var(--fg-1)' } },
        title, titleAccent && ah('span', { className: 'ys-grad-text' }, titleAccent)),
      sub && ah('p', { style: { color: 'var(--fg-2)', fontSize: 'clamp(17px,1.5vw,20px)', lineHeight: 1.6, maxWidth: 620, marginTop: 24 } }, sub)
    )
  );
}

function AboutPage({ go }) {
  const { Container, Kicker, Capabilities, TeamGrid, Partners, ConsoleMock, Reveal } = window;
  return ah('div', null,
    ah(PageHero, { kicker: 'ABOUT', title: 'Defense that understands ', titleAccent: 'context.', sub: 'Yottasecure is a Contextual Vulnerability Intelligence Platform \u2014 built so security teams can act on what actually matters.' }),

    /* The Product */
    ah('section', { style: { padding: '40px 0 104px', borderTop: '1px solid var(--border-1)' } },
      ah(Container, null,
        ah('div', { style: { display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 64, alignItems: 'start', paddingTop: 64 } },
          ah('div', { style: { position: 'sticky', top: 100 } },
            ah(Kicker, { style: { marginBottom: 18 } }, 'THE PRODUCT'),
            ah('h2', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(28px,3.4vw,40px)', letterSpacing: '-.03em', lineHeight: 1.1, margin: 0, color: 'var(--fg-1)' } }, 'A real-time, AI-powered defense system.')),
          ah('div', null,
            ah('p', { style: { color: 'var(--fg-1)', fontSize: 19, lineHeight: 1.7, margin: '0 0 22px' } }, 'Our mission is to revolutionize cybersecurity with a Contextual Vulnerability Intelligence Platform \u2014 a cutting-edge, real-time AI-powered defense system built on Artificial Neural Network (ANN) technology.'),
            ah('p', { style: { color: 'var(--fg-2)', fontSize: 17, lineHeight: 1.7, margin: 0 } }, 'The platform empowers individuals with deep coding knowledge to craft AI models tailored for diverse purposes \u2014 ensuring adaptable and resilient cybersecurity solutions, owned and run by the teams that depend on them.'))
        )
      )
    ),

    /* The Why visual band */
    ah('section', { style: { padding: '0 0 104px' } },
      ah(Container, null,
        ah(Reveal, null, ah('div', { style: { borderRadius: 'var(--radius-2xl)', border: '1px solid var(--border-1)', background: 'var(--bg-2)', padding: 'clamp(24px,4vw,56px)' } },
          ah('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 56, alignItems: 'center' } },
            ah('div', null,
              ah(Kicker, { style: { marginBottom: 18 } }, 'THE WHY'),
              ah('h2', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(26px,3vw,36px)', letterSpacing: '-.03em', lineHeight: 1.12, margin: '0 0 16px', color: 'var(--fg-1)' } }, 'Built on ANN.'),
              ah('p', { style: { color: 'var(--fg-2)', fontSize: 16.5, lineHeight: 1.65, margin: 0 } }, 'The Yottasecure platform is built on Artificial Neural Network technology \u2014 a foundation capable of building AI models for a wide range of security purposes.')),
            ah(ConsoleMock, { compact: true })
          )
        ))
      )
    ),

    ah(Capabilities, { go }),
    ah(TeamGrid, null),
    ah(Partners, null)
  );
}
Object.assign(window, { AboutPage, PageHero });