/* TaskGuard site, shared brand atoms.
   Brand tokens come from the v2 guidelines:
     Navy        #0B1F3A     (primary surface)
     Navy Lift   #122846     (cards / panels)
     Navy High   #1A335A     (active / hover)
     Paper       #F4F6FA     (primary text + lockup)
     Paper Dim   #B8C2D1     (body)
     Paper Mute  #6E7C92     (captions)
     Signal Grn  #00FF94     (held-back accent)
     Rule        #1E3358     (dividers on navy)
*/

const TG = {
  navy: '#0B1F3A',
  lift: '#122846',
  hi:   '#1A335A',
  paper:'#F4F6FA',
  dim:  '#B8C2D1',
  mute: '#6E7C92',
  green:'#00FF94',
  rule: '#1E3358',
  success:'#25E37E',
  warning:'#F5B547',
  error:  '#FF5C5C',
};

const sans  = "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
const mono  = "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace";

/* ---------- Atoms ---------- */

function TGIcon({ size = 28, stroke = TG.paper, fill = TG.green }) {
  return (
    <svg width={size} height={size} viewBox="0 0 80 80" aria-hidden="true">
      <rect x="6" y="26" width="68" height="28" rx="14" fill="none" stroke={stroke} strokeWidth="6"/>
      <rect x="14" y="34" width="26" height="12" rx="6" fill={fill}/>
    </svg>
  );
}

function MiniLockup({ size = 22, color = TG.paper }) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:10 }}>
      <TGIcon size={size + 2} stroke={color}/>
      <span style={{
        fontFamily: sans, fontWeight: 600, fontSize: size,
        letterSpacing: '-0.06em', color, lineHeight: 1,
      }}>taskguard</span>
    </div>
  );
}

function Eyebrow({ children, color = TG.green, style }) {
  return (
    <div style={{
      fontFamily: mono, fontSize: 12, letterSpacing: '0.18em',
      textTransform: 'uppercase', color, fontWeight: 600, ...style,
    }}>{children}</div>
  );
}

function GreenDot({ size = 8 }) {
  return <span style={{
    display:'inline-block', width:size, height:size, borderRadius:size,
    background: TG.green, boxShadow:`0 0 0 4px rgba(0,255,148,0.12)`
  }}/>;
}

function PrimaryCTA({ children, href = '#', style }) {
  return (
    <a href={href} style={{
      display:'inline-flex', alignItems:'center', gap:10,
      background: TG.green, color: TG.navy,
      padding:'14px 22px', borderRadius: 6,
      fontFamily: sans, fontWeight: 600, fontSize: 15,
      textDecoration:'none', letterSpacing:'-0.01em',
      ...style,
    }}>{children}
      <span style={{ display:'inline-block', transform:'translateY(-1px)'}}>→</span>
    </a>
  );
}

function GhostCTA({ children, href = '#', style }) {
  return (
    <a href={href} style={{
      display:'inline-flex', alignItems:'center', gap:10,
      color: TG.paper, border:`1px solid ${TG.rule}`,
      padding:'14px 22px', borderRadius: 6,
      fontFamily: sans, fontWeight: 500, fontSize: 15,
      textDecoration:'none',
      ...style,
    }}>{children}</a>
  );
}

/* ---------- Top nav ---------- */

function TopNav({ accent = 'platforms' }) {
  const link = (label, key) => (
    <a key={label} href="#" style={{
      color: accent === key ? TG.paper : TG.dim,
      textDecoration:'none', fontSize: 14, fontWeight: 500,
      padding:'6px 0',
      borderBottom: accent === key ? `1px solid ${TG.green}` : '1px solid transparent',
    }}>{label}</a>
  );
  return (
    <div style={{
      display:'flex', alignItems:'center', justifyContent:'space-between',
      padding:'24px 64px',
      borderBottom:`1px solid ${TG.rule}`,
    }}>
      <MiniLockup size={20} />
      <nav style={{ display:'flex', gap:32 }}>
        {link('Platforms','platforms')}
        {link('Insurers','insurers')}
        {link('Workers','workers')}
        {link('Methodology','methodology')}
        {link('Docs','docs')}
      </nav>
      <div style={{ display:'flex', alignItems:'center', gap:16 }}>
        <a href="#" style={{
          fontFamily: mono, fontSize: 11, letterSpacing:'0.16em',
          textTransform:'uppercase', color: TG.dim, textDecoration:'none',
        }}>Sign in</a>
        <a href="#" style={{
          background: TG.paper, color: TG.navy,
          padding:'10px 16px', borderRadius: 4,
          fontFamily: sans, fontWeight: 600, fontSize: 13,
          textDecoration:'none',
        }}>Book a platform call</a>
      </div>
    </div>
  );
}

/* ---------- Footer ---------- */

function Footer() {
  const col = (title, items) => (
    <div>
      <div style={{
        fontFamily: mono, fontSize: 11, letterSpacing:'0.16em',
        textTransform:'uppercase', color: TG.mute, marginBottom: 16, fontWeight:600,
      }}>{title}</div>
      <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
        {items.map(t => (
          <a key={t} href="#" style={{
            color: TG.dim, textDecoration:'none', fontSize: 14,
          }}>{t}</a>
        ))}
      </div>
    </div>
  );
  return (
    <footer style={{
      padding:'80px 64px 48px', borderTop:`1px solid ${TG.rule}`,
      background: TG.navy,
    }}>
      <div style={{
        display:'grid',
        gridTemplateColumns:'1.4fr 1fr 1fr 1fr 1fr',
        gap: 48, marginBottom: 64,
      }}>
        <div>
          <MiniLockup size={22}/>
          <p style={{
            color: TG.dim, fontSize: 14, marginTop: 20, maxWidth: 260, lineHeight: 1.6,
          }}>
            A specialist underwriting agency for the Australian gig economy.
            Per-job cover, priced by data.
          </p>
        </div>
        {col('Product', ['Platforms','Insurers','Workers','Methodology','Documentation'])}
        {col('Company', ['About','Careers','Press','Contact'])}
        {col('Resources', ['Pricing methodology','Loss ratio targets','Compliance','Brand'])}
        {col('Legal', ['AFSL pathway','Privacy','Terms','Disclosure'])}
      </div>
      <div style={{
        display:'flex', justifyContent:'space-between',
        paddingTop: 32, borderTop:`1px solid ${TG.rule}`,
        color: TG.mute, fontSize: 12, fontFamily: mono, letterSpacing:'0.06em',
      }}>
        <span>© 2026 TaskGuard Pty Ltd</span>
        <span>Sydney, AU · Per-job cover, priced by data</span>
      </div>
    </footer>
  );
}

/* ---------- Shared sections (reused across variations) ---------- */

/* Injury-rate data drawn from the strategy doc + plausible directional
   numbers for adjacent categories. Labelled as illustrative below the chart. */
const INJURY_DATA = [
  { label:'Plumbing / trades',   rate: 14.1, jobs:'8h shift'   },
  { label:'Courier / delivery',  rate:  9.6, jobs:'2–3h block' },
  { label:'Food delivery',       rate:  7.4, jobs:'45–90 min'  },
  { label:'Rideshare',           rate:  4.2, jobs:'4–8h shift' },
  { label:'Handy / cleaning',    rate:  3.8, jobs:'1–4h job'   },
  { label:'Personal services',   rate:  1.9, jobs:'30–60 min'  },
];

function StatTile({ value, label, sub, accent = TG.paper }) {
  return (
    <div style={{
      border:`1px solid ${TG.rule}`, borderRadius: 12,
      padding: '28px 28px 24px', background: TG.lift,
    }}>
      <div style={{
        fontFamily: sans, fontWeight: 700, fontSize: 48,
        letterSpacing:'-0.04em', color: accent, lineHeight: 1,
      }}>{value}</div>
      <div style={{ color: TG.paper, fontSize: 15, fontWeight: 600, marginTop: 12 }}>{label}</div>
      <div style={{ color: TG.mute, fontSize: 13, marginTop: 6, lineHeight: 1.5 }}>{sub}</div>
    </div>
  );
}

/* Make components globally available to variation scripts */
Object.assign(window, {
  TG, sans, mono,
  TGIcon, MiniLockup, Eyebrow, GreenDot,
  PrimaryCTA, GhostCTA,
  TopNav, Footer,
  StatTile, INJURY_DATA,
});