const { Button, Card, Badge, Callout } = window.ZaviFxDesignSystem_f15c31;

function AboutPage({ go }) {
  return (
    <>
      <PageHero eyebrow="About ZaviFx" title="A digital team built around measurable growth"
        intro="ZaviFx is a full-service digital marketing and creative technology agency in Hyderabad, India. We help businesses build a strong online presence and grow it with strategy, design, technology and performance marketing.">
        <Button onClick={() => go('contact')}>Start a Project</Button>
      </PageHero>

      <Section eyebrow="What we believe" title="Creative work should be accountable to a number" pad="var(--space-section)">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.1fr) minmax(0,.9fr)', gap: 'var(--space-section)', alignItems: 'start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)', color: 'var(--text-secondary)', lineHeight: 1.7 }}>
            <p>Most agencies are strong in one direction — beautiful work that does not convert, or campaigns wired to a site that cannot carry them. ZaviFx exists in the overlap: strategy that decides where to spend, design that earns attention, engineering that holds up under traffic, and marketing that reports in business terms.</p>
            <p>That combination is why the same team can rebuild a WordPress storefront, run its search programme and design the brand system around it — without three vendors negotiating over who caused a dip.</p>
            <p>We are based in Hyderabad and work with startups, SMBs, e-commerce brands, local businesses and established companies.</p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
            {[['Clarity over jargon', 'Every recommendation is written down in language a non-marketer can act on.'],
              ['Evidence over opinion', 'We publish the report, not a paraphrase of it.'],
              ['Ownership', 'Accounts, code and design files are yours from the first day.'],
              ['Sustainable methods', 'No spam links, no dark patterns, no vanity metrics.']].map(([t, b]) => <Card key={t} variant="subtle" title={t}>{b}</Card>)}
          </div>
        </div>
      </Section>

      <Section tone="sunken" eyebrow="Capabilities" title="Skills in the room" pad="var(--space-section)">
        <div style={{ display: 'flex', gap: 'var(--space-sm)', flexWrap: 'wrap' }}>
          {SERVICES.map((s) => <span key={s.slug} style={{ border: '1px solid var(--border-hairline)', background: 'var(--color-canvas)', borderRadius: 'var(--radius-pill)', padding: '8px 16px', fontSize: 'var(--type-body-sm-size)', color: 'var(--text-secondary)' }}>{s.title}</span>)}
        </div>
        <Callout variant="note" label="Note">Team size, founding year, awards and certifications are intentionally omitted — send us the verified details and we will add them here.</Callout>
      </Section>

      <Section eyebrow="Process" title="Six stages, every engagement" intro="The stages stay the same whether we are running a four-week brand sprint or a year-long growth retainer." pad="var(--space-section)">
        <ol style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 0 }}>
          {PROCESS.map((s, i) => (
            <li key={s.n} style={{ display: 'grid', gridTemplateColumns: '80px minmax(0,1fr)', gap: 'var(--space-xl)', padding: 'var(--space-xl) 0', borderTop: '1px solid var(--border-hairline)', borderBottom: i === PROCESS.length - 1 ? '1px solid var(--border-hairline)' : 'none', alignItems: 'start' }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--type-body-sm-size)', color: 'var(--color-brand-orange-deep)' }}>{s.n}</span>
              <div>
                <h3 className="t-h3">{s.t}</h3>
                <p className="zx-card__body" style={{ marginTop: 'var(--space-xs)', maxWidth: 620 }}>{s.b}</p>
              </div>
            </li>
          ))}
        </ol>
      </Section>

      <CTAStrip go={go} title="Tell us what you are trying to grow" cta="Book a Free Consultation" />
    </>
  );
}
Object.assign(window, { AboutPage });
