// Shared components for BIMACE homepage variants
// Architecture-flavored placeholders + base utilities

const BRAND = {
  cream: '#f5f3ee',
  cream2: '#ece8e1',
  ink: '#1a1a1a',
  ink2: '#2b2b2b',
  muted: '#6b6b66',
  muted2: '#9c9990',
  line: '#d8d4cc',
  line2: '#e6e2d9',
  accent: '#2d4a3e',
  accent2: '#3d6b58',
  accentLight: '#a8bbb0',
};

// Generic architectural placeholder — variants:
//   "wireframe" — isometric/elevation lines on cream
//   "render"    — soft striped gradient suggesting a rendered view
//   "plan"      — top-down floor plan grid
//   "section"   — section/elevation lines
//   "person"    — portrait silhouette placeholder
function Placeholder({ kind = 'render', label, tone = 'cream', style = {}, children }) {
  const isDark = tone === 'dark' || tone === 'tech' || tone === 'green';
  const bg = tone === 'dark' ? BRAND.ink2
    : tone === 'tech' ? '#0f1218'
    : tone === 'green' ? BRAND.accent
    : tone === 'light' ? '#eef1f6'
    : tone === 'white' ? '#f6f7f9'
    : BRAND.cream2;
  const fg = isDark ? 'rgba(255,255,255,.42)' : 'rgba(15,23,42,.30)';
  const fgStrong = isDark ? 'rgba(255,255,255,.68)' : 'rgba(15,23,42,.55)';
  const labelColor = isDark ? 'rgba(255,255,255,.55)' : 'rgba(15,23,42,.45)';

  let pattern = null;
  if (kind === 'wireframe') {
    // Isometric wireframe building
    pattern = (
      <svg width="100%" height="100%" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0 }}>
        <defs>
          <pattern id="isogrid" width="40" height="23" patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
            <path d="M 0 11.5 L 20 0 L 40 11.5 L 20 23 Z" fill="none" stroke={fg} strokeWidth="0.4" />
          </pattern>
        </defs>
        <rect width="400" height="300" fill={bg} />
        <rect width="400" height="300" fill="url(#isogrid)" opacity="0.5" />
        {/* Building mass */}
        <g stroke={fgStrong} strokeWidth="0.8" fill="none">
          <path d="M 120 200 L 200 160 L 280 200 L 280 100 L 200 60 L 120 100 Z" />
          <path d="M 120 200 L 120 100" />
          <path d="M 200 160 L 200 60" />
          <path d="M 280 200 L 280 100" />
          {/* Floors */}
          <path d="M 120 180 L 200 140 L 280 180" />
          <path d="M 120 160 L 200 120 L 280 160" />
          <path d="M 120 140 L 200 100 L 280 140" />
          <path d="M 120 120 L 200 80 L 280 120" />
          {/* Vertical mullions */}
          <path d="M 140 192 L 140 92" opacity=".5" />
          <path d="M 160 184 L 160 84" opacity=".5" />
          <path d="M 180 176 L 180 76" opacity=".5" />
          <path d="M 220 152 L 220 68" opacity=".5" />
          <path d="M 240 144 L 240 76" opacity=".5" />
          <path d="M 260 136 L 260 84" opacity=".5" />
        </g>
      </svg>
    );
  } else if (kind === 'plan') {
    pattern = (
      <svg width="100%" height="100%" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0 }}>
        <defs>
          <pattern id="plangrid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke={fg} strokeWidth="0.3" />
          </pattern>
        </defs>
        <rect width="400" height="300" fill={bg} />
        <rect width="400" height="300" fill="url(#plangrid)" opacity="0.6" />
        {/* Walls / rooms */}
        <g stroke={fgStrong} strokeWidth="1.2" fill="none">
          <rect x="60" y="60" width="280" height="180" />
          <line x1="180" y1="60" x2="180" y2="160" />
          <line x1="60" y1="160" x2="280" y2="160" />
          <line x1="280" y1="60" x2="280" y2="240" />
          <line x1="180" y1="200" x2="340" y2="200" />
          {/* Door swings */}
          <path d="M 175 160 A 15 15 0 0 1 160 145" />
          <path d="M 260 200 A 15 15 0 0 1 275 215" />
          {/* Furniture hints */}
          <rect x="80" y="80" width="40" height="20" opacity=".6" />
          <rect x="200" y="80" width="60" height="30" opacity=".6" />
          <circle cx="120" cy="200" r="12" opacity=".6" />
        </g>
      </svg>
    );
  } else if (kind === 'section') {
    pattern = (
      <svg width="100%" height="100%" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0 }}>
        <rect width="400" height="300" fill={bg} />
        <g stroke={fgStrong} strokeWidth="0.7" fill="none">
          {/* Section cut of building */}
          <line x1="40" y1="260" x2="360" y2="260" strokeWidth="1.5" />
          <rect x="80" y="100" width="240" height="160" />
          {/* Floors */}
          <line x1="80" y1="140" x2="320" y2="140" />
          <line x1="80" y1="180" x2="320" y2="180" />
          <line x1="80" y1="220" x2="320" y2="220" />
          {/* Roof */}
          <path d="M 60 100 L 200 60 L 340 100" />
          {/* Windows */}
          {[0, 1, 2].map((row) => (
            [110, 150, 190, 230, 270].map((x, i) => (
              <rect key={`${row}-${i}`} x={x} y={110 + row * 40} width="20" height="20" opacity=".6" />
            ))
          ))}
          {/* Door */}
          <rect x="190" y="220" width="20" height="40" />
          {/* Dim lines */}
          <line x1="40" y1="280" x2="360" y2="280" strokeWidth="0.3" />
          <line x1="40" y1="275" x2="40" y2="285" strokeWidth="0.3" />
          <line x1="360" y1="275" x2="360" y2="285" strokeWidth="0.3" />
        </g>
      </svg>
    );
  } else if (kind === 'render') {
    // Soft gradient render placeholder
    pattern = (
      <svg width="100%" height="100%" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0 }}>
        <defs>
          <linearGradient id={`rgrad-${tone}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor={
              tone === 'dark' ? '#3a3a36'
              : tone === 'tech' ? '#1e293b'
              : tone === 'green' ? '#3d6b58'
              : tone === 'light' ? '#e3e8f0'
              : tone === 'white' ? '#eef1f5'
              : '#e8e3d6'} />
            <stop offset="0.6" stopColor={
              tone === 'dark' ? '#2a2a26'
              : tone === 'tech' ? '#111827'
              : tone === 'green' ? '#2d4a3e'
              : tone === 'light' ? '#cfd6e3'
              : tone === 'white' ? '#d8dde5'
              : '#ddd6c4'} />
            <stop offset="1" stopColor={
              tone === 'dark' ? '#1f1f1c'
              : tone === 'tech' ? '#0b0f17'
              : tone === 'green' ? '#234038'
              : tone === 'light' ? '#b9c2d2'
              : tone === 'white' ? '#c3c9d2'
              : '#cfc7b3'} />
          </linearGradient>
        </defs>
        <rect width="400" height="300" fill={`url(#rgrad-${tone})`} />
        {/* Architectural silhouette */}
        <g fill={fg} opacity=".5">
          <rect x="60" y="160" width="80" height="120" />
          <rect x="140" y="100" width="120" height="180" />
          <rect x="260" y="140" width="60" height="140" />
          <rect x="320" y="180" width="40" height="100" />
        </g>
        <g fill={fgStrong} opacity=".25">
          {[0,1,2,3,4].map(r => [0,1,2,3].map(c => (
            <rect key={`${r}-${c}`} x={155 + c*25} y={115 + r*30} width="12" height="18" />
          )))}
        </g>
        <line x1="0" y1="280" x2="400" y2="280" stroke={fgStrong} strokeWidth="0.5" opacity=".5" />
      </svg>
    );
  } else if (kind === 'person') {
    pattern = (
      <svg width="100%" height="100%" viewBox="0 0 200 240" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0 }}>
        <defs>
          <linearGradient id={`pgrad-${tone}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#ddd6c4" />
            <stop offset="1" stopColor="#c4bca5" />
          </linearGradient>
        </defs>
        <rect width="200" height="240" fill={`url(#pgrad-${tone})`} />
        <circle cx="100" cy="95" r="38" fill={fg} opacity=".6" />
        <path d="M 30 240 Q 30 165 100 160 Q 170 165 170 240 Z" fill={fg} opacity=".6" />
      </svg>
    );
  } else if (kind === 'detail') {
    // BIM detail / construction document feel
    pattern = (
      <svg width="100%" height="100%" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0 }}>
        <rect width="400" height="300" fill={bg} />
        <g stroke={fgStrong} strokeWidth="0.6" fill="none">
          {/* Hatch */}
          <pattern id="hatch1" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
            <line x1="0" y1="0" x2="0" y2="6" stroke={fg} strokeWidth="0.4" />
          </pattern>
          <rect x="80" y="80" width="240" height="140" />
          <rect x="100" y="100" width="60" height="100" fill="url(#hatch1)" />
          <rect x="240" y="100" width="60" height="100" fill="url(#hatch1)" />
          <rect x="160" y="130" width="80" height="70" />
          {/* Annotations */}
          <line x1="50" y1="80" x2="80" y2="80" />
          <circle cx="50" cy="80" r="6" />
          <line x1="50" y1="220" x2="80" y2="220" />
          <circle cx="50" cy="220" r="6" />
        </g>
      </svg>
    );
  }

  return (
    <div style={{
      position: 'relative',
      width: '100%',
      height: '100%',
      overflow: 'hidden',
      background: bg,
      ...style,
    }}>
      {pattern}
      {label && (
        <div style={{
          position: 'absolute',
          left: 12,
          bottom: 10,
          fontFamily: '"JetBrains Mono", monospace',
          fontSize: 10,
          letterSpacing: '0.08em',
          color: labelColor,
          textTransform: 'uppercase',
        }}>{label}</div>
      )}
      {children}
    </div>
  );
}

// Animated stat counter — fires when scrolled into view
function StatCounter({ value, suffix = '', duration = 1600, style = {} }) {
  const [n, setN] = React.useState(0);
  const ref = React.useRef(null);
  const started = React.useRef(false);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const tick = (start, t0) => {
      const t = (performance.now() - t0) / duration;
      if (t >= 1) { setN(value); return; }
      const eased = 1 - Math.pow(1 - t, 3);
      setN(Math.round(value * eased));
      requestAnimationFrame(() => tick(start, t0));
    };
    const start = () => {
      if (started.current) return;
      started.current = true;
      requestAnimationFrame(() => tick(0, performance.now()));
    };
    // Try IntersectionObserver but also fire immediately if already visible
    // (the design-canvas may keep artboards in view)
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) start(); });
    }, { threshold: 0.2 });
    io.observe(el);
    // Fallback: start after a short delay if not yet started
    const fallback = setTimeout(start, 800);
    return () => { io.disconnect(); clearTimeout(fallback); };
  }, [value, duration]);

  return <span ref={ref} style={style}>{n}{suffix}</span>;
}

// Cursor-following spotlight on hero — restricted to its container
function CursorSpotlight({ color = 'rgba(45, 74, 62, 0.18)', size = 380 }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const parent = el.parentElement;
    if (!parent) return;
    const onMove = (e) => {
      const rect = parent.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      el.style.setProperty('--mx', `${x}px`);
      el.style.setProperty('--my', `${y}px`);
      el.style.opacity = '1';
    };
    const onLeave = () => { el.style.opacity = '0'; };
    parent.addEventListener('mousemove', onMove);
    parent.addEventListener('mouseleave', onLeave);
    return () => {
      parent.removeEventListener('mousemove', onMove);
      parent.removeEventListener('mouseleave', onLeave);
    };
  }, []);
  return (
    <div ref={ref} style={{
      position: 'absolute',
      inset: 0,
      pointerEvents: 'none',
      background: `radial-gradient(${size}px circle at var(--mx, 50%) var(--my, 50%), ${color}, transparent 70%)`,
      opacity: 0,
      transition: 'opacity 0.4s ease',
      mixBlendMode: 'multiply',
    }} />
  );
}

const SERVICES = [
  { id: 'cad-to-bim', name: 'CAD / PDF to BIM', tagline: 'Sketch · PDF · DWG → 3D BIM', detail: 'Convert legacy drawings to fully parametric Revit, ArchiCAD or SketchUp models with LOD 100–500.' },
  { id: 'design', name: 'Design Services', tagline: 'Concept · Schematic · DD', detail: 'From early concept sketches to design development and tender-ready packages.' },
  { id: 'visualization', name: 'Visualization', tagline: 'SketchUp · 3DS Max · Lumion', detail: 'Photo-real renders, walkthroughs and VR for stakeholder buy-in.' },
  { id: 'draughting', name: 'Drafting & Tracing', tagline: 'CAD draughting · as-builts', detail: 'Precision CAD drafting, tracing of old as-built drawings and Google-Earth digitization.' },
  { id: 'docs', name: 'Documentation', tagline: 'Permit · CDs · As-built', detail: 'Permit sets, construction drawings and red-line as-builts to local code.' },
  { id: 'bim', name: 'BIM Coordination', tagline: 'MEP · Clash · 4D Sim', detail: 'Federated models, Navisworks clash detection, 4D sequencing and full BIM execution plans.' },
];

// Projects taken from the live site. Most of the live-site gallery
// is unnamed (file IDs only); we surface the named ones and label the
// rest as confidential samples on request.
const PROJECTS = [
  { id: 'p1', title: 'Civic Complex',         cat: 'BIM Modeling',     loc: 'Confidential', img: 'portfolios/Portfolio-1.jpg' },
  { id: 'p2', title: 'Commercial Tower',      cat: 'BIM Modeling',     loc: 'Confidential', img: 'portfolios/Portfolio-2.jpg' },
  { id: 'p3', title: 'Mixed-Use Development', cat: 'BIM Coordination', loc: 'Confidential', img: 'portfolios/Portfolio-3.jpg' },
  { id: 'p4', title: 'Office Building',       cat: 'CAD → BIM',        loc: 'Confidential', img: 'portfolios/Portfolio-4.jpg' },
  { id: 'p5', title: 'Floor Plan — LOD 400',  cat: 'CAD Documentation',loc: 'Confidential', img: 'portfolios/Portfolio-5.jpg' },
  { id: 'p6', title: 'Construction Details',  cat: 'CAD Documentation',loc: 'Confidential', img: 'portfolios/Portfolio-6.jpg' },
  { id: 'p7', title: 'Residential Villa',     cat: 'Visualization',    loc: 'Confidential', img: 'portfolios/Portfolio-7.jpg' },
];

const TEAM = [
  { name: 'Amit Sharma', role: 'BIM Lead · Autodesk Certified', bio: 'Amity University graduate. 12+ years coordinating Revit projects across North America and the Gulf.' },
  { name: 'Hirdesh Kumar', role: 'Principal Architect', bio: '20+ years in architectural studios; expertise spans interior, mixed-use and large-scale projects.' },
  { name: 'Alok Kumar', role: 'Design Architect', bio: 'GCA Lucknow. Residential, commercial, healthcare and hospitality across four continents.' },
  { name: 'Sonal Kathuria', role: 'Revit Specialist', bio: 'Amity-trained Autodesk Certified Professional. Owns CAD-to-BIM workflows end-to-end.' },
];

const PROCESS = [
  { n: '01', t: 'Brief & feasibility', d: 'NDAs, scope, sample files. We respond within four business hours and quote within one day.' },
  { n: '02', t: 'Pilot batch', d: 'A representative slice — one floor, one trade — delivered in 48–72 hours so you can validate the standard.' },
  { n: '03', t: 'Production', d: 'Daily PDF status pins on Slack or email. Twice-weekly model sync. Your standards, our hands.' },
  { n: '04', t: 'QA & handover', d: 'Internal model review, clash-free deliverable, native files + sheets, archive bundle. Minor revisions at no charge.' },
];

// Client list taken from logo strip on live site footer.
const CLIENTS = ['BECHTEL', 'T-MOBILE', 'SPRINT', 'MOBILITIE', 'M-SQUARED', 'STRUKTUR STUDIO', 'VCA'];

const WHY = [
  { k: 'Cost-effective', d: 'Indian rates, US/UK quality benchmarks. Hourly, project or lump-sum.', stat: 'up to 60%', statLabel: 'cost reduction' },
  { k: 'Flexible engagement', d: 'Spin up a single drafter or a 20-person studio. Scale down just as easily.', stat: '24 hrs', statLabel: 'avg. ramp-up' },
  { k: 'Transparent reporting', d: 'Daily status pins, weekly sync calls, model versioning on your hand-off platform.', stat: 'daily', statLabel: 'status updates' },
  { k: 'Outsourcing fluency', d: '12+ years calibrating to US, UK, Australia and KSA delivery standards.', stat: '12 yrs', statLabel: 'in outsourcing' },
];

// Expose to global scope so other Babel scripts can use them
Object.assign(window, {
  BRAND, Placeholder, StatCounter, CursorSpotlight,
  SERVICES, PROJECTS, TEAM, PROCESS, CLIENTS, WHY,
});