/* =========================================================
   SCG Growth Partners — shared chrome, primitives, icons
   ========================================================= */
const { useState, useEffect, useRef } = React;

/* ---------- RESPONSIVE HOOK ---------- */
function useIsMobile(bp = 768) {
  const [m, setM] = useState(() => window.innerWidth < bp);
  useEffect(() => {
    const h = () => setM(window.innerWidth < bp);
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, [bp]);
  return m;
}

/* ---------- ICONS ---------- */
const Icon = {
  ArrowRight:  (p) => <svg className="lc" viewBox="0 0 24 24" width={p.size||18} height={p.size||18}><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  ArrowUpRight:(p) => <svg className="lc" viewBox="0 0 24 24" width={p.size||18} height={p.size||18}><path d="M7 17 17 7M8 7h9v9"/></svg>,
  Check:       (p) => <svg className="lc" viewBox="0 0 24 24" width={p.size||18} height={p.size||18}><polyline points="20 6 9 17 4 12"/></svg>,
  Chevron:     (p) => <svg className="lc" viewBox="0 0 24 24" width={p.size||16} height={p.size||16}><polyline points="9 18 15 12 9 6"/></svg>,
  ChevronDown: (p) => <svg className="lc" viewBox="0 0 24 24" width={p.size||16} height={p.size||16}><polyline points="6 9 12 15 18 9"/></svg>,
  Mail:        (p) => <svg className="lc" viewBox="0 0 24 24" width={p.size||18} height={p.size||18}><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>,
  Trending:    (p) => <svg className="lc" viewBox="0 0 24 24" width={p.size||18} height={p.size||18}><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>,
  Users:       (p) => <svg className="lc" viewBox="0 0 24 24" width={p.size||18} height={p.size||18}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
  Workflow:    (p) => <svg className="lc" viewBox="0 0 24 24" width={p.size||18} height={p.size||18}><rect x="3" y="3" width="8" height="8" rx="1"/><rect x="13" y="13" width="8" height="8" rx="1"/><path d="M11 7h4a2 2 0 0 1 2 2v4"/></svg>,
  Compass:     (p) => <svg className="lc" viewBox="0 0 24 24" width={p.size||18} height={p.size||18}><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>,
  Shield:      (p) => <svg className="lc" viewBox="0 0 24 24" width={p.size||18} height={p.size||18}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>,
  Sparkline:   (p) => <svg className="lc" viewBox="0 0 24 24" width={p.size||18} height={p.size||18}><path d="M3 17l6-6 4 4 8-8"/></svg>,
  Quote:       (p) => <svg viewBox="0 0 24 24" width={p.size||24} height={p.size||24} fill="currentColor"><path d="M7 7h4v4H8v4H5V11c0-2.2 0-4 2-4zm9 0h4v4h-3v4h-3V11c0-2.2 0-4 2-4z"/></svg>,
  Phone:       (p) => <svg className="lc" viewBox="0 0 24 24" width={p.size||18} height={p.size||18}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>,
  MapPin:      (p) => <svg className="lc" viewBox="0 0 24 24" width={p.size||18} height={p.size||18}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
  Menu:        (p) => <svg className="lc" viewBox="0 0 24 24" width={p.size||22} height={p.size||22}><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>,
  X:           (p) => <svg className="lc" viewBox="0 0 24 24" width={p.size||22} height={p.size||22}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>,
};

/* ---------- 5-bar logo motif ---------- */
function Bars({ w=160, color='var(--accent)', opacity=1 }) {
  const heights = [0.32, 0.5, 0.68, 0.84, 1];
  return (
    <svg viewBox="0 0 100 60" width={w} style={{display:'block', opacity}}>
      {heights.map((h,i)=>(
        <rect key={i} x={i*18+4} y={60-h*52} width={12} height={h*52} fill={color}/>
      ))}
    </svg>
  );
}

/* ---------- BUTTON ---------- */
function Button({ kind='primary', size='md', children, onClick, icon, iconRight, type='button', href, full }) {
  const sizes = {
    sm: { padding:'7px 12px', fontSize:13 },
    md: { padding:'10px 18px', fontSize:14 },
    lg: { padding:'14px 22px', fontSize:15 },
  };
  const kinds = {
    primary:          { background:'var(--accent)', color:'#fff', border:'1px solid var(--accent)' },
    secondary:        { background:'var(--bone)', color:'var(--fg-1)', border:'1px solid var(--slate-200)' },
    ghost:            { background:'transparent', color:'var(--fg-1)', border:'1px solid transparent' },
    inverse:          { background:'var(--ink)', color:'var(--paper)', border:'1px solid var(--ink)' },
    inverseSecondary: { background:'transparent', color:'var(--paper)', border:'1px solid rgba(244,241,236,0.3)' },
  };
  const hoverShift = {
    primary:'var(--accent-hover)', secondary:'var(--paper-2)', ghost:'var(--paper-2)',
    inverse:'var(--slate-900)', inverseSecondary:'rgba(244,241,236,0.08)',
  };
  const [hover, setHover] = useState(false);
  const Tag = href ? 'a' : 'button';
  return (
    <Tag type={href?undefined:type} href={href} onClick={onClick}
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{
        ...sizes[size], ...kinds[kind],
        ...(hover ? {background:hoverShift[kind]} : {}),
        fontFamily:'var(--font-sans)', fontWeight:600, lineHeight:1,
        borderRadius:'var(--r-2)', cursor:'pointer',
        display: full?'flex':'inline-flex', width: full?'100%':undefined,
        alignItems:'center', justifyContent:'center', gap:8,
        transition:'background var(--dur-fast) var(--ease-out)',
        whiteSpace:'nowrap', textDecoration:'none', boxSizing:'border-box',
      }}>
      {icon}{children}{iconRight}
    </Tag>
  );
}

function Eyebrow({ children, color='var(--accent)' }) {
  return <div style={{fontSize:12, letterSpacing:'0.12em', textTransform:'uppercase', fontWeight:600, color, fontFamily:'var(--font-sans)'}}>{children}</div>;
}

function Card({ children, padding=32, hover=false, style={} }) {
  const [h, setH] = useState(false);
  return (
    <div onMouseEnter={()=>hover&&setH(true)} onMouseLeave={()=>hover&&setH(false)}
      style={{background:'var(--bone)', border:'1px solid var(--border-1)', borderRadius:'var(--r-3)', padding, boxShadow:h?'var(--shadow-2)':'var(--shadow-1)', transition:'box-shadow var(--dur-base) var(--ease-out)', ...style}}>
      {children}
    </div>
  );
}

function BrandLockup({ small, invert }) {
  return <img src="assets/logo-full.png" alt="SCG Growth Partners" style={{height:small?28:44, width:'auto', display:'block', filter:invert?'invert(1)':'none'}}/>;
}

/* ---------- NAV ---------- */
const NAV_LINKS = [
  { id:'home',    label:'Home',    href:'/' },
  { id:'about',   label:'About',   href:'/about' },
  { id:'contact', label:'Contact', href:'/contact' },
];

function Nav({ current }) {
  const isMobile = useIsMobile();
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <div style={{position:'sticky', top:0, zIndex:40, background:'rgba(244,241,236,0.92)', backdropFilter:'blur(16px)', WebkitBackdropFilter:'blur(16px)', borderBottom:'1px solid var(--border-1)'}}>
      <div style={{maxWidth:'var(--content-max)', margin:'0 auto', padding:isMobile?'0 20px':'0 32px', height:isMobile?60:84, display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <a href="/" style={{border:'none'}}><BrandLockup small={isMobile}/></a>

        {isMobile ? (
          <button onClick={()=>setMenuOpen(o=>!o)} aria-label="Toggle menu"
            style={{background:'none', border:'none', cursor:'pointer', padding:8, color:'var(--ink)', display:'flex', alignItems:'center'}}>
            {menuOpen ? <Icon.X size={22}/> : <Icon.Menu size={22}/>}
          </button>
        ) : (
          <>
            <nav style={{display:'flex', gap:32}}>
              {NAV_LINKS.map(l=>(
                <a key={l.id} href={l.href} style={{fontSize:14, fontWeight:500, color:current===l.id?'var(--fg-1)':'var(--fg-3)', textDecoration:'none', borderBottom:current===l.id?'1px solid var(--ink)':'1px solid transparent', paddingBottom:2, transition:'color var(--dur-fast) var(--ease-out)'}}>{l.label}</a>
              ))}
            </nav>
            <Button kind="primary" size="sm" href="/contact" iconRight={<Icon.ArrowRight size={14}/>}>Book a call</Button>
          </>
        )}
      </div>

      {isMobile && menuOpen && (
        <div style={{borderTop:'1px solid var(--border-1)', background:'rgba(244,241,236,0.98)', backdropFilter:'blur(16px)', padding:'4px 20px 24px'}}>
          {NAV_LINKS.map(l=>(
            <a key={l.id} href={l.href} onClick={()=>setMenuOpen(false)}
              style={{display:'block', padding:'16px 0', fontSize:18, fontWeight:current===l.id?600:400, color:current===l.id?'var(--fg-1)':'var(--fg-2)', textDecoration:'none', border:'none', borderBottom:'1px solid var(--border-2)'}}>{l.label}</a>
          ))}
          <div style={{marginTop:20}}>
            <Button kind="primary" size="md" href="/contact" full iconRight={<Icon.ArrowRight size={14}/>}>Book a call</Button>
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------- FOOTER ---------- */
function Footer() {
  const isMobile = useIsMobile();
  return (
    <footer style={{background:'var(--ink)', color:'var(--paper)', marginTop:isMobile?64:96}}>
      <div style={{maxWidth:'var(--content-max)', margin:'0 auto', padding:isMobile?'48px 20px 32px':'72px 32px 40px'}}>
        <div style={{display:'grid', gridTemplateColumns:isMobile?'1fr 1fr':'2fr 1fr 1fr 1fr', gap:isMobile?32:48, marginBottom:isMobile?40:64}}>
          <div style={{gridColumn:isMobile?'1 / -1':undefined}}>
            <img src="assets/logo-full.png" alt="SCG Growth Partners" style={{height:36, filter:'invert(1)', marginBottom:18}}/>
            <p style={{fontSize:14, color:'rgba(244,241,236,0.7)', lineHeight:1.6, maxWidth:320}}>
              Sales advisory for founders scaling from $1M to $50M. We help you build outbound pipeline, hire the team, and run the system.
            </p>
            <div style={{marginTop:28, display:'flex', gap:16, alignItems:'center'}}>
              <Bars w={64} color="rgba(244,241,236,0.55)"/>
              <div style={{fontFamily:'var(--font-mono)', fontSize:11, color:'rgba(244,241,236,0.45)', letterSpacing:'0.08em'}}>NEW YORK · LOS ANGELES</div>
            </div>
          </div>
          {[
            { h:'Practice', items:['BDR Build & Scale','Sales Enablement','AE Onboarding','RevOps','Outbound Tech Stack'] },
            { h:'Firm', items:[{l:'About',href:'/about'},{l:'Contact',href:'/contact'}] },
            { h:'Get in touch', items:['sam@scggrowth.com','New York · Los Angeles'] },
          ].map((c,i)=>(
            <div key={i}>
              <h5 style={{fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase', color:'rgba(244,241,236,0.55)', fontWeight:600, marginBottom:14}}>{c.h}</h5>
              {c.items.map((it,j)=>{
                const obj=typeof it==='string'?{l:it}:it;
                return obj.href
                  ? <a key={j} href={obj.href} style={{display:'block', fontSize:13, color:'rgba(244,241,236,0.85)', padding:'4px 0', textDecoration:'none', border:'none'}}>{obj.l}</a>
                  : <div key={j} style={{fontSize:13, color:'rgba(244,241,236,0.85)', padding:'4px 0'}}>{obj.l}</div>;
              })}
            </div>
          ))}
        </div>
        <div style={{borderTop:'1px solid rgba(244,241,236,0.12)', paddingTop:24, display:'flex', flexDirection:isMobile?'column':'row', justifyContent:'space-between', fontSize:12, color:'rgba(244,241,236,0.5)', gap:8}}>
          <div>© 2026 SCG Growth Partners. All rights reserved.</div>
          <div style={{display:'flex', gap:24}}><span>Privacy</span><span>Terms</span></div>
        </div>
      </div>
    </footer>
  );
}

/* ---------- SHARED CONSTANTS ---------- */
const PROOF = [
  { num:'8 → 40+', cap:'BDRs scaled in one fiscal year' },
  { num:'20×',     cap:'Revenue growth from sourced pipeline' },
  { num:'5,000+',  cap:'Meetings booked under our leadership' },
  { num:'$140M+',  cap:'Attributed revenue generated' },
];

const SERVICES = [
  { id:'bdr',    icon:<Icon.Users/>,    name:'BDR Org Build & Scale',         tagline:'Hire, ramp, and operate a BDR org that compounds.' },
  { id:'enable', icon:<Icon.Workflow/>, name:'Sales Enablement & Onboarding', tagline:'A documented onboarding path for AEs and BDRs.' },
  { id:'pipe',   icon:<Icon.Trending/>, name:'Pipeline Generation System',    tagline:'Activity to meetings to pipeline math, instrumented weekly.' },
  { id:'frac',   icon:<Icon.Shield/>,   name:'Fractional Sales Leadership',   tagline:'A senior operator embedded in your business.' },
  { id:'revops', icon:<Icon.Sparkline/>,name:'RevOps',                        tagline:'Stack audit, tooling rationalization, and reporting.' },
  { id:'audit',  icon:<Icon.Compass/>,  name:'GTM Diagnostic / Sales Audit',  tagline:'A two-week diagnostic. We tell you what is broken.' },
];

Object.assign(window, { Icon, Bars, Button, Eyebrow, Card, BrandLockup, Nav, Footer, PROOF, SERVICES, useIsMobile });