/* GCCReady — Shared UI primitives used across pages */

function Pill({ children, tone='navy', icon }) {
  const tones = {
    navy:  { bg:'var(--gr-navy-50)', fg:'var(--gr-navy)', bd:'var(--gr-navy-100)'},
    gold:  { bg:'var(--gr-gold-50)', fg:'var(--gr-gold-700)', bd:'var(--gr-gold-100)'},
    green: { bg:'var(--gr-green-50)', fg:'var(--gr-green)', bd:'var(--gr-green-100)'},
    dark:  { bg:'rgba(255,255,255,.08)', fg:'#fff', bd:'rgba(255,255,255,.12)'},
    teal:  { bg:'var(--gr-teal-50)', fg:'var(--gr-teal-600)', bd:'#BAE6FD'},
  };
  const t = tones[tone] || tones.navy;
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap:6,
      padding:'5px 11px', borderRadius:999,
      background:t.bg, color:t.fg, border:`1px solid ${t.bd}`,
      font:'700 12px/1 Inter', letterSpacing:'.02em',
    }}>
      {icon && <Icon name={icon} size={12}/>}
      {children}
    </span>
  );
}

function SectionTitle({ eyebrow, title, sub, align='left', invert=false, maxWidth=720 }) {
  return (
    <div style={{
      textAlign: align, marginBottom:48,
      maxWidth: align==='center' ? maxWidth : undefined,
      marginLeft: align==='center' ? 'auto' : undefined,
      marginRight: align==='center' ? 'auto' : undefined,
    }}>
      {eyebrow && (
        <div style={{
          font:'700 12px/1 Inter', color: invert ? '#FBBF24' : 'var(--gr-gold-700)',
          textTransform:'uppercase', letterSpacing:'.14em', marginBottom:14,
        }}>{eyebrow}</div>
      )}
      <h2 className="gr-h2" style={{color: invert ? '#fff' : 'var(--gr-navy)'}}>{title}</h2>
      {sub && (
        <p style={{
          margin:'16px 0 0',
          font:'400 18px/1.6 Inter', color: invert ? 'rgba(255,255,255,.7)' : 'var(--gr-fg-2)',
          maxWidth: 680, ...(align==='center' && {marginLeft:'auto', marginRight:'auto'}),
        }}>{sub}</p>
      )}
    </div>
  );
}

function Stat({ value, label, sub, tone='navy' }) {
  const color = tone==='gold' ? '#F59E0B' : tone==='invert' ? '#fff' : 'var(--gr-navy)';
  return (
    <div>
      <div style={{font:'800 40px/1 DM Sans', letterSpacing:'-0.02em', color}}>{value}</div>
      <div style={{font:'600 14px/1.3 Inter', color: tone==='invert' ? 'rgba(255,255,255,.85)' : 'var(--gr-fg-1)', marginTop:8}}>{label}</div>
      {sub && <div style={{font:'500 12.5px/1.45 Inter', color: tone==='invert' ? 'rgba(255,255,255,.55)' : 'var(--gr-fg-3)', marginTop:4, maxWidth:200}}>{sub}</div>}
    </div>
  );
}

function LogoCloud({ logos, muted=false }) {
  return (
    <div style={{
      display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:0,
      borderTop: muted ? '1px solid rgba(255,255,255,.08)' : '1px solid var(--gr-border)',
      borderBottom: muted ? '1px solid rgba(255,255,255,.08)' : '1px solid var(--gr-border)',
    }}>
      {logos.map((l, i) => (
        <div key={i} style={{
          padding:'28px 12px', textAlign:'center',
          borderRight: i<logos.length-1 ? (muted?'1px solid rgba(255,255,255,.08)':'1px solid var(--gr-border)') : 'none',
          font:'800 16px/1.2 DM Sans',
          color: muted ? 'rgba(255,255,255,.5)' : 'var(--gr-fg-3)',
          letterSpacing:'-0.01em',
        }}>{l}</div>
      ))}
    </div>
  );
}

// A decorative "GCC logo wall" — made of company-name plates in assorted fonts to feel real.
function CompanyWall({ rows = 3, invert=false }) {
  const companies = [
    ['Deloitte','Lowe\'s','Target','Wells Fargo','Goldman Sachs','JP Morgan'],
    ['Walmart','Shell','Tesco','Standard Chartered','EY','PwC'],
    ['Cisco','SAP Labs','Philips','Boeing','Mercedes-Benz','Accenture'],
  ].slice(0, rows);
  return (
    <div style={{
      border: `1px solid ${invert?'rgba(255,255,255,.1)':'var(--gr-border)'}`,
      borderRadius:20, overflow:'hidden',
      background: invert?'rgba(255,255,255,.02)':'#fff',
    }}>
      {companies.map((row, ri) => (
        <div key={ri} style={{
          display:'grid', gridTemplateColumns:`repeat(${row.length},1fr)`,
          borderTop: ri>0 ? `1px solid ${invert?'rgba(255,255,255,.08)':'var(--gr-border-soft)'}` : 'none',
        }}>
          {row.map((c, ci) => (
            <div key={c} style={{
              padding:'20px 10px', textAlign:'center',
              borderLeft: ci>0 ? `1px solid ${invert?'rgba(255,255,255,.08)':'var(--gr-border-soft)'}` : 'none',
              font:'700 14.5px/1.2 DM Sans', letterSpacing:'-0.01em',
              color: invert?'rgba(255,255,255,.7)':'var(--gr-fg-2)',
            }}>{c}</div>
          ))}
        </div>
      ))}
    </div>
  );
}

// "Breadcrumb" used across deep pages
function Crumbs({ items }) {
  return (
    <div style={{display:'flex', alignItems:'center', gap:8, font:'500 13px/1 Inter', color:'var(--gr-fg-3)'}}>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {i>0 && <Icon name="chevron-right" size={12} style={{opacity:.5}}/>}
          {it.href ? (
            <a href={it.href} style={{color:'var(--gr-fg-3)', textDecoration:'none'}}>{it.label}</a>
          ) : (
            <span style={{color:'var(--gr-navy)'}}>{it.label}</span>
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

// CTA band used as footer on most pages
function CTABand({ title, sub, primaryLabel='Get your Skill Badge', primaryHref='#/skill-badge', secondaryLabel='Talk to an advisor', secondaryHref='#/contact' }) {
  return (
    <section style={{padding:'80px 0', background:'var(--gr-bg-cream)'}}>
      <div className="gr-container">
        <div style={{
          background: 'var(--gr-grad-hero)', borderRadius:28,
          padding:'56px 56px', color:'#fff',
          display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:40, alignItems:'center',
          position:'relative', overflow:'hidden',
        }}>
          <div style={{
            position:'absolute', right:-80, top:-80, width:360, height:360,
            background:'radial-gradient(circle, rgba(245,158,11,.22) 0%, transparent 60%)',
          }}/>
          <div style={{position:'relative'}}>
            <h3 className="gr-h2" style={{color:'#fff', fontSize:36}}>{title}</h3>
            {sub && <p style={{margin:'14px 0 0', font:'400 17px/1.6 Inter', color:'rgba(255,255,255,.75)', maxWidth:520}}>{sub}</p>}
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:10, position:'relative'}}>
            <a href={primaryHref} className="gr-btn gr-btn-gold gr-btn-lg">
              {primaryLabel} <Icon name="arrow-right" size={16}/>
            </a>
            <a href={secondaryHref} className="gr-btn gr-btn-lg" style={{
              background:'rgba(255,255,255,.08)', color:'#fff',
              border:'1px solid rgba(255,255,255,.18)',
            }}>
              {secondaryLabel}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// "GCC landscape" bar — used to show scale of India's GCC market
function StatStrip({ items, invert=false }) {
  return (
    <div style={{
      display:'grid', gridTemplateColumns:`repeat(${items.length}, 1fr)`,
      borderRadius:20, overflow:'hidden',
      border: `1px solid ${invert?'rgba(255,255,255,.1)':'var(--gr-border)'}`,
      background: invert?'rgba(255,255,255,.03)':'#fff',
    }}>
      {items.map((it, i) => (
        <div key={i} style={{
          padding:'28px 24px',
          borderLeft: i>0 ? `1px solid ${invert?'rgba(255,255,255,.08)':'var(--gr-border-soft)'}` : 'none',
        }}>
          <div style={{
            font:'800 34px/1 DM Sans', letterSpacing:'-0.02em',
            color: invert?'#F59E0B':'var(--gr-navy)',
          }}>{it.value}</div>
          <div style={{
            font:'600 14px/1.35 Inter', marginTop:8,
            color: invert?'rgba(255,255,255,.85)':'var(--gr-fg-1)',
          }}>{it.label}</div>
          {it.sub && <div style={{
            font:'500 12px/1.4 Inter', marginTop:4,
            color: invert?'rgba(255,255,255,.5)':'var(--gr-fg-4)',
          }}>{it.sub}</div>}
        </div>
      ))}
    </div>
  );
}

// Page hero variants
function HeroDark({ children, graphic }) {
  return (
    <section style={{
      background:'var(--gr-grad-hero)', color:'#fff',
      padding:'72px 0 96px', position:'relative', overflow:'hidden',
    }}>
      {/* grid motif */}
      <div style={{
        position:'absolute', inset:0,
        backgroundImage:'linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px)',
        backgroundSize:'48px 48px',
        maskImage:'radial-gradient(ellipse at top right, black 30%, transparent 75%)',
        WebkitMaskImage:'radial-gradient(ellipse at top right, black 30%, transparent 75%)',
      }}/>
      <div style={{
        position:'absolute', right:-120, top:-80, width:520, height:520,
        background:'radial-gradient(circle, rgba(245,158,11,.25) 0%, transparent 60%)',
      }}/>
      <div className="gr-container" style={{position:'relative'}}>
        {children}
      </div>
    </section>
  );
}

function FeatureGrid({ items, cols=3 }) {
  return (
    <div style={{display:'grid', gridTemplateColumns:`repeat(${cols}, 1fr)`, gap:20}}>
      {items.map((it, i) => (
        <div key={i} style={{
          background:'#fff', border:'1px solid var(--gr-border)',
          borderRadius:20, padding:24,
        }}>
          <div style={{
            width:44, height:44, borderRadius:12,
            background:'var(--gr-gold-50)', color:'var(--gr-gold-700)',
            display:'flex', alignItems:'center', justifyContent:'center', marginBottom:16,
          }}>
            <Icon name={it.icon} size={20}/>
          </div>
          <h4 className="gr-h4" style={{fontSize:18, marginBottom:6}}>{it.title}</h4>
          <p style={{margin:0, font:'400 14.5px/1.55 Inter', color:'var(--gr-fg-2)'}}>{it.desc}</p>
        </div>
      ))}
    </div>
  );
}

function Accordion({ items }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div style={{display:'flex', flexDirection:'column', gap:10}}>
      {items.map((it, i) => (
        <div key={i} style={{
          background:'#fff', border:'1px solid var(--gr-border)',
          borderRadius:16, overflow:'hidden',
        }}>
          <button onClick={()=>setOpen(open===i?-1:i)} style={{
            width:'100%', padding:'18px 22px',
            display:'flex', justifyContent:'space-between', alignItems:'center',
            background:'none', border:'none', cursor:'pointer', textAlign:'left',
            font:'700 16px/1.3 DM Sans', color:'var(--gr-navy)',
          }}>
            {it.q}
            <Icon name="chevron-down" size={18} style={{
              transform: open===i?'rotate(180deg)':'none', transition:'.2s',
            }}/>
          </button>
          {open===i && (
            <div style={{padding:'0 22px 22px', font:'400 15px/1.65 Inter', color:'var(--gr-fg-2)'}}>
              {it.a}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Pill, SectionTitle, Stat, LogoCloud, CompanyWall, Crumbs, CTABand, StatStrip, HeroDark, FeatureGrid, Accordion });