// About page — company story, timeline, values, full team, offices

const TIMELINE = [
  { year: '2014', event: 'Founded', detail: 'BIMACE opens in New Delhi with three architects and a single Revit license.' },
  { year: '2017', event: 'First US client', detail: 'A New York commercial fit-out — the start of a 9-year US delivery practice.' },
  { year: '2019', event: 'Autodesk Certified Studio', detail: 'Every senior earns Autodesk Certified Professional status; the credential becomes a hiring floor.' },
  { year: '2021', event: 'BIM 360 / ACC partnership', detail: 'Live coordination on customers\' cloud environments. No more email-the-RVT workflows.' },
  { year: '2023', event: '500th project', detail: 'A milestone — and a moment to formalize our four-step delivery process across all teams.' },
  { year: '2026', event: 'Today', detail: '48 specialists. Four offices. Practices on four continents trust us with their drawings.' },
];

const VALUES = [
  { k: 'Senior-led, always', d: 'Every brief has a senior architect or coordinator on point. No anonymous offshoring.' },
  { k: 'Your standards, our hands', d: 'We adopt your office standards on day one. We don\'t bring ours.' },
  { k: 'No black-box delivery', d: 'Daily PDF pins, twice-weekly sync calls, working files on your CDE.' },
  { k: 'Fair revision policy', d: 'Minor revisions are part of the deliverable. We earn the next project.' },
];

const TEAM_PHOTOS = {
  'Amit Sharma':    'Amit.jpg',
  'Hirdesh Kumar':  'Herdesh.jpg',
  'Alok Kumar':     'Alok.jpg',
  'Sonal Kathuria': 'Sonal.jpg',
};

const FULL_TEAM = TEAM;

const OFFICES = [
  { city: 'New Delhi', country: 'India',         tag: 'HQ — Studio',     email: 'mail@thebimace.com',  phone: '+91 (11) ... — on request' },
  { city: 'USA',       country: 'United States', tag: 'Client liaison',  email: 'mail@thebimace.com',  phone: '+1 (631) 464-0144' },
];

function AboutHero() {
  const { w, isNarrow } = useViewport();
  return (
    <section style={{ position: 'relative', padding: pick(w, '90px 0 80px', '44px 0 48px'), overflow: 'hidden' }}>
      <CursorSpotlight color="rgba(243, 119, 53, 0.10)" size={520} />
      <div style={{ ...bsStyles.container, position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: pick(w, '1.3fr 1fr', '1fr'), gap: pick(w, 60, 36), alignItems: 'center' }}>
          <div>
            <div style={{ ...bsStyles.eyebrow, marginBottom: 22 }}>
              <span style={{ width: 24, height: 1, background: BS.accent }} />
              About BIMACE
            </div>
            <h1 style={{ ...bsStyles.display, fontSize: fs(40, 124), margin: 0, marginBottom: 28 }}>
              Twelve years.<br />
              <span style={{ color: BS.accent }}>500 projects.</span><br />
              One studio.
            </h1>
            <p style={{ fontSize: fs(16, 19), color: BS.text2, lineHeight: 1.55, margin: 0, maxWidth: 580 }}>
              We're an Autodesk-certified CAD and BIM outsourcing studio based in New Delhi, founded in 2014.
              We work with architecture, engineering and construction practices across four continents — embedded in their teams,
              calibrated to their standards.
            </p>
          </div>
          <div style={{
            position: 'relative', aspectRatio: '4 / 5', borderRadius: 22, overflow: 'hidden',
            transform: isNarrow ? 'none' : 'rotate(2deg)', boxShadow: '0 30px 70px rgba(24, 21, 19, 0.18)',
            maxWidth: isNarrow ? 360 : 'none', width: '100%', margin: isNarrow ? '0 auto' : 0,
          }}>
            <Placeholder kind="render" tone="dark" />
          </div>
        </div>
      </div>
    </section>
  );
}


function Values() {
  const { w } = useViewport();
  return (
    <section style={{ padding: pick(w, '120px 0', '72px 0'), background: BS.bg3 }}>
      <div style={bsStyles.container}>
        <SectionHeader
          eyebrow="What we believe"
          title={<>Four rules<br />we don't bend.</>}
          align="split"
          lede="The principles that have stuck across 500 projects and 12 years. They're not posters on a wall — they're how we decide what to take on."
        />
        <div style={{ display: 'grid', gridTemplateColumns: pick(w, 'repeat(2, 1fr)', '1fr'), gap: 20 }}>
          {VALUES.map((v, i) => (
            <div key={v.k} style={{
              background: BS.bg2, border: `1px solid ${BS.border}`,
              borderRadius: 24, padding: pick(w, 36, 24), display: 'flex', gap: pick(w, 28, 18), alignItems: 'flex-start',
            }}>
              <div style={{
                ...bsStyles.display, fontSize: fs(40, 56), color: BS.accent, lineHeight: 1,
                fontWeight: 800, opacity: 0.4,
              }}>{String(i+1).padStart(2, '0')}</div>
              <div style={{ flex: 1 }}>
                <h3 style={{ ...bsStyles.display, fontSize: 28, margin: 0, marginBottom: 12 }}>{v.k}</h3>
                <p style={{ fontSize: 15, color: BS.text2, lineHeight: 1.6, margin: 0 }}>{v.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutStats() {
  const { w, isNarrow } = useViewport();
  const statCols = pick(w, 4, 2, 1);
  return (
    <section style={{ padding: pick(w, '100px 0', '64px 0'), background: BS.bgDark, color: '#fff' }}>
      <div style={bsStyles.container}>
        <div style={{ display: 'grid', gridTemplateColumns: pick(w, 'repeat(4, 1fr)', 'repeat(2, 1fr)', '1fr'), gap: pick(w, 0, 28) }}>
          {[
            { v: 500, suf: '+', label: 'Projects shipped' },
            { v: 48, suf: '',  label: 'Specialists on staff' },
            { v: 12, suf: ' yrs', label: 'In market' },
            { v: 5,  suf: '',  label: 'Countries served' },
          ].map((s, i) => (
            <div key={s.label} style={{
              padding: pick(w, '0 32px', 0),
              borderLeft: (isNarrow || i % statCols === 0) ? 'none' : `1px solid rgba(255,255,255,0.15)`,
            }}>
              <div style={{ ...bsStyles.display, fontSize: fs(48, 88), color: BS.accent, lineHeight: 1, marginBottom: 12 }}>
                <StatCounter value={s.v} suffix={s.suf} />
              </div>
              <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)' }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FullTeam() {
  const { w } = useViewport();
  return (
    <section style={{ padding: pick(w, '120px 0', '72px 0') }}>
      <div style={bsStyles.container}>
        <SectionHeader
          eyebrow="The team"
          title={<>The core<br />four.</>}
          align="split"
          lede="A senior-led studio of Autodesk-certified architects and BIM specialists. Every brief has a named lead on point."
        />
        <div style={{ display: 'grid', gridTemplateColumns: pick(w, 'repeat(4, 1fr)', 'repeat(2, 1fr)'), gap: 20 }}>
          {FULL_TEAM.map(t => (
            <div key={t.name} style={{
              background: BS.bg2, borderRadius: 20, overflow: 'hidden',
              border: `1px solid ${BS.border}`,
            }}>
              <div style={{ aspectRatio: '4 / 5', position: 'relative', overflow: 'hidden' }}>
                <img
                  src={TEAM_PHOTOS[t.name]}
                  alt={t.name}
                  style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top' }}
                />
              </div>
              <div style={{ padding: 22 }}>
                <div style={{ ...bsStyles.display, fontSize: 20, marginBottom: 6 }}>{t.name}</div>
                <div style={{
                  display: 'inline-block', fontSize: 11, fontWeight: 700,
                  background: BS.accentSoft, color: BS.accentDark,
                  padding: '4px 10px', borderRadius: 999, marginBottom: 14,
                }}>{t.role}</div>
                <div style={{ fontSize: 13, color: BS.text2, lineHeight: 1.55 }}>{t.bio}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Offices() {
  const { w } = useViewport();
  return (
    <section style={{ padding: pick(w, '120px 0', '72px 0'), background: BS.bg3 }}>
      <div style={bsStyles.container}>
        <SectionHeader
          eyebrow="Offices"
          title={<>Two<br />locations.</>}
          align="split"
          lede="The studio is in New Delhi. A US liaison keeps us close to North American clients."
        />
        <div style={{ display: 'grid', gridTemplateColumns: pick(w, 'repeat(2, 1fr)', '1fr'), gap: 20 }}>
          {OFFICES.map((o, i) => (
            <div key={o.city} style={{
              background: BS.bg2, border: `1px solid ${BS.border}`,
              borderRadius: 24, padding: pick(w, 36, 24),
              display: 'grid', gridTemplateColumns: pick(w, '1fr 1fr', '1fr'), gap: pick(w, 32, 20),
            }}>
              <div>
                <div style={{
                  display: 'inline-block', fontSize: 10, fontWeight: 700, letterSpacing: '0.08em',
                  textTransform: 'uppercase', background: i === 0 ? BS.accent : BS.bg3,
                  color: i === 0 ? '#fff' : BS.muted,
                  padding: '4px 10px', borderRadius: 999, marginBottom: 18,
                }}>{o.tag}</div>
                <h3 style={{ ...bsStyles.display, fontSize: fs(28, 40), margin: 0, marginBottom: 6 }}>{o.city}</h3>
                <div style={{ fontSize: 14, color: BS.muted }}>{o.country}</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14, justifyContent: 'center' }}>
                <a href={`mailto:${o.email}`} style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '10px 0', textDecoration: 'none', color: BS.text,
                }}>
                  <span style={{
                    width: 32, height: 32, borderRadius: 8, background: BS.bg3,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                      <path d="M1 3h12v8H1zM1 3l6 5 6-5" stroke={BS.accent} strokeWidth="1.4"/>
                    </svg>
                  </span>
                  <div>
                    <div style={{ fontSize: 11, color: BS.muted, marginBottom: 2 }}>Email</div>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>{o.email}</div>
                  </div>
                </a>
                {i === 1 && (
                  <a href={`tel:${o.phone}`} style={{
                    display: 'flex', alignItems: 'center', gap: 12,
                    padding: '10px 0', textDecoration: 'none', color: BS.text,
                  }}>
                    <span style={{
                      width: 32, height: 32, borderRadius: 8, background: BS.bg3,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    }}>
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                        <path d="M3 1l1 3-2 1c0 4 3 7 7 7l1-2 3 1v3a1 1 0 01-1 1A12 12 0 011 2a1 1 0 011-1z" stroke={BS.accent} strokeWidth="1.4"/>
                      </svg>
                    </span>
                    <div>
                      <div style={{ fontSize: 11, color: BS.muted, marginBottom: 2 }}>Phone</div>
                      <div style={{ fontSize: 14, fontWeight: 600 }}>{o.phone}</div>
                    </div>
                  </a>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutPage() {
  return (
    <Page currentPage="about">
      <AboutHero />
      <Values />
      <AboutStats />
      <FullTeam />
      <Offices />
      <B3CTA kicker="Want to" highlight="work" after="with us?" lede="Send us a single floor or your most painful as-built. We'll quote within one business day." />
    </Page>
  );
}

window.AboutPage = AboutPage;