// Winkz Designs 2026, standalone pages: Process (how we build + FAQ) and Trust (proof + security)
(function () {
  const { Icon, Reveal, Eyebrow, SectionHead, Section, Grad } = window;
  const GRAD = 'linear-gradient(120deg,#F23BFE,#79BAFF,#2DE3EA)';

  function PageHero({ eyebrow, title, sub }) {
    return (
      <Section pad={90} style={{ paddingBottom: 20 }}>
        <div style={{ maxWidth: 780 }}>
          <Reveal><Eyebrow>{eyebrow}</Eyebrow></Reveal>
          <Reveal delay={60}><h1 style={{ fontSize: 'clamp(38px,5.5vw,68px)', lineHeight: 1.0, letterSpacing: '-0.04em', margin: '20px 0 0' }}>{title}</h1></Reveal>
          <Reveal delay={130}><p style={{ fontSize: 19, color: 'var(--text-secondary)', lineHeight: 1.6, margin: '22px 0 0', maxWidth: 580 }}>{sub}</p></Reveal>
        </div>
      </Section>
    );
  }

  const STEPS = [
    ['01', 'Align', 'A focused kickoff. We dig into the goal, the audience and the numbers, then commit to a clear, fixed scope before you pay a cent.'],
    ['02', 'Design', 'Direction first, then hi-fi. You see real screens early and often, never a surprise at the end.'],
    ['03', 'Build', 'Short iterations in the real thing. Every week ends with something you can click, test and react to.'],
    ['04', 'Launch', 'We ship it, wire the analytics, and hand you the keys, plus plain-English docs so your team owns it.'],
  ];

  function ProcessPage({ onNavigate }) {
    return (
      <React.Fragment>
        <PageHero eyebrow="How we work" title={<>We ship systems, <Grad>not slide decks.</Grad></>} sub="A senior team, short feedback loops, and work that actually goes live. No black boxes, no juniors learning on your project." />
        <Section pad={30}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {STEPS.map((s, i) => (
              <Reveal key={i} delay={i * 60}>
                <div style={{ display: 'grid', gridTemplateColumns: '90px 1fr', gap: 24, alignItems: 'start', padding: '26px 28px', borderRadius: 18, border: '1px solid rgba(255,255,255,0.08)', background: 'rgba(255,255,255,0.02)' }} className="pr-row">
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 22, fontWeight: 700, color: 'var(--winkz-magenta-bright)' }}>{s[0]}</span>
                  <div><h3 style={{ fontSize: 24, margin: '0 0 8px' }}>{s[1]}</h3><p style={{ fontSize: 16, color: 'var(--text-secondary)', lineHeight: 1.65, margin: 0, maxWidth: 620 }}>{s[2]}</p></div>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={80}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'center', marginTop: 30, fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--winkz-cyan)' }}>
              <Icon n="Clock" s={15} color="#2DE3EA" /> Typical engagement: 3 to 12 weeks · discovery is free · pay only when satisfied
            </div>
          </Reveal>
        </Section>
        {window.FAQ ? <window.FAQ onNavigate={onNavigate} /> : null}
        <style>{`@media (max-width:640px){.pr-row{grid-template-columns:1fr!important;gap:8px!important}}`}</style>
      </React.Fragment>
    );
  }

  function TrustPage({ onNavigate }) {
    return (
      <React.Fragment>
        <PageHero eyebrow="Proof & peace of mind" title={<>Trusted work. <Grad>Yours to keep.</Grad></>} sub="Real results for real businesses, and software that stays secure, on your accounts, owned outright by you." />
        {window.Testimonials ? <window.Testimonials /> : null}
        {window.Security ? <window.Security /> : null}
      </React.Fragment>
    );
  }

  Object.assign(window, { ProcessPage, TrustPage });
})();