// Winkz Designs 2026, ABOUT
(function () {
  const { Icon, Reveal, Counter, Eyebrow, SectionHead, Panel, Section, Grad } = window;
  const GRAD = 'linear-gradient(120deg,#F23BFE,#79BAFF,#2DE3EA)';

  const STATS = [[150, '+', 'Projects shipped'], [98, '%', 'Client retention'], [5, '+', 'Years in business'], [40, '+', 'Industries served']];
  const TIMELINE = [
    ['2021', 'The studio opens', 'Winkz Designs starts with one belief: good design should ship, not sit in a folder.'],
    ['2023', 'Beyond the website', 'We add brand systems and custom software, building the tools behind the sites, not just the sites.'],
    ['2025', 'The AI layer', 'Support chats, voice agents and automations join the stack as clients ask for systems that run themselves.'],
    ['2026', 'Wide open', 'One studio serving every kind of business, from local trades to funded startups.'],
  ];
  const VALUES = [
    ['Ship it', 'Real, live work beats the best-looking deck every time.'],
    ['Own it', 'You keep your site, data and systems. No hostage situations.'],
    ['Say it straight', "We tell you what will work and what won't, before you pay for it."],
  ];

  function AboutPage({ onNavigate }) {
    return (
      <React.Fragment>
        <Section pad={90} style={{ paddingBottom: 30 }}>
          <div style={{ maxWidth: 820 }}>
            <Reveal><Eyebrow>About</Eyebrow></Reveal>
            <Reveal delay={60}><h1 style={{ fontSize: 'clamp(38px,5.5vw,68px)', lineHeight: 1.0, letterSpacing: '-0.04em', margin: '20px 0 0' }}>A studio built to <Grad>make things real.</Grad></h1></Reveal>
            <Reveal delay={130}><p style={{ fontSize: 19, color: 'var(--text-secondary)', lineHeight: 1.6, margin: '22px 0 0', maxWidth: 620 }}>Winkz Designs is a small, senior team that designs and builds websites, brands, software and AI systems, and then hands you something that works.</p></Reveal>
          </div>
        </Section>

        {/* stats */}
        <Section pad={30}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }} className="ab-stats">
            {STATS.map((s, i) => (
              <Reveal key={i} delay={i * 50}>
                <div style={{ padding: '26px 22px', borderRadius: 16, border: '1px solid rgba(255,255,255,0.08)', background: 'rgba(255,255,255,0.02)', textAlign: 'center' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(30px,4vw,46px)', fontWeight: 700, lineHeight: 1 }}><Grad><Counter to={s[0]} suffix={s[1]} /></Grad></div>
                  <div style={{ fontSize: 13, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)', marginTop: 8 }}>{s[2]}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </Section>

        {/* founder */}
        <Section pad={40}>
          <Reveal>
            <Panel pad={0}>
              <div style={{ display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 0 }} className="founder">
                <div style={{ position: 'relative', minHeight: 320, background: 'linear-gradient(150deg, rgba(242,59,254,0.22), rgba(45,227,234,0.16))', overflow: 'hidden' }}>
                  <img src="assets/founder.jpg" alt="Tyler Winkler, Founder &amp; CEO" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 28%' }} />
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 55%, rgba(8,8,10,0.55))' }} />
                </div>
                <div style={{ padding: 38 }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.14em', color: 'var(--winkz-cyan)', textTransform: 'uppercase', marginBottom: 14 }}>Founder &amp; CEO</div>
                  <h2 style={{ fontSize: 30, margin: '0 0 4px' }}>Tyler Winkler</h2>
                  <p style={{ fontSize: 16, color: 'var(--text-secondary)', lineHeight: 1.7, margin: '16px 0 0', maxWidth: 480 }}>
                    "I started Winkz because too many businesses were paying for design that never launched. We flipped it, every engagement ends with something real, live and yours. Whether you need a site, a brand, a CRM or an AI that answers your phones, the goal is the same: ship it, and make it work."
                  </p>
                </div>
              </div>
            </Panel>
          </Reveal>
        </Section>

        {/* values */}
        <Section pad={40}>
          <SectionHead eyebrow="How we operate" title={<>Three rules we <Grad>don't break.</Grad></>} max={560} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }} className="val-grid">
            {VALUES.map((v, i) => (
              <Reveal key={i} delay={i * 50}>
                <div style={{ padding: '28px 24px', borderRadius: 16, border: '1px solid rgba(255,255,255,0.08)', background: 'rgba(255,255,255,0.02)', height: '100%' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--winkz-magenta-bright)', marginBottom: 12 }}>0{i + 1}</div>
                  <h4 style={{ fontSize: 22, margin: '0 0 8px' }}>{v[0]}</h4>
                  <p style={{ fontSize: 14.5, color: 'var(--text-secondary)', lineHeight: 1.6, margin: 0 }}>{v[1]}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </Section>

        {/* timeline */}
        <Section pad={40}>
          <SectionHead eyebrow="The story" title={<>From one site to the <Grad>whole stack.</Grad></>} max={560} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2, position: 'relative' }}>
            {TIMELINE.map((t, i) => (
              <Reveal key={i} delay={i * 50}>
                <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 28, padding: '22px 0', borderTop: '1px solid rgba(255,255,255,0.08)', alignItems: 'start' }} className="tl-row">
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 700 }}><Grad>{t[0]}</Grad></div>
                  <div><h4 style={{ fontSize: 20, margin: '0 0 6px' }}>{t[1]}</h4><p style={{ fontSize: 15, color: 'var(--text-secondary)', lineHeight: 1.6, margin: 0, maxWidth: 620 }}>{t[2]}</p></div>
                </div>
              </Reveal>
            ))}
          </div>
        </Section>

        <style>{`@media (max-width:900px){.ab-stats{grid-template-columns:1fr 1fr!important}.founder{grid-template-columns:1fr!important}.val-grid{grid-template-columns:1fr!important}.tl-row{grid-template-columns:70px 1fr!important;gap:16px!important}}`}</style>
      </React.Fragment>
    );
  }

  window.AboutPage = AboutPage;
})();