// BIM page — deep dive on Building Information Modeling services

const BIM_DISCIPLINES = [
  { id: 'arch', name: 'Architecture',     icon: 'A', detail: 'Fully parametric Revit / ArchiCAD models with families, sheets, schedules and tagged annotations to your office standard.', services: ['Revit families', 'Sheet sets', 'Renderings', 'Schedules'] },
  { id: 'struct', name: 'Structure',      icon: 'S', detail: 'Coordinated structural BIM — concrete, steel, timber — including rebar detailing and ETABS / RISA hand-off.', services: ['Concrete', 'Steel detailing', 'Rebar', 'Connections'] },
  { id: 'mep', name: 'MEP',               icon: 'M', detail: 'Mechanical, electrical, plumbing and fire-protection modeling, with full duct/pipe sizing and pressure-loss calcs.', services: ['HVAC', 'Plumbing', 'Electrical', 'Fire protection'] },
  { id: 'clash', name: 'Clash Detection', icon: 'C', detail: 'Federated Navisworks reviews on a weekly cadence — soft and hard clashes triaged, resolved and tracked in BCF.', services: ['Navisworks', 'BCF tracking', 'Issue resolution', 'Reports'] },
  { id: '4d', name: '4D Simulation',      icon: '4D', detail: 'Time-linked sequencing tied to your Primavera or MS Project schedule, with phasing animations for stakeholder review.', services: ['Synchro', 'Navisworks TL', 'P6 link', 'Phasing'] },
  { id: 'scan', name: 'Scan-to-BIM',      icon: 'P', detail: 'Point-cloud registration and modeling from Leica, Faro and Matterport scans to LOD 300 as-builts.', services: ['ReCap', 'Point cloud', 'As-built', 'Heritage'] },
];

const LOD_LADDER = [
  { lod: 100, name: 'Concept',         d: 'Generic massing — symbolic geometry, used for feasibility and zoning studies.' },
  { lod: 200, name: 'Approximate',     d: 'Generic systems with approximate quantities, size, shape, location and orientation.' },
  { lod: 300, name: 'Accurate',        d: 'Accurate geometry suitable for construction documentation and coordination.' },
  { lod: 350, name: 'Coordinated',     d: 'Interfaces between systems modeled — ready for clash detection.' },
  { lod: 400, name: 'Fabrication',     d: 'Detailed enough for fabrication, assembly and installation.' },
  { lod: 500, name: 'As-built',        d: 'Verified field representation of the as-built condition for FM and lifecycle.' },
];

const SOFTWARE = [
  ['Autodesk Revit', 'Architecture · Structure · MEP'],
  ['Navisworks Manage', 'Federation · Clash · 4D'],
  ['ArchiCAD', 'Open-BIM workflows'],
  ['SketchUp Pro', 'Massing · Concept'],
  ['Lumion / Enscape', 'Real-time visualization'],
  ['3DS Max + V-Ray', 'Photoreal stills + film'],
  ['Autodesk ReCap', 'Point-cloud registration'],
  ['BIM 360 / ACC', 'Common data environment'],
];

function BimHero() {
  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={{
        position: 'absolute', top: -200, right: -200, width: 600, height: 600,
        background: `radial-gradient(circle, ${BS.accentSoft}, transparent 65%)`,
        opacity: 0.6, pointerEvents: 'none',
      }} />
      <div style={{ ...bsStyles.container, position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: pick(w, '1.2fr 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 }} />
              BIM Services
            </div>
            <h1 style={{ ...bsStyles.display, fontSize: fs(46, 112), margin: 0, marginBottom: 28 }}>
              BIM,<br /><span style={{ color: BS.accent }}>end</span> to <span style={{ fontStyle: 'italic', fontWeight: 400 }}>end.</span>
            </h1>
            <p style={{ fontSize: 19, color: BS.text2, lineHeight: 1.55, margin: 0, marginBottom: 32, maxWidth: 540 }}>
              Six BIM disciplines, federated under one studio lead. From LOD 100 concept massing to LOD 500
              verified as-builts — Architecture, Structure, MEP, Coordination, 4D and Scan-to-BIM.
            </p>
            <div style={{ display: 'flex', gap: 12, marginBottom: 36, flexWrap: 'wrap' }}>
              <a href="/contact" style={bsStyles.btnAccent}>Request a pilot <ArrowIcon /></a>
              <a href="/project-samples" style={bsStyles.btnGhost}>See BIM samples</a>
            </div>
            <div style={{ display: 'flex', gap: 24, paddingTop: 28, borderTop: `1px solid ${BS.border}`, flexWrap: 'wrap' }}>
              {[['LOD 100—500', 'Capability'], ['Revit · ArchiCAD', 'Authoring'], ['Navisworks · BCF', 'Coordination']].map(([v, l]) => (
                <div key={l}>
                  <div style={{ fontSize: 13, fontWeight: 700, whiteSpace: 'nowrap' }}>{v}</div>
                  <div style={{ fontSize: 11, color: BS.muted, marginTop: 4 }}>{l}</div>
                </div>
              ))}
            </div>
          </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="wireframe" tone="dark" />
            <div style={{
              position: 'absolute', top: 18, left: 18,
              background: '#fff', padding: '6px 12px', borderRadius: 999,
              fontSize: 11, fontWeight: 700, letterSpacing: '0.04em',
            }}>FEDERATED · LOD 400</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BimDisciplines() {
  const [active, setActive] = React.useState(BIM_DISCIPLINES[0].id);
  const current = BIM_DISCIPLINES.find(d => d.id === active);
  const { w } = useViewport();
  return (
    <section style={{ padding: pick(w, '120px 0', '72px 0') }}>
      <div style={bsStyles.container}>
        <SectionHeader
          eyebrow="Six disciplines"
          title={<>Every trade.<br />One federated model.</>}
          align="split"
          lede="Switch between disciplines to see what each delivers — and the software we work in."
        />
        <div style={{ display: 'grid', gridTemplateColumns: pick(w, '1fr 1.6fr', '1fr'), gap: 24 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {BIM_DISCIPLINES.map(d => (
              <button key={d.id} onClick={() => setActive(d.id)} style={{
                background: active === d.id ? BS.text : BS.bg2,
                color: active === d.id ? BS.bg : BS.text,
                border: `1px solid ${BS.border}`, borderRadius: 18, padding: '20px 22px',
                display: 'flex', alignItems: 'center', gap: 16, cursor: 'pointer',
                textAlign: 'left', transition: 'all 0.18s',
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: active === d.id ? BS.accent : BS.bg3,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: d.icon.length > 1 ? 14 : 18, fontWeight: 800,
                  color: active === d.id ? '#fff' : BS.text,
                  flexShrink: 0,
                }}>{d.icon}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 18, fontWeight: 700 }}>{d.name}</div>
                  <div style={{
                    fontSize: 12, color: active === d.id ? 'rgba(255,255,255,0.6)' : BS.muted,
                    marginTop: 2,
                  }}>{d.services.length} sub-services</div>
                </div>
                <span style={{
                  fontSize: 18, color: active === d.id ? BS.accent : BS.muted2,
                  transform: active === d.id ? 'translateX(2px)' : 'none', transition: 'all 0.18s',
                }}>→</span>
              </button>
            ))}
          </div>
          <div style={{
            background: BS.bg2, border: `1px solid ${BS.border}`, borderRadius: 24, overflow: 'hidden',
          }}>
            <div style={{ aspectRatio: '16 / 8', position: 'relative' }}>
              <Placeholder
                kind={active === 'arch' ? 'render' : active === 'struct' ? 'section' : active === 'mep' ? 'detail' : active === 'clash' ? 'wireframe' : active === '4d' ? 'plan' : 'detail'}
                tone="dark"
                label={`${current.name.toUpperCase()} · SAMPLE`}
              />
            </div>
            <div style={{ padding: 36 }}>
              <h3 style={{ ...bsStyles.display, fontSize: 36, margin: 0, marginBottom: 14 }}>{current.name}</h3>
              <p style={{ fontSize: 16, color: BS.text2, lineHeight: 1.6, margin: 0, marginBottom: 24 }}>{current.detail}</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {current.services.map(s => (
                  <span key={s} style={{
                    padding: '6px 12px', background: BS.bg3, borderRadius: 999,
                    fontSize: 12, fontWeight: 600, color: BS.text,
                  }}>{s}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BimLodLadder() {
  const [hover, setHover] = React.useState(null);
  const { w } = useViewport();
  return (
    <section style={{ padding: pick(w, '120px 0', '72px 0'), background: BS.bg3 }}>
      <div style={bsStyles.container}>
        <SectionHeader
          eyebrow="Level of Development"
          title={<>From massing to<br /><span style={{ color: BS.accent }}>as-built.</span></>}
          align="split"
          lede="We deliver any LOD — but match it to your phase. Hover for what's included."
        />
        <div style={{ display: 'grid', gridTemplateColumns: pick(w, 'repeat(6, 1fr)', 'repeat(3, 1fr)', 'repeat(2, 1fr)'), gap: 12 }}>
          {LOD_LADDER.map((l, i) => (
            <div key={l.lod}
              onMouseEnter={() => setHover(l.lod)} onMouseLeave={() => setHover(null)}
              style={{
                background: hover === l.lod ? BS.text : BS.bg2,
                color: hover === l.lod ? BS.bg : BS.text,
                borderRadius: 18, padding: pick(w, 24, 18), border: `1px solid ${BS.border}`,
                cursor: 'pointer', transition: 'all 0.18s', minHeight: pick(w, 200, 160),
                display: 'flex', flexDirection: 'column',
              }}>
              <div style={{
                ...bsStyles.display, fontSize: fs(40, 56), color: hover === l.lod ? BS.accent : BS.text,
                marginBottom: 8, fontWeight: 800,
              }}>{l.lod}</div>
              <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 10 }}>{l.name}</div>
              <div style={{
                fontSize: 12.5, lineHeight: 1.55,
                color: hover === l.lod ? 'rgba(255,255,255,0.7)' : BS.text2,
              }}>{l.d}</div>
              <div style={{
                marginTop: 'auto', paddingTop: 14,
                fontSize: 10, fontWeight: 700, letterSpacing: '0.08em',
                color: hover === l.lod ? BS.accent : BS.muted,
                fontFamily: '"JetBrains Mono", monospace',
              }}>STEP {String(i+1).padStart(2,'0')} / 06</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BimSoftware() {
  const { w } = useViewport();
  return (
    <section style={{ padding: pick(w, '120px 0', '72px 0') }}>
      <div style={bsStyles.container}>
        <SectionHeader
          eyebrow="Software stack"
          title={<>Authoring &amp; coordination<br />in your tools.</>}
          align="split"
          lede="We work in your software, on your standards. Pick a tool below and we'll match your office's setup."
        />
        <div style={{ display: 'grid', gridTemplateColumns: pick(w, 'repeat(4, 1fr)', 'repeat(2, 1fr)'), gap: 16 }}>
          {SOFTWARE.map(([name, desc], i) => (
            <div key={name} style={{
              background: BS.bg2, border: `1px solid ${BS.border}`,
              borderRadius: 18, padding: '28px 22px',
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 10,
                background: BS.bg3, display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 18,
              }}>
                <div style={{ width: 22, height: 22, background: BS.accent, borderRadius: 6, transform: i % 2 === 0 ? 'rotate(45deg)' : 'none' }} />
              </div>
              <div style={{ fontSize: 16, fontWeight: 700, marginBottom: 6 }}>{name}</div>
              <div style={{ fontSize: 13, color: BS.muted, lineHeight: 1.5 }}>{desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BimFeatured() {
  const { w } = useViewport();
  return (
    <section style={{ padding: pick(w, '120px 0', '72px 0'), background: BS.bgDark, color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', bottom: -200, left: -100, width: 500, height: 500, borderRadius: '50%',
        background: BS.accent, opacity: 0.10, filter: 'blur(80px)',
      }} />
      <div style={{ ...bsStyles.container, position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: pick(w, '1fr 1fr', '1fr'), gap: pick(w, 60, 36), alignItems: 'center' }}>
          <div style={{ aspectRatio: '5 / 4', borderRadius: 22, overflow: 'hidden', position: 'relative' }}>
            <Placeholder kind="wireframe" tone="dark" />
            <div style={{
              position: 'absolute', top: 18, left: 18,
              background: BS.accent, color: '#fff', padding: '6px 12px', borderRadius: 999,
              fontSize: 11, fontWeight: 700, letterSpacing: '0.04em',
            }}>FEATURED CASE</div>
          </div>
          <div>
            <div style={{ ...bsStyles.eyebrow, color: BS.accent, marginBottom: 18 }}>
              <span style={{ width: 24, height: 1, background: BS.accent }} />
              Featured capability
            </div>
            <h2 style={{ ...bsStyles.display, fontSize: fs(34, 56), margin: 0, marginBottom: 22, color: '#fff' }}>
              Federated BIM delivery
            </h2>
            <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.78)', lineHeight: 1.6, margin: 0, marginBottom: 32 }}>
              Architecture, structure and MEP modeled, federated and clash-resolved in your CDE — with weekly BCF reviews and
              twice-weekly sync calls. Most engagements run on BIM 360 / ACC. Sample case studies and native files shared after NDA.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, marginBottom: 32 }}>
              {[
                ['LOD 400', 'Capability'],
                ['Weekly', 'Clash reviews'],
                ['BIM 360', 'Common CDE'],
              ].map(([v, l], i) => (
                <div key={l} style={{
                  padding: '0 24px 0 0',
                  borderLeft: i === 0 ? 'none' : `1px solid rgba(255,255,255,0.15)`,
                  paddingLeft: i === 0 ? 0 : 24,
                }}>
                  <div style={{ ...bsStyles.display, fontSize: fs(20, 30), color: BS.accent, marginBottom: 6, whiteSpace: 'nowrap' }}>{v}</div>
                  <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>{l}</div>
                </div>
              ))}
            </div>
            <a href="/project-samples" style={{
              ...bsStyles.btnAccent, padding: '14px 24px',
            }}>See project samples <ArrowIcon /></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function BimPage() {
  return (
    <Page currentPage="bim">
      <BimHero />
      <BimDisciplines />
      <BimLodLadder />
      <BimSoftware />
      <BimFeatured />
      <B3CTA kicker="Ready for" highlight="BIM" after="that ships?" lede="Send us a single floor or your most painful as-built. We'll scope, quote and model — usually within 72 hours." />
    </Page>
  );
}

window.BimPage = BimPage;