// V3 Bold Studio — Design System
// Tokens, nav, footer, reusable section primitives for the multi-page site.
// Off-white + brand orange · Plus Jakarta Sans

const BS = {
  bg: '#fafaf7',
  bg2: '#ffffff',
  bg3: '#f1ede4',
  bgDark: '#181513',
  text: '#181513',
  text2: '#4a4540',
  muted: '#82786f',
  muted2: '#aea69c',
  border: '#e8e2d5',
  border2: '#d4ccbf',
  accent: '#f37735',         // brand orange (matches logo)
  accentSoft: '#fde6d4',
  accentDark: '#c85a1f',
};

const bsStyles = {
  page: {
    fontFamily: '"Plus Jakarta Sans", -apple-system, sans-serif',
    color: BS.text,
    background: BS.bg,
    minHeight: '100vh',
    letterSpacing: '-0.005em',
  },
  container: { maxWidth: 1280, margin: '0 auto', padding: '0 56px' },
  display: { fontFamily: '"Plus Jakarta Sans", sans-serif', fontWeight: 700, letterSpacing: '-0.035em', lineHeight: 1.0 },
  eyebrow: {
    fontSize: 12, fontWeight: 700, letterSpacing: '0.10em', textTransform: 'uppercase',
    color: BS.accent, display: 'inline-flex', alignItems: 'center', gap: 8,
  },
  btnPrimary: {
    background: BS.text, color: BS.bg,
    padding: '14px 22px', borderRadius: 999, fontSize: 14, fontWeight: 600,
    display: 'inline-flex', alignItems: 'center', gap: 10, whiteSpace: 'nowrap',
    textDecoration: 'none', border: 0, cursor: 'pointer', fontFamily: 'inherit',
  },
  btnAccent: {
    background: BS.accent, color: '#fff',
    padding: '14px 22px', borderRadius: 999, fontSize: 14, fontWeight: 600,
    display: 'inline-flex', alignItems: 'center', gap: 10, whiteSpace: 'nowrap',
    textDecoration: 'none', border: 0, cursor: 'pointer', fontFamily: 'inherit',
  },
  btnGhost: {
    background: 'transparent', color: BS.text,
    padding: '14px 22px', borderRadius: 999, fontSize: 14, fontWeight: 600,
    display: 'inline-flex', alignItems: 'center', gap: 10, whiteSpace: 'nowrap',
    textDecoration: 'none', border: `1px solid ${BS.border2}`, cursor: 'pointer', fontFamily: 'inherit',
  },
};

const NAV_LINKS = [
  { label: 'Home',          href: '/',                key: 'home' },
  { label: 'BIM',           href: '/bim',             key: 'bim' },
  { label: 'Work',          href: '/project-samples', key: 'work' },
  { label: 'Who we serve',  href: '/who-we-serve',    key: 'industries' },
  { label: 'About',         href: '/about',           key: 'about' },
  { label: 'Careers',       href: '/careers',         key: 'careers' },
  { label: 'Contact',       href: '/contact',         key: 'contact' },
];

function ArrowIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M1 7h12M8 2l5 5-5 5" stroke="currentColor" strokeWidth="1.6" />
    </svg>
  );
}

function B3Nav({ currentPage }) {
  const [scrollPct, setScrollPct] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setScrollPct(max > 0 ? Math.min(100, (h.scrollTop / max) * 100) : 0);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(250, 250, 247, 0.88)',
      backdropFilter: 'blur(14px)',
      borderBottom: `1px solid ${BS.border}`,
    }}>
      <div style={{ ...bsStyles.container, display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 76 }}>
        <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none', color: 'inherit' }}>
          <img src="logo.png" alt="BIMACE" style={{ width: 48, height: 48, borderRadius: '50%', objectFit: 'cover' }} />
        </a>
        <nav style={{ display: 'flex', gap: 28 }}>
          {NAV_LINKS.map(n => {
            const active = n.key === currentPage;
            return (
              <a key={n.key} href={n.href} style={{
                fontSize: 14, fontWeight: active ? 700 : 500,
                color: active ? BS.accent : BS.text,
                textDecoration: 'none', position: 'relative', padding: '6px 0',
              }}>
                {n.label}
                {active && <span style={{
                  position: 'absolute', left: 0, right: 0, bottom: -2, height: 2,
                  background: BS.accent, borderRadius: 1,
                }} />}
              </a>
            );
          })}
        </nav>
        <a href="/contact" style={bsStyles.btnAccent}>
          Start a project
          <span style={{
            width: 22, height: 22, borderRadius: '50%', background: '#fff',
            color: BS.accent, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M1 5h8M6 1l4 4-4 4" stroke="currentColor" strokeWidth="1.6" /></svg>
          </span>
        </a>
      </div>
      <div style={{ height: 3, background: BS.border }}>
        <div style={{ width: `${scrollPct}%`, height: '100%', background: BS.accent, transition: 'width 0.1s linear' }} />
      </div>
    </div>
  );
}

// Reusable subpage hero — small eyebrow, big headline, optional lede + image
function PageHero({ eyebrow, title, titleAccent, lede, image = 'render', imageTone = 'dark', children }) {
  return (
    <section style={{ position: 'relative', padding: '90px 0 80px', 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: '1.2fr 1fr', gap: 60, alignItems: 'center' }}>
          <div>
            <div style={{ ...bsStyles.eyebrow, marginBottom: 22 }}>
              <span style={{ width: 24, height: 1, background: BS.accent }} />
              {eyebrow}
            </div>
            <h1 style={{ ...bsStyles.display, fontSize: 96, margin: 0, marginBottom: 28 }}>
              {title}{titleAccent && <span style={{ color: BS.accent }}>{titleAccent}</span>}
            </h1>
            {lede && <p style={{ fontSize: 19, color: BS.text2, lineHeight: 1.55, margin: 0, marginBottom: 28, maxWidth: 560 }}>{lede}</p>}
            {children}
          </div>
          <div style={{
            position: 'relative', aspectRatio: '4 / 5', borderRadius: 22, overflow: 'hidden',
            transform: 'rotate(2deg)',
            boxShadow: '0 30px 70px rgba(24, 21, 19, 0.18)',
          }}>
            <Placeholder kind={image} tone={imageTone} />
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionHeader({ eyebrow, title, titleAccent, lede, align = 'left', light = false }) {
  const textColor = light ? '#fff' : BS.text;
  const eyebrowColor = light ? BS.accent : BS.accent;
  const ledeColor = light ? 'rgba(255,255,255,0.72)' : BS.text2;
  return (
    <div style={{
      display: align === 'split' ? 'grid' : 'block',
      gridTemplateColumns: align === 'split' ? '1fr 1fr' : 'none',
      gap: 60, alignItems: 'flex-end',
      textAlign: align === 'center' ? 'center' : 'left',
      marginBottom: 56,
    }}>
      <div>
        <div style={{ ...bsStyles.eyebrow, color: eyebrowColor, marginBottom: 18, justifyContent: align === 'center' ? 'center' : 'flex-start' }}>
          {align !== 'center' && <span style={{ width: 24, height: 1, background: BS.accent }} />}
          {eyebrow}
        </div>
        <h2 style={{ ...bsStyles.display, fontSize: 72, margin: 0, color: textColor }}>
          {title}{titleAccent && <span style={{ color: BS.accent }}>{titleAccent}</span>}
        </h2>
      </div>
      {lede && (
        <p style={{
          fontSize: 18, color: ledeColor, lineHeight: 1.55, margin: align === 'center' ? '24px auto 0' : 0,
          maxWidth: align === 'center' ? 640 : 'none',
        }}>{lede}</p>
      )}
    </div>
  );
}

function B3Marquee() {
  return (
    <section style={{ padding: '36px 0', background: BS.bgDark, color: '#fff', overflow: 'hidden' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 60, whiteSpace: 'nowrap' }}>
        {[...CLIENTS, ...CLIENTS].map((c, i) => (
          <React.Fragment key={i}>
            <span style={{ fontSize: 24, fontWeight: 700, letterSpacing: '0.04em', color: 'rgba(255,255,255,0.8)' }}>{c}</span>
            <span style={{ width: 8, height: 8, background: BS.accent, borderRadius: '50%', flexShrink: 0 }} />
          </React.Fragment>
        ))}
      </div>
    </section>
  );
}

function B3CTA({ kicker = "Let's", title = 'build', highlight = 'build', after = 'something together.', lede = 'Send us a single floor, a single trade, or your most painful as-built. We quote within one business day.' } = {}) {
  return (
    <section id="contact" style={{ padding: '130px 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
        width: 700, height: 700, borderRadius: '50%',
        background: BS.accentSoft, opacity: 0.5, filter: 'blur(80px)',
      }} />
      <div style={{ ...bsStyles.container, position: 'relative', textAlign: 'center' }}>
        <h2 style={{ ...bsStyles.display, fontSize: 120, margin: 0, marginBottom: 28 }}>
          {kicker} <span style={{ position: 'relative', display: 'inline-block' }}>
            {highlight}
            <svg style={{ position: 'absolute', left: '5%', right: '5%', bottom: -8, width: '90%' }} viewBox="0 0 200 12" preserveAspectRatio="none">
              <path d="M2 8 Q 50 0, 100 6 T 198 4" stroke={BS.accent} strokeWidth="4" fill="none" strokeLinecap="round" />
            </svg>
          </span><br />
          {after}
        </h2>
        <p style={{ fontSize: 19, color: BS.text2, lineHeight: 1.5, maxWidth: 600, margin: '0 auto 40px' }}>{lede}</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginBottom: 56 }}>
          <a href="mailto:mail@thebimace.com" style={{ ...bsStyles.btnAccent, padding: '18px 32px', fontSize: 16 }}>
            mail@thebimace.com
            <span style={{
              width: 26, height: 26, borderRadius: '50%', background: '#fff',
              color: BS.accent, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M1 6h10M7 2l4 4-4 4" stroke="currentColor" strokeWidth="1.6" /></svg>
            </span>
          </a>
          <a href="tel:+16314640144" style={{ ...bsStyles.btnGhost, padding: '18px 32px', fontSize: 16 }}>
            +1 (631) 464-0144
          </a>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 36, fontSize: 13, color: BS.muted, fontWeight: 500, flexWrap: 'wrap' }}>
          {['NDA on request', '4-hour response', 'Free pilot', 'ISO-aligned'].map(t => (
            <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <span style={{
                width: 18, height: 18, borderRadius: '50%', background: BS.accent,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
                  <path d="M2 5l2 2 4-4" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>
              {t}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

function B3Footer() {
  return (
    <footer style={{ background: BS.bgDark, color: 'rgba(255,255,255,0.65)', padding: '64px 0 30px' }}>
      <div style={bsStyles.container}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 40, marginBottom: 48 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
              <img src="logo.png" alt="BIMACE" style={{ width: 48, height: 48, borderRadius: '50%' }} />
            </div>
            <div style={{ fontSize: 14, lineHeight: 1.6, maxWidth: 300 }}>
              An Autodesk-certified CAD &amp; BIM outsourcing studio working with practices across the US, UK, Australia and KSA.
            </div>
          </div>
          {[
            ['Services',  [['CAD → BIM','/bim'], ['Visualization','/bim'], ['Documentation','/bim'], ['Coordination','/bim']]],
            ['Company',   [['About','/about'], ['Who we serve','/who-we-serve'], ['Work','/project-samples'], ['Careers','/careers']]],
            ['Connect',   [['mail@thebimace.com','mailto:mail@thebimace.com'], ['+1 (631) 464-0144','tel:+16314640144'], ['Contact','/contact'], ['LinkedIn','#']]],
            ['Offices',   [['New Delhi, India','#'], ['USA','#']]],
          ].map(([title, items]) => (
            <div key={title}>
              <div style={{ fontSize: 13, fontWeight: 800, color: '#fff', marginBottom: 16, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{title}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13 }}>
                {items.map(([label, href]) => (
                  <a key={label} href={href} style={{ color: 'rgba(255,255,255,0.65)', textDecoration: 'none' }}>{label}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{
          borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 22,
          display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'rgba(255,255,255,0.55)',
          flexWrap: 'wrap', gap: 12,
        }}>
          <span>© 2026 BIMACE. All rights reserved.</span>
          <span>New Delhi, India · USA</span>
          <span>Privacy · Terms · Cookies</span>
        </div>
      </div>
    </footer>
  );
}

// Page shell — wraps children with nav + footer + base page styles
function Page({ currentPage, children }) {
  return (
    <div style={bsStyles.page}>
      <B3Nav currentPage={currentPage} />
      <main>{children}</main>
      <B3Footer />
    </div>
  );
}

Object.assign(window, { BS, bsStyles, NAV_LINKS, B3Nav, B3Footer, B3CTA, B3Marquee, PageHero, SectionHeader, Page, ArrowIcon });