// About — plain voice, verified facts only.
function About() {
  const { go } = useRoute();
  return (
    <main className="mx-auto max-w-[1320px] px-6 md:px-10 pt-10 md:pt-16 pb-10">
      <div className="rule-bottom pb-4 flex items-center justify-between smallcaps text-muted">
        <span>About</span>
        <span className="tabular">Bengaluru · Open to VP / Director</span>
      </div>

      <div className="mt-10 md:mt-16 grid md:grid-cols-12 gap-6 md:gap-10">
        <div className="md:col-span-3">
          <img
            src="/public/portrait.jpg"
            alt="Portrait of Prathyusha Vemula"
            className="w-full max-w-[260px] object-cover border border-ink/15"
            style={{ aspectRatio: '3/4', objectPosition: '50% 25%' }}
            loading="lazy"
          />
        </div>
        <div className="md:col-span-9">
          <Reveal>
            <div className="smallcaps text-sienna">About</div>
            <h1 className="mt-4 font-display font-medium tracking-tight text-balance leading-[0.98]
                           text-[44px] md:text-[76px]">
              Twelve years inside regulated transformation work.
            </h1>
          </Reveal>

          <div className="mt-12 measure-wide font-display text-[20px] md:text-[21px] leading-[1.65] text-ink2">
            <p className="dropcap">
              Senior Consultant in Concentrix Digital Transformation, based in Bengaluru. Twelve years of enterprise work — starting as an electronics engineer at TCS on US financial-services systems, through the MBA at IIM Udaipur, and since then inside BFSI, FMCG, and Telecom operations: the Automation CoE at Infosys BPM, renewals transformation at Telstra, and now GenAI and Agentic AI programmes at Concentrix.
            </p>
            <p className="mt-5">
              The work is usually quieter than the LinkedIn version. Six weeks of mapping, judgment calls routed to humans, rule-checks routed to systems, a twenty-five-day mortgage workflow running in four. That rhythm — less dramatic, more compounding — is where most of the posts on <button onClick={() => go('writing')} className="link-underline text-sienna">the writing page</button> come from.
            </p>
            <p className="mt-5">
              Open to the next chapter. Remote-first, VP or Director level. The firms where the work fits are AI-native services firms, hyperscaler industry teams, consulting-plus-operations firms, and banks building their own AI practice. The argument for why those four is on the <button onClick={() => go('pov')} className="link-underline text-sienna">POV page</button>.
            </p>
          </div>

          {/* Facts box — every entry resume-verified */}
          <div className="mt-14 grid md:grid-cols-3 gap-0 md:gap-px md:bg-ink/10 rule-top rule-bottom md:border-0">
            {[
              ['Education', 'PGPM, IIM Udaipur (2014–2016). B.Tech ECE, JNTUK (2006–2010).'],
              ['Current role', 'Senior Consultant, Digital Transformation, Concentrix Catalyst.'],
              ['Certifications', 'Microsoft Azure AI Engineer Associate (AI-102). UiPath BA. WorkFusion Advanced. Lean Six Sigma Green Belt (TCS).'],
              ['Based', 'Bengaluru, India. Remote-first for next role; relocation open for the right one.'],
              ['Languages', 'English, Hindi, Telugu, Kannada.'],
              ['Target', 'VP/Director AI Transformation. $150–200K remote. $250K+ with relocation.'],
            ].map(([k, v]) => (
              <div key={k} className="bg-paper py-5 md:p-6">
                <div className="smallcaps text-muted">{k}</div>
                <div className="mt-2 font-display text-lg leading-snug">{v}</div>
              </div>
            ))}
          </div>

          {/* Career timeline */}
          <div className="mt-16">
            <div className="smallcaps text-sienna">Career</div>
            <div className="mt-4 rule-top">
              {[
                ['Dec 2022 – present', 'Concentrix', 'Senior Consultant, Digital Transformation', 'GenAI, Agentic AI, CX transformation. iX Hero, FinCrime Agentic AI, NPS GenAI.'],
                ['Nov 2020 – Dec 2022', 'Telstra', 'Business Improvement Consultant', 'Renewals transformation across India and Australia. Process mining + RPA.'],
                ['Aug 2017 – Nov 2020', 'Infosys BPM', 'Digital Transformation Consultant', 'BFSI transformation charter. Built Automation CoE. Seven-country shared services design.'],
                ['Sep 2016 – Mar 2017', 'CarDekho', 'Product Strategy & Management', 'Dealer Mart platform MVP. Delite award for product innovation.'],
                ['Jan 2011 – Sep 2014', 'Tata Consultancy Services', 'Systems Engineer → Business Analyst', 'US financial services client. Account opening, brokerage re-platform, auto-insurance.'],
              ].map(([period, firm, role, note], i) => (
                <div key={i} className="grid md:grid-cols-12 gap-4 py-5 rule-bottom">
                  <div className="md:col-span-2 smallcaps text-muted tabular">{period}</div>
                  <div className="md:col-span-3 font-display text-lg">{firm}</div>
                  <div className="md:col-span-3 smallcaps text-ink">{role}</div>
                  <div className="md:col-span-4 text-ink2 leading-relaxed text-sm">{note}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Awards */}
          <div className="mt-16">
            <div className="smallcaps text-sienna">Recognition</div>
            <ul className="mt-4 grid md:grid-cols-2 gap-4">
              <li className="p-5 rule-top rule-bottom">
                <div className="font-display text-lg">Infosys BPM PACE · 1st Runner-Up</div>
                <div className="text-sm text-muted mt-1">Automation category, Nov 2019. Recognised for identifying an automation opportunity and delivering benefits above par — instrumental to winning new business from the client.</div>
              </li>
              <li className="p-5 rule-top rule-bottom">
                <div className="font-display text-lg">CarDekho Delite Award</div>
                <div className="text-sm text-muted mt-1">Product innovation for Dealer Mart platform.</div>
              </li>
              <li className="p-5 rule-top rule-bottom">
                <div className="font-display text-lg">TCS Star of the Month / Quarter</div>
                <div className="text-sm text-muted mt-1">Innovation, process improvement, best project management.</div>
              </li>
              <li className="p-5 rule-top rule-bottom">
                <div className="font-display text-lg">Best Team Player Award</div>
                <div className="text-sm text-muted mt-1">Team excellence.</div>
              </li>
            </ul>
          </div>

          {/* What I'm looking for */}
          <div className="mt-16">
            <div className="smallcaps text-sienna">What I am looking for</div>
            <div className="mt-4 grid md:grid-cols-2 gap-8">
              <div>
                <h3 className="font-display text-2xl">Mandate</h3>
                <p className="mt-2 text-ink2 leading-relaxed">
                  Own an AI transformation P&amp;L or practice. A named flagship sector. Permission to rebuild the commercial model where outcome pricing makes sense. A small, senior team.
                </p>
              </div>
              <div>
                <h3 className="font-display text-2xl">Fit</h3>
                <p className="mt-2 text-ink2 leading-relaxed">
                  AI-native services firms. Hyperscaler industry teams. Consulting-plus-operations firms. Banks building their own AI practice. Remote-first from India, with travel. Open to relocation for the right role.
                </p>
              </div>
            </div>
          </div>

          {/* Contact — quiet */}
          <div className="mt-16 rule-top pt-10">
            <div className="smallcaps text-muted">Get in touch</div>
            <p className="mt-3 font-display text-xl leading-relaxed text-ink2 max-w-[56ch]">
              The <button onClick={() => go('contact')} className="link-underline text-sienna">contact page</button> has the details. Email is the best route for anything substantive.
            </p>
          </div>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { About });