/* About page */
const { Container: BC, Reveal: BR, Eyebrow: BE, Mono: BM, PageHeader: BPH, CTABand: BCTA, PolygonAccent: BPA, PALETTE: BP } = window;

function AboutPage({ onNavigate }) {
  const timeline = [
    ['2014', 'Kyiv',           'Studio founded. Early work across local SMB and tech.', BP.red],
    ['2017', 'Kyiv',           'First international clients. Performance practice grows.', BP.orange],
    ['2020', 'Kyiv · Berlin',  'EU expansion. SEO and content systems become core.', BP.yellow],
    ['2024', 'Kyiv · Ottawa',  'Relocation. Canadian operations open in Ottawa.', BP.green],
    ['2025', 'Four markets',   'AI visibility practice launches as a named service.', BP.blue],
    ['2026', 'Now',            'AI-native marketing ops added. Senior partner to mid-market and category challengers.', BP.purple],
  ];
  const principles = [
    ['Senior or nothing', 'No work handed off to a junior. The person who scoped it is the person who builds it.', BP.red],
    ['Systems, not campaigns', 'We sell systems that compound. Campaigns are an output, not a product.', BP.orange],
    ['Plain English', 'We do technical work. We explain it without jargon.', BP.yellow],
    ['Measurement first', 'If it can’t be measured, we will tell you. We don’t fake numbers.', BP.green],
    ['AI-era literacy', 'Every engagement is built so AI systems can read and cite the work.', BP.purple],
    ['Operator empathy', 'We have run businesses. We understand what urgent means.', BP.magenta],
  ];
  return (
    <main data-page-root>
      <BPH
        num="06"
        eyebrow="About · The studio"
        title={<>STARTED IN KYIV.<br/>BUILT ACROSS<br/>CONTINENTS.</>}
        lede="An international marketing studio. Founded in 2014 in Kyiv, now operating from Ottawa, Kyiv, Berlin, and Paris. 11+ years across markets, crises, and categories."
        color={BP.yellow}
        art="about"
        breadcrumbs={[
          { label:'Home', onClick: () => onNavigate('home') },
          { label:'About' },
        ]}
      />

      {/* Origin */}
      <section className="py-24 md:py-28">
        <BC>
          <div className="grid grid-cols-12 gap-10">
            <div className="col-span-12 md:col-span-4">
              <BE num="01" label="Origin" color={BP.red} />
            </div>
            <div className="col-span-12 md:col-span-8">
              <p className="display display-tight text-[32px] md:text-[64px] leading-[1.05] max-w-[18ch]">
                BUILT THROUGH TURBULENCE. HELD TOGETHER BY <span style={{color: BP.red}}>SENIOR PRACTICE</span>.
              </p>
              <div className="mt-10 grid grid-cols-1 md:grid-cols-2 gap-8">
                <p className="text-[16.5px] text-ink/80 leading-[1.65]">
                  Marketing MIX began in Kyiv in 2014 and grew through every condition that followed — currency shocks, lockdowns, war, relocation, and the rebuild of a distributed studio across Europe and Canada.
                </p>
                <p className="text-[16.5px] text-ink/80 leading-[1.65]">
                  We know what urgent means. We also know what compounds. The work is built to do both: ship now, and last.
                </p>
              </div>
            </div>
          </div>
        </BC>
      </section>

      {/* Timeline */}
      <section className="py-24 md:py-28 bg-paper2 border-y-2 border-ink">
        <BC>
          <BE num="02" label="Timeline" color={BP.green} />
          <h2 className="display display-tight text-[40px] md:text-[80px] mt-6">FOURTEEN YEARS, FOUR MARKETS.</h2>
          <ol className="mt-12 border-2 border-ink bg-paper">
            {timeline.map(([y,p,d,col], i, arr) => (
              <li key={y} className={`grid grid-cols-[80px_1fr] md:grid-cols-[140px_220px_1fr] gap-6 items-baseline px-5 md:px-7 py-5 md:py-6 ${i<arr.length-1?'border-b-2 border-ink':''}`}>
                <div className="display text-[36px] md:text-[52px]" style={{color: col}}>{y}</div>
                <div className="num text-mute md:block hidden font-bold">{p}</div>
                <div>
                  <div className="num text-mute md:hidden mb-1 font-bold">{p}</div>
                  <p className="display-mix text-[17px] md:text-[22px] font-medium leading-[1.4] text-ink/90 max-w-[58ch]">{d}</p>
                </div>
              </li>
            ))}
          </ol>
        </BC>
      </section>

      {/* Principles */}
      <section className="py-24 md:py-28">
        <BC>
          <div className="grid grid-cols-12 gap-8 mb-12">
            <div className="col-span-12 md:col-span-7">
              <BE num="03" label="Operating principles" color={BP.blue} />
              <h2 className="display display-tight text-[40px] md:text-[88px] mt-6 max-w-[20ch]">
                HOW WE ACTUALLY WORK.
              </h2>
            </div>
            <div className="col-span-12 md:col-span-5 md:pt-6">
              <p className="text-[16.5px] text-ink/80 leading-[1.6] max-w-[46ch]">
                A short list. We say no when it doesn’t fit. We don’t use words like passionate, synergy, or unlock your potential.
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {principles.map(([t,d,c], i) => (
              <div key={t} className="border-2 border-ink bg-paper p-6 relative">
                <div className="absolute top-0 left-0 right-0 h-2" style={{background:c}}></div>
                <span className="num font-bold mt-3 inline-block" style={{color: c}}>{String(i+1).padStart(2,'0')}</span>
                <h3 className="display text-[24px] md:text-[28px] mt-3">{t.toUpperCase()}</h3>
                <p className="mt-3 text-[15px] text-ink/80 leading-[1.6] max-w-[44ch]">{d}</p>
              </div>
            ))}
          </div>
        </BC>
      </section>

      {/* Geography — dark */}
      <section className="py-24 md:py-32 bg-ink text-paper border-y-2 border-ink relative overflow-hidden">
        <div className="absolute inset-0 bg-grid-dark opacity-30 pointer-events-none"></div>
        <BC className="relative">
          <BE num="04" label="Geography" color={BP.yellow} dark />
          <h2 className="display display-tight text-paper text-[40px] md:text-[88px] mt-6 max-w-[16ch]">
            DISTRIBUTED BY <span style={{color: BP.yellow}}>DESIGN</span>.
          </h2>
          <div className="mt-14 grid grid-cols-2 md:grid-cols-4 border-2 border-paper/30">
            {[
              ['Ottawa', '208 Booth Street', 'HQ · North America', BP.red],
              ['Kyiv',   'Studio · Podil',   'Engineering & Design', BP.yellow],
              ['Berlin', 'EU operations',    'Performance & Strategy', BP.blue],
              ['Paris',  'EU operations',    'Content & Editorial', BP.green],
            ].map(([city, line, role, col], i, arr) => (
              <div key={city} className={`p-6 md:p-7 relative ${i<2?'border-b-2 md:border-b-0':''} ${i%2===0?'border-r-2':''} md:border-r-2 last:border-r-0 border-paper/30`}>
                <div className="absolute top-0 left-0 right-0 h-2" style={{background:col}}></div>
                <div className="display text-paper text-[40px] md:text-[56px] mt-3">{city.toUpperCase()}</div>
                <div className="num font-bold mt-3" style={{color: col}}>{role}</div>
                <div className="text-[14.5px] text-paper/75 mt-2">{line}</div>
              </div>
            ))}
          </div>

          <div className="mt-16 pt-10 border-t border-paper/20 grid grid-cols-12 gap-8 items-end">
            <div className="col-span-12 md:col-span-7">
              <p className="display-mix text-[22px] md:text-[30px] leading-[1.3] text-paper font-medium max-w-[28ch]">
                Senior practitioners across four time zones. One operating standard.
              </p>
            </div>
            <div className="col-span-12 md:col-span-5 md:text-right">
              <div className="num text-paper/55 mb-2">Quiet line</div>
              <div className="display text-[20px] md:text-[24px] text-paper">
                <span style={{color: BP.yellow}}>КИЇВ</span> / OTTAWA / BERLIN / PARIS
              </div>
            </div>
          </div>
        </BC>
      </section>

      {/* Team grid */}
      <section className="py-24 md:py-28">
        <BC>
          <BE num="05" label="Team" color={BP.orange} />
          <h2 className="display display-tight text-[40px] md:text-[88px] mt-6">WHO YOU ACTUALLY WORK WITH.</h2>
          <div className="mt-12 grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-10">
            {[
              ['Maksym',          'Founder · Strategy',     'Ottawa', BP.red],
              ['Kyiv Studio',     'Design & Engineering',   'Kyiv',   BP.yellow],
              ['Performance',     'Acquisition & Analytics','EU / Canada', BP.blue],
              ['Editorial',       'Content & Brand',        'Paris',  BP.green],
              ['SEO / AI',        'Visibility engineering', 'Distributed', BP.purple],
              ['CRM / Ops',       'Funnels & automation',   'Berlin', BP.orange],
              ['Web & Product',   'Build team',             'Kyiv',   BP.teal],
              ['Strategy Board',  'Senior advisors',        'Across markets', BP.magenta],
            ].map(([n, r, w, col], i) => (
              <BR key={n} delay={i*40}>
                <div className="bg-paper border-2 border-ink overflow-hidden">
                  <div className="h-2" style={{background: col}}></div>
                  <div className="aspect-[4/5] placeholder-thumb relative" data-asset={`team-photo-${n.toLowerCase().replace(/[^a-z]/g,'-')}`}>
                    <div className="absolute -right-10 -bottom-10 opacity-25">
                      <BPA size={200} />
                    </div>
                    <div className="absolute inset-0 grid place-items-center">
                      <div className="display text-[44px] md:text-[64px]" style={{color: col}}>
                        {n.split(' ').map(w => w[0]).join('')}
                      </div>
                    </div>
                    <div className="absolute top-3 left-3 num text-ink/70 font-bold">{String(i+1).padStart(2,'0')}</div>
                  </div>
                  <div className="p-4 border-t-2 border-ink">
                    <h3 className="display text-[18px]">{n.toUpperCase()}</h3>
                    <div className="num text-mute mt-1">{r}</div>
                    <div className="num text-mute">{w}</div>
                  </div>
                </div>
              </BR>
            ))}
          </div>
        </BC>
      </section>

      {/* Trust */}
      <section className="py-12 bg-paper2 border-y-2 border-ink">
        <BC>
          <div className="grid grid-cols-12 gap-8 items-center">
            <div className="col-span-12 md:col-span-3">
              <BE num="06" label="Trust signals" color={BP.teal} />
            </div>
            <div className="col-span-12 md:col-span-9 grid grid-cols-2 md:grid-cols-4 gap-6">
              {[
                ['DUNS',    '68-606-2061',  BP.red],
                ['NCAGE',   'A3G3J',        BP.green],
                ['Years',   '11+',          BP.blue],
                ['Markets', 'Canada · EU',  BP.purple],
              ].map(([k,v,c]) => (
                <div key={k} className="border-l-4 pl-3" style={{borderColor: c}}>
                  <div className="num text-mute">{k}</div>
                  <div className="display text-[22px] md:text-[26px] mt-1">{v}</div>
                </div>
              ))}
            </div>
          </div>
        </BC>
      </section>

      <BCTA onNavigate={onNavigate} />
    </main>
  );
}

Object.assign(window, { AboutPage });