// Home page — uses the V3 system chrome + home-specific body sections

function HomeHero() {
  return (
    <section style={{ position: 'relative', padding: '60px 0 80px', overflow: 'hidden' }}>
      <CursorSpotlight color="rgba(243, 119, 53, 0.10)" size={500} />
      <div style={{ ...bsStyles.container, position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 56 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '8px 14px', borderRadius: 999,
            background: BS.bg2, border: `1px solid ${BS.border}`,
            fontSize: 13, fontWeight: 500,
          }}>
            <span style={{ position: 'relative', width: 8, height: 8 }}>
              <span style={{ position: 'absolute', inset: 0, background: BS.accent, borderRadius: '50%' }} />
              <span style={{ position: 'absolute', inset: -2, background: BS.accent, borderRadius: '50%', opacity: 0.3 }} />
            </span>
            Booking new pilots for Q3
          </div>
          <div style={{ fontSize: 13, color: BS.muted }}>
            <span style={{ color: BS.text, fontWeight: 600 }}>Est. 2014</span> · 500 projects · 5 countries
          </div>
        </div>

        <h1 style={{ ...bsStyles.display, fontSize: 158, margin: 0, position: 'relative' }}>
          The studio
          <span style={{ position: 'relative', display: 'inline-block', margin: '0 18px', isolation: 'isolate' }}>
            <span style={{
              position: 'absolute', inset: '8% -6% 12% -6%',
              background: BS.accent, borderRadius: 999, zIndex: 0,
            }} />
            <span style={{ color: '#fff', position: 'relative', zIndex: 1, padding: '0 8px' }}>behind</span>
          </span>
          <br />
          your<span style={{ fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.02em' }}> drawings.</span>
        </h1>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 40, marginTop: 64, alignItems: 'flex-start' }}>
          <p style={{ fontSize: 18, color: BS.text2, lineHeight: 1.55, margin: 0 }}>
            BIMACE is an Autodesk-certified studio of architects and BIM specialists, embedded in your
            practice from New Delhi. We've shipped 500+ projects for firms across the US, UK and Australia.
          </p>
          <div>
            <div style={{ display: 'flex', gap: 12, marginBottom: 18, flexWrap: 'wrap' }}>
              <a href="/contact" style={bsStyles.btnPrimary}>
                Request a quote
                <ArrowIcon />
              </a>
              <a href="/project-samples" style={bsStyles.btnGhost}>See our work</a>
            </div>
            <div style={{ fontSize: 13, color: BS.muted }}>Free pilot · Quote in 24 hours</div>
          </div>
          <div style={{
            position: 'relative', aspectRatio: '5 / 4', borderRadius: 18, overflow: 'hidden',
            transform: 'rotate(2deg)',
          }}>
            <Placeholder kind="render" tone="dark" />
            <div style={{
              position: 'absolute', bottom: 14, left: 14, right: 14,
              background: '#fff', borderRadius: 10, padding: '10px 14px',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              fontSize: 12, fontWeight: 500,
            }}>
              <span>Recent BIM delivery</span>
              <span style={{ color: BS.accent, fontWeight: 700 }}>LOD 400</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const CLIENT_LOGOS = [
  // Replace each { name } with { name, src: 'filename.png' } when logos are added
  { name: 'BECHTEL' },
  { name: 'T-MOBILE' },
  { name: 'SPRINT' },
  { name: 'MOBILITIE' },
  { name: 'M-SQUARED' },
  { name: 'STRUKTUR STUDIO' },
  { name: 'VCA' },
];

function ClientRail() {
  const items = [...CLIENT_LOGOS, ...CLIENT_LOGOS];
  return (
    <section style={{ background: BS.bgDark, color: '#fff', overflow: 'hidden' }}>
      <div style={{ padding: '14px 0 10px', textAlign: 'center', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
        <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.45)' }}>
          Trusted by leading practices
        </span>
      </div>
      <style>{`
        @keyframes clientScroll {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }
        .client-rail-track {
          display: flex;
          align-items: center;
          gap: 60px;
          width: max-content;
          animation: clientScroll 30s linear infinite;
          padding: 28px 0;
        }
        .client-rail-track:hover { animation-play-state: paused; }
      `}</style>
      <div style={{ overflow: 'hidden' }}>
        <div className="client-rail-track">
          {items.map((c, i) => (
            <React.Fragment key={i}>
              {c.src
                ? <img src={c.src} alt={c.name} style={{ maxHeight: 32, maxWidth: 120, objectFit: 'contain', opacity: 0.75, flexShrink: 0 }} />
                : <span style={{ fontSize: 22, fontWeight: 700, letterSpacing: '0.04em', color: 'rgba(255,255,255,0.8)', whiteSpace: 'nowrap', flexShrink: 0 }}>{c.name}</span>
              }
              <span style={{ width: 8, height: 8, background: BS.accent, borderRadius: '50%', flexShrink: 0 }} />
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeServices() {
  const [hover, setHover] = React.useState(null);
  return (
    <section style={{ padding: '120px 0' }}>
      <div style={bsStyles.container}>
        <SectionHeader
          eyebrow="What we do"
          title={<>Six things.<br />Done well.</>}
          align="split"
          lede="From sketch-to-model conversion to LOD 500 coordination, six disciplines run in lockstep — with a senior architect owning every deliverable."
        />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
          {SERVICES.map((s, i) => (
            <a key={s.id} href="/bim"
              onMouseEnter={() => setHover(s.id)} onMouseLeave={() => setHover(null)}
              style={{
                background: hover === s.id ? BS.text : BS.bg2,
                color: hover === s.id ? BS.bg : BS.text,
                border: `1px solid ${BS.border}`,
                borderRadius: 24, padding: 36,
                display: 'flex', gap: 28, alignItems: 'center', textDecoration: 'none',
                transition: 'all 0.3s', cursor: 'pointer', position: 'relative', overflow: 'hidden',
              }}>
              <div style={{
                flexShrink: 0, width: 120, height: 120, borderRadius: 16, position: 'relative', overflow: 'hidden',
                background: hover === s.id ? BS.accent : BS.bg3,
              }}>
                <Placeholder
                  kind={['plan','render','wireframe','plan','section','wireframe'][i]}
                  tone={hover === s.id ? 'green' : 'cream'}
                />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{
                  fontSize: 11, fontWeight: 700, letterSpacing: '0.08em',
                  color: hover === s.id ? BS.accent : BS.muted, marginBottom: 8,
                }}>/{String(i+1).padStart(2,'0')}</div>
                <h3 style={{ ...bsStyles.display, fontSize: 28, margin: 0, marginBottom: 8 }}>{s.name}</h3>
                <p style={{ fontSize: 14, color: hover === s.id ? 'rgba(255,255,255,0.7)' : BS.text2, lineHeight: 1.55, margin: 0 }}>{s.detail}</p>
              </div>
              <div style={{
                flexShrink: 0, width: 44, height: 44, borderRadius: '50%',
                background: hover === s.id ? BS.accent : BS.bg,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                transition: 'all 0.3s',
              }}>
                <span style={{ color: hover === s.id ? '#fff' : BS.text, transform: hover === s.id ? 'translateX(2px)' : 'none', transition: 'all 0.3s', display: 'inline-flex' }}>
                  <ArrowIcon />
                </span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeWhy() {
  return (
    <section style={{ padding: '120px 0', background: BS.bgDark, color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', top: -100, right: -100, width: 400, height: 400, borderRadius: '50%',
        background: BS.accent, opacity: 0.12, filter: 'blur(60px)',
      }} />
      <div style={{ ...bsStyles.container, position: 'relative' }}>
        <SectionHeader
          eyebrow="Why BIMACE"
          title={<>Quality you can<br />actually </>}
          titleAccent="afford."
          align="split"
          light
          lede="We're calibrated to US/UK studio standards — but delivered out of New Delhi at a fraction of the rate. No offshoring black box. A studio lead owns every brief, end to end."
        />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
          {WHY.map((w, i) => (
            <div key={w.k} style={{
              padding: '32px 28px',
              borderLeft: i === 0 ? 'none' : `1px solid rgba(255,255,255,0.12)`,
            }}>
              <div style={{ ...bsStyles.display, fontSize: 56, color: BS.accent, marginBottom: 14 }}>{w.stat}</div>
              <h3 style={{ fontSize: 18, fontWeight: 700, margin: 0, marginBottom: 10 }}>{w.k}</h3>
              <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.65)', lineHeight: 1.6, margin: 0 }}>{w.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomePortfolio() {
  const [lightbox, setLightbox] = React.useState(null);
  const featured = PROJECTS.slice(0, 6);
  return (
    <section style={{ padding: '120px 0' }}>
      <div style={bsStyles.container}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, flexWrap: 'wrap', gap: 24 }}>
          <div>
            <div style={{ ...bsStyles.eyebrow, marginBottom: 18 }}>
              <span style={{ width: 24, height: 1, background: BS.accent }} />
              Selected work
            </div>
            <h2 style={{ ...bsStyles.display, fontSize: 80, margin: 0 }}>Recently<br />shipped.</h2>
          </div>
          <a href="/project-samples" style={{ ...bsStyles.btnPrimary, padding: '14px 22px' }}>
            View all projects <ArrowIcon />
          </a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 18, gridAutoRows: 220 }}>
          {featured.map((p, i) => {
            const layouts = [
              { gridColumn: 'span 4', gridRow: 'span 2' },
              { gridColumn: 'span 2', gridRow: 'span 1' },
              { gridColumn: 'span 2', gridRow: 'span 1' },
              { gridColumn: 'span 3', gridRow: 'span 2' },
              { gridColumn: 'span 3', gridRow: 'span 2' },
              { gridColumn: 'span 6', gridRow: 'span 1' },
            ];
            return (
              <div key={p.id} onClick={() => setLightbox(p)} style={{
                ...layouts[i], position: 'relative', borderRadius: 18, overflow: 'hidden',
                cursor: 'pointer', background: BS.bg3,
              }}>
                <img src={p.img} alt={p.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                <div style={{
                  position: 'absolute', left: 18, top: 18,
                  background: '#fff', padding: '6px 12px', borderRadius: 999,
                  fontSize: 11, fontWeight: 700, color: BS.text, letterSpacing: '0.04em',
                }}>{p.cat}</div>
                <div style={{
                  position: 'absolute', left: 0, right: 0, bottom: 0,
                  padding: '22px 22px',
                  background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
                  color: '#fff',
                }}>
                  <div style={{ ...bsStyles.display, fontSize: 24, marginBottom: 2 }}>{p.title}</div>
                  <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.75)' }}>{p.loc}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      {lightbox && (
        <div onClick={() => setLightbox(null)} style={{
          position: 'fixed', inset: 0, background: 'rgba(24, 21, 19, 0.94)', zIndex: 100,
          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 60, cursor: 'zoom-out',
        }}>
          <div style={{ width: '100%', maxWidth: 1080, borderRadius: 18, overflow: 'hidden' }}>
            <img src={lightbox.img} alt={lightbox.title} style={{ width: '100%', height: 'auto', display: 'block' }} />
          </div>
        </div>
      )}
    </section>
  );
}

function HomeStats() {
  return (
    <section style={{ padding: '100px 0', background: BS.bg3 }}>
      <div style={bsStyles.container}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {[
            { v: 500, suf: '+', label: 'Projects' },
            { v: 12, suf: ' yrs', label: 'Experience' },
            { v: 48, suf: '', label: 'Specialists' },
            { v: 99, suf: '%', label: 'On-time' },
          ].map((s, i) => (
            <div key={s.label} style={{
              padding: 36, background: BS.bg2, borderRadius: 20,
              border: `1px solid ${BS.border}`, position: 'relative', overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', top: 16, right: 16,
                fontSize: 13, fontWeight: 700, color: BS.accent,
                fontFamily: '"JetBrains Mono", monospace',
              }}>0{i+1}</div>
              <div style={{ ...bsStyles.display, fontSize: 80, color: BS.text, lineHeight: 1, marginBottom: 14 }}>
                <StatCounter value={s.v} suffix={s.suf} />
              </div>
              <div style={{ fontSize: 16, fontWeight: 700, color: BS.text2 }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeProcess() {
  return (
    <section style={{ padding: '120px 0' }}>
      <div style={bsStyles.container}>
        <SectionHeader
          eyebrow="Our process"
          title={<>Brief to<br />handover.</>}
          align="split"
          lede="A predictable four-step rhythm. Daily PDF pins, twice-weekly model sync calls, and never a black box."
        />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {PROCESS.map((p, i) => (
            <div key={p.n} style={{
              background: i === 0 ? BS.accent : BS.bg2, color: i === 0 ? '#fff' : BS.text,
              borderRadius: 24, padding: 32,
              border: i === 0 ? 'none' : `1px solid ${BS.border}`,
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{
                ...bsStyles.display, fontSize: 80, lineHeight: 1, marginBottom: 36,
                color: i === 0 ? 'rgba(255,255,255,0.85)' : BS.bg3, fontWeight: 800,
              }}>{p.n}</div>
              <h3 style={{ ...bsStyles.display, fontSize: 22, margin: 0, marginBottom: 12 }}>{p.t}</h3>
              <p style={{
                fontSize: 13.5, lineHeight: 1.6, margin: 0,
                color: i === 0 ? 'rgba(255,255,255,0.85)' : BS.text2,
              }}>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

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

function HomeTeam() {
  return (
    <section style={{ padding: '120px 0', background: BS.bg3 }}>
      <div style={bsStyles.container}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, flexWrap: 'wrap', gap: 24 }}>
          <div>
            <div style={{ ...bsStyles.eyebrow, marginBottom: 18 }}>
              <span style={{ width: 24, height: 1, background: BS.accent }} />
              The studio
            </div>
            <h2 style={{ ...bsStyles.display, fontSize: 80, margin: 0 }}>People, not<br />a click farm.</h2>
          </div>
          <a href="/about" style={{ ...bsStyles.btnGhost }}>Meet the team <ArrowIcon /></a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {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={HOME_TEAM_PHOTOS[t.name]} alt={t.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top', display: 'block' }} />
              </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 HomeTestimonial() {
  return (
    <section style={{ padding: '100px 0' }}>
      <div style={bsStyles.container}>
        <div style={{
          background: BS.text, borderRadius: 32, padding: '72px 64px',
          color: BS.bg, display: 'grid', gridTemplateColumns: '60px 1fr 220px',
          gap: 48, alignItems: 'center',
        }}>
          <svg width="56" height="44" viewBox="0 0 56 44" fill="none">
            <path d="M0 44V24C0 11 9 0 23 0v8c-7 0-11 7-11 16h11v20H0zM31 44V24C31 11 40 0 54 0v8c-7 0-11 7-11 16h11v20H31z" fill={BS.accent}/>
          </svg>
          <div>
            <p style={{
              ...bsStyles.display, fontSize: 28, lineHeight: 1.3, margin: 0, marginBottom: 24, fontWeight: 500,
              letterSpacing: '-0.015em',
            }}>
              BIMACE became part of our delivery team in eight weeks. Senior coordinators, your standards,
              a tenth of our internal cost. We've moved three commercial projects to them — zero pain.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 42, height: 42, borderRadius: '50%', background: BS.accent }} />
              <div>
                <div style={{ fontSize: 14, fontWeight: 700 }}>Sarah Whitfield, RIBA</div>
                <div style={{ fontSize: 12, color: 'rgba(250, 250, 247, 0.6)' }}>Director, Whitfield + Bell · London</div>
              </div>
            </div>
          </div>
          <div style={{
            textAlign: 'center', padding: 28, background: 'rgba(255,255,255,0.06)',
            borderRadius: 18, border: `1px solid rgba(255,255,255,0.1)`,
          }}>
            <div style={{ ...bsStyles.display, fontSize: 56, color: BS.accent, lineHeight: 1, marginBottom: 8 }}>
              <StatCounter value={94} suffix="%" />
            </div>
            <div style={{ fontSize: 12, color: 'rgba(250, 250, 247, 0.7)' }}>Cost savings vs. in-house</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <Page currentPage="home">
      <HomeHero />
      <ClientRail />
      <HomeServices />
      <HomeWhy />
      <HomePortfolio />
      <HomeStats />
      <HomeProcess />
      <HomeTeam />
      <HomeTestimonial />
      <B3CTA />
    </Page>
  );
}

window.HomePage = HomePage;