// ============================================================
// THE SUPPLY HUB — shared UI (header, footer, cards, helpers)
// Loaded on every page. Exposes components on window.
// ============================================================
const { useState, useEffect } = React;

const NAV = [
  { label: 'Home', href: 'index.html', key: 'home' },
  { label: 'Products', href: 'products.html', key: 'products' },
  { label: 'Services', href: 'services.html', key: 'services' },
  { label: 'About', href: 'about.html', key: 'about' },
  { label: 'Contact', href: 'contact.html', key: 'contact' },
];

function Icon({ name, className, style }) {
  return <i data-lucide={name} className={'ic ' + (className || '')} style={style}></i>;
}

// re-render lucide icons after React paints
function useIcons() {
  useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
}

function Header({ active }) {
  const [open, setOpen] = useState(false);
  return (
    <header className="site-header">
      <div className="topbar">
        <div className="tsh-container topbar-inner">
          <div className="topbar-loc"><Icon name="map-pin" /> Serving offices, sites &amp; retail across Gibraltar</div>
          <div className="topbar-contact">
            <span><Icon name="mail" /> {COMPANY.email}</span>
            <span><Icon name="map-pin" /> {COMPANY.address}</span>
          </div>
        </div>
      </div>
      <div className="tsh-container header-inner">
        <a className="header-logo" href="index.html"><img src="assets/logo-website.png" alt="The Supply Hub Gibraltar" /></a>
        <nav className="site-nav">
          {NAV.map(n => <a key={n.key} href={n.href} className={'navlink' + (active === n.key ? ' active' : '')}>{n.label}</a>)}
          <a href="contact.html" className="btn btn-primary btn-sm">Enquire now <Icon name="arrow-right" /></a>
        </nav>
        <button className="burger" aria-label="Menu" onClick={() => setOpen(o => !o)}>
          <Icon name={open ? 'x' : 'menu'} />
        </button>
      </div>
      {open && (
        <div className="mobile-menu">
          <div className="links">
            {NAV.map(n => <a key={n.key} href={n.href} className={'navlink' + (active === n.key ? ' active' : '')}>{n.label}</a>)}
          </div>
          <div className="mob-cta"><a href="contact.html" className="btn btn-primary" style={{ width: '100%' }}>Enquire now <Icon name="arrow-right" /></a></div>
        </div>
      )}
    </header>
  );
}

function SectionHead({ eyebrow, title, intro, light }) {
  return (
    <div className="section-head">
      <span className={'eyebrow-rule eyebrow' + (light ? ' eyebrow-light' : '')}>{eyebrow}</span>
      <h2>{title}</h2>
      {intro && <p className="ts-p">{intro}</p>}
    </div>
  );
}

function CategoryCard({ c }) {
  return (
    <a className="card cat-card" href={'products.html?cat=' + c.id}>
      <div className="cat-media">
        <div className="cat-icon"><Icon name={c.icon} /></div>
        <div className="cat-media-title">{c.name}</div>
      </div>
      <div className="cat-body">
        <div className="cat-count">{c.count} products</div>
        <p className="ts-p" style={{ margin: '8px 0 0', fontSize: 14 }}>{c.blurb}</p>
        <span className="cat-go">Browse range <Icon name="arrow-right" /></span>
      </div>
    </a>
  );
}

function ProductCard({ p }) {
  return (
    <div className="card product">
      <div className="product-media">
        {p.img
          ? <img src={p.img} alt={p.name} loading="lazy" />
          : <Icon name="package" />}
      </div>
      <div className="product-body">
        <div className="product-tag">{p.tag || p.brand}</div>
        <div className="product-name">{p.name}</div>
        <div className="product-foot">
          {p.brand && <span className="product-brand">{p.brand}</span>}
          <a className="link" href={'contact.html?enquire=' + encodeURIComponent(p.name)}>Enquire <Icon name="arrow-right" /></a>
        </div>
      </div>
    </div>
  );
}

function CtaStrip() {
  return (
    <section className="section">
      <div className="tsh-container">
        <div className="cta-strip">
          <div>
            <h2>Not sure what you need?</h2>
            <p>Tell us about your premises and we'll spec a compliant solution — and keep it stocked and certified year-round.</p>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="contact.html" className="btn btn-primary btn-lg">Get expert advice <Icon name="arrow-right" /></a>
            <a href={'mailto:' + COMPANY.email} className="btn btn-onink btn-lg"><Icon name="mail" /> Email us</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    ['Products', [['First Aid Kits', 'products.html?cat=first-aid'], ['Defibrillators', 'products.html?cat=defib'], ['Wound Care', 'products.html?cat=wound'], ['PPE', 'products.html?cat=ppe'], ['All products', 'products.html']]],
    ['Services', [['Annual maintenance', 'service.html?s=annual-maintenance'], ['Site assessments', 'service.html?s=site-assessments'], ['Bulk & trade orders', 'service.html?s=bulk-trade-orders'], ['Compliance advice', 'service.html?s=compliance-advice']]],
    ['Company', [['About us', 'about.html'], ['Why The Supply Hub', 'about.html'], ['Contact', 'contact.html'], ['Enquire now', 'contact.html']]],
  ];
  return (
    <footer className="site-footer">
      <div className="tsh-container footer-grid">
        <div>
          <img className="footer-logo" src="assets/logo-trans.png" alt="The Supply Hub" />
          <p className="footer-blurb">Your trusted source for first aid supplies, defibrillators and safety essentials for businesses and retail in Gibraltar.</p>
          <div className="footer-contact">
            <span><Icon name="mail" /> {COMPANY.email}</span>
            <span><Icon name="map-pin" /> {COMPANY.address}</span>
          </div>
        </div>
        {cols.map(([h, links]) => (
          <div className="footer-col" key={h}>
            <h4>{h}</h4>
            <div className="links">{links.map(([l, href]) => <a key={l} className="foot-link" href={href}>{l}</a>)}</div>
          </div>
        ))}
      </div>
      <div className="footer-bar">
        <div className="tsh-container footer-bar-inner">
          <span>© 2026 The Supply Hub Gibraltar. All rights reserved.</span>
          <span style={{ display: 'flex', gap: 20 }}><a className="foot-link" href="#">Privacy</a><a className="foot-link" href="#">Terms</a></span>
        </div>
      </div>
    </footer>
  );
}

const SERVICES = [
  {
    slug: 'annual-maintenance', icon: 'clipboard-check', title: 'Annual Maintenance & Restocking',
    short: 'We inspect, restock and re-certify your first aid kits and AEDs on a regular schedule — replacing expired items and logging it all so you pass any inspection with confidence.',
    intro: 'A scheduled service that keeps every kit, station and defibrillator on your premises stocked, in-date and compliant — without you having to think about it.',
    overview: [
      'First aid supplies expire, get used, and fall out of compliance over time. Our maintenance programme takes that off your plate entirely: we visit on an agreed schedule, check every kit and station, and bring it all back to standard.',
      'You receive a clear record of every visit, so when an inspector, auditor or insurer asks, your duty of care is already documented and provable.',
    ],
    includes: [
      'Scheduled on-site inspections of every kit and station',
      'Replacement of expired, used or missing items',
      'AED pad and battery expiry checks and swaps',
      'Compliance log and certificate for your records',
      'Reminders before anything is due to expire',
    ],
    steps: [['Audit', 'We log every kit, station and AED you have and its current state.'], ['Schedule', 'We agree a visit frequency that suits your risk level and budget.'], ['Restock', 'On each visit we replace what is used, expired or missing.'], ['Certify', 'You get a dated record confirming everything is compliant.']],
  },
  {
    slug: 'site-assessments', icon: 'clipboard-list', title: 'Site Assessments',
    short: 'A walk-through of your premises to identify risks and recommend exactly what you need — the right kits, signage and defibrillator placement for your headcount and activity.',
    intro: 'A practical, no-obligation walk-through of your premises to work out exactly what first aid provision your business needs to be compliant.',
    overview: [
      'The right provision depends on your headcount, your activity and your layout — a small office and a busy construction site have very different needs. We assess yours in person and translate it into a concrete plan.',
      'You get a clear, plain-English recommendation: which kits, how many, where they go, what signage you need, and whether a defibrillator is appropriate — with no pressure to over-buy.',
    ],
    includes: [
      'On-site risk and provision walk-through',
      'Headcount and activity-based kit sizing',
      'Recommended kit locations and quantities',
      'Defibrillator placement guidance',
      'Signage and accessibility review',
      'A written recommendation you can act on',
    ],
  },
  {
    slug: 'bulk-trade-orders', icon: 'package', title: 'Bulk & Trade Orders',
    short: 'Competitive supply for offices, construction, hospitality and retail. Set up a trade account for repeat orders and consolidated delivery across multiple sites.',
    intro: 'Competitive, dependable supply for businesses that buy in volume or across multiple sites — backed by a trade account and a single point of contact.',
    overview: [
      'Whether you are kitting out a new premises, supplying several sites, or simply reordering the same essentials each quarter, a trade account makes it simple: agreed pricing, fast reordering and consolidated delivery.',
      'You deal with people who know your account and your stock — no re-explaining your needs every time you order.',
    ],
    includes: [
      'Trade account with agreed volume pricing',
      'Fast reordering of your regular items',
      'Consolidated delivery across multiple sites',
      'A dedicated point of contact',
      'Tailored quotes for large or one-off orders',
    ],
  },
  {
    slug: 'compliance-advice', icon: 'shield-check', title: 'Compliance Advice',
    short: "Plain-English guidance on BSI and HSE requirements so you're never guessing. We help you meet your duty of care without over-spending.",
    intro: 'Clear, jargon-free guidance on what the regulations actually require of your business — so you meet your duty of care with confidence.',
    overview: [
      'First aid compliance can feel like a minefield of standards and acronyms. We cut through it: we tell you what applies to your type of premises, what good looks like, and what you can safely skip.',
      'From BS 8599 kit standards to HSE workplace requirements and sector-specific rules for catering or construction, we keep your advice practical and proportionate.',
    ],
    includes: [
      'Guidance on BS 8599 first aid kit standards',
      'HSE workplace duty-of-care requirements',
      'Sector-specific rules (catering, construction, retail)',
      'Help documenting your provision',
      'Honest advice — never over-specified',
    ],
  },
  {
    slug: 'defibrillator-support', icon: 'heart-pulse', title: 'Defibrillator Support',
    short: 'Supply, installation guidance, pad & battery replacement reminders, and signage — keeping your AED rescue-ready every day of the year.',
    intro: 'End-to-end support for your defibrillator — from choosing the right unit to keeping it rescue-ready every single day.',
    overview: [
      'A defibrillator is only life-saving if it works when it is needed. We help you choose the right AED for your premises, place and sign it correctly, and keep its consumables in date.',
      'With pad and battery reminders plus optional maintenance visits, your AED never quietly lapses out of readiness.',
    ],
    includes: [
      'AED supply and model selection advice',
      'Installation and placement guidance',
      'Adult and paediatric pad supply',
      'Pad and battery expiry reminders',
      'Compliant location signage',
    ],
  },
  {
    slug: 'local-delivery', icon: 'truck', title: 'Local Delivery',
    short: 'Fast, dependable delivery across Gibraltar — straight to your site, office or storeroom, when you need it.',
    intro: 'Fast, reliable delivery across Gibraltar — getting the right supplies to your door when you need them.',
    overview: [
      'Being local means we can get supplies to you quickly, without long lead times or international shipping delays. We deliver straight to your site, office or storeroom.',
      'Need a regular drop or an urgent restock? We work around your schedule and your site access.',
    ],
    includes: [
      'Fast delivery across Gibraltar',
      'Straight to your site, office or storeroom',
      'Scheduled regular drops available',
      'Urgent restock when you need it',
    ],
  },
];

Object.assign(window, { Icon, useIcons, Header, SectionHead, CategoryCard, ProductCard, CtaStrip, Footer, NAV, SERVICES });