// Home.jsx — photographic homepage: HeroPhoto, BenefitBar, Partners, ServicesGrid, Process

// ---- Hero (full-bleed photo) ----------------------------------------
function HeroPhoto() {
  return (
    <section style={{ position: 'relative', background: 'var(--ink-900)', overflow: 'hidden', minHeight: 'clamp(560px,72vh,720px)', display: 'flex', alignItems: 'center' }}>
      {/* base grid texture (fallback) */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(rgba(72,192,208,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(72,192,208,.05) 1px,transparent 1px)',
        backgroundSize: '46px 46px'
      }} />
      {/* hero photograph */}
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url("assets/hero-gibraltar.png")', backgroundSize: 'cover', backgroundPosition: 'center right' }} />
      {/* legibility scrim — left dark → right clear */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'linear-gradient(100deg, rgba(10,18,25,.95) 0%, rgba(10,18,25,.82) 36%, rgba(10,18,25,.5) 62%, rgba(10,18,25,.2) 100%)' }} />
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'linear-gradient(0deg, rgba(10,18,25,.85) 0%, transparent 28%)' }} />

      <Container style={{ position: 'relative', padding: '72px 32px' }}>
        <div style={{ maxWidth: 720 }}>
          <Eyebrow icon="map-pin" style={{ marginBottom: 22 }}>GIBRALTAR · BUSINESS SECURITY</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, color: '#fff', fontSize: 'clamp(38px,5vw,66px)', lineHeight: 1.05, letterSpacing: '-.02em', margin: 0, textTransform: 'uppercase' }}>
            Smart security.<br />Real protection.<br /><span style={{ color: 'var(--brand)' }}>Total peace of mind.</span>
          </h1>
          <p style={{ fontFamily: 'var(--font-body)', color: 'var(--d-fg1)', fontSize: 19, lineHeight: 1.6, margin: '28px 0 0', maxWidth: 500 }}>
            Fortify delivers reliable, proactive security for businesses across Gibraltar — CCTV, access control and monitoring, designed and maintained by one local team.
          </p>
          <div style={{ display: 'flex', gap: 16, marginTop: 36, flexWrap: 'wrap', alignItems: 'center' }}>
            <Btn href="contact.html#quote" size="lg" iconRight="arrow-right">Get a quote</Btn>
          </div>
        </div>
      </Container>
    </section>
  );
}

function VideoModal({ onClose }) {
  React.useEffect(() => {
    const onKey = e => e.key === 'Escape' && onClose();
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(7,14,20,.86)', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div onClick={e => e.stopPropagation()} style={{ position: 'relative', width: 'min(960px,100%)', aspectRatio: '16 / 9', borderRadius: 16, overflow: 'hidden', border: '1px solid rgba(255,255,255,.12)', boxShadow: '0 40px 80px rgba(0,0,0,.5)' }}>
        <image-slot id="hero-video" fit="cover" placeholder="Drop a video poster / brand image here"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block' }}></image-slot>
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'radial-gradient(circle at 50% 50%, rgba(10,18,25,.35), rgba(10,18,25,.7))', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <span style={{ width: 78, height: 78, borderRadius: '50%', background: 'var(--brand)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 0 0 12px rgba(72,192,208,.18)' }}>
            <Icon name="play" size={30} color="#062229" style={{ marginLeft: 4 }} />
          </span>
        </div>
        <button onClick={onClose} style={{ position: 'absolute', top: 14, right: 14, width: 38, height: 38, borderRadius: '50%', background: 'rgba(7,14,20,.6)', border: '1px solid rgba(255,255,255,.18)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="x" size={19} color="#fff" />
        </button>
      </div>
    </div>
  );
}

// ---- Benefit bar -----------------------------------------------------
function BenefitBar() {
  const items = [
    { icon: 'shield-alert', title: 'Deter crime', body: 'Visible security that discourages threats.' },
    { icon: 'radar', title: 'Detect early', body: 'Advanced systems that identify risks.' },
    { icon: 'package', title: 'Protect assets', body: 'Safeguarding what matters most.' },
    { icon: 'shield-check', title: 'Prevent issues', body: 'Proactive cover before things happen.' },
    { icon: 'headset', title: '24/7 support', body: 'Round-the-clock peace of mind.' }
  ];
  return (
    <section style={{ background: 'var(--ink-800)', borderTop: '1px solid rgba(255,255,255,.06)', borderBottom: '1px solid rgba(255,255,255,.06)', padding: '30px 32px' }}>
      <Container style={{ padding: 0, display: 'flex', flexWrap: 'wrap', gap: 0 }} className="fy-benefit-bar">
        {items.map((it, i) => (
          <div key={it.title} style={{ flex: '1 1 180px', display: 'flex', alignItems: 'flex-start', gap: 13, padding: '8px 24px', borderLeft: i === 0 ? 'none' : '1px solid rgba(255,255,255,.09)' }}>
            <Icon name={it.icon} size={26} color="var(--brand)" style={{ flex: 'none', marginTop: 2 }} />
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15.5, color: '#fff', letterSpacing: '.01em' }}>{it.title}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, lineHeight: 1.45, color: 'var(--d-fg2)', marginTop: 3 }}>{it.body}</div>
            </div>
          </div>
        ))}
      </Container>
    </section>
  );
}

// ---- Partners --------------------------------------------------------
function Partners() {
  const partners = [
    { name: 'Hikvision', src: 'assets/partner-hikvision.png' },
    { name: 'Axis', src: 'assets/partner-axis.png' },
    { name: 'HID', src: 'assets/partner-hid.png' },
    { name: 'Honeywell', src: 'assets/partner-honeywell.png' },
    { name: 'Paxton', src: 'assets/partner-paxton.png' }
  ];
  return (
    <section style={{ background: 'var(--surface-2)', borderBottom: '1px solid var(--border)', padding: '38px 32px' }}>
      <Container style={{ padding: 0, display: 'flex', alignItems: 'center', gap: 40, flexWrap: 'wrap', justifyContent: 'space-between' }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, letterSpacing: '.14em', color: 'var(--fg3)', textTransform: 'uppercase' }}>
          Partnered with the brands you trust
        </span>
        <div style={{ display: 'flex', alignItems: 'center', gap: 'clamp(20px,4vw,52px)', flexWrap: 'wrap' }}>
          {partners.map(p => (
            <img key={p.name} src={p.src} alt={p.name} style={{ height: 42, width: 'auto', objectFit: 'contain', filter: 'grayscale(1)', opacity: .72 }} />
          ))}
        </div>
      </Container>
    </section>
  );
}

// ---- Services grid (photo cards) ------------------------------------
const FY_SERVICES = [
  { id: 'cctv', icon: 'cctv', title: 'CCTV Systems', body: 'HD & 4K surveillance designed around your premises, with secure remote viewing on any device.', src: 'assets/hero-cctv-gibraltar.png' },
  { id: 'access', icon: 'key-round', title: 'Access Control', body: 'Control who enters, when and where — with HID, Paxton and Honeywell entry systems.', src: 'assets/access-control.png' },
  { id: 'monitor', icon: 'monitor', title: '24/7 Monitoring', body: 'Round-the-clock visibility with real-time alerts and recorded footage you can retrieve anytime.', src: 'assets/monitoring.png' },
  { id: 'assess', icon: 'shield-check', title: 'Security Assessments', body: 'A thorough audit of your premises with clear, prioritised recommendations you can act on.', src: 'assets/security-assessments.png' },
  { id: 'intruder', icon: 'bell-ring', title: 'Intruder Alarms', body: 'Advanced intrusion detection that protects your premises and alerts you the moment it matters.', src: 'assets/intruder-alarms.png' },
  { id: 'fire', icon: 'flame', title: 'Fire Systems', body: 'Fire alarms, extinguishers and emergency lighting — installed, tested and maintained to keep your premises compliant and safe.', src: 'assets/fire-systems.png' },
  { id: 'integrate', icon: 'smartphone', title: 'Smart Integration', body: 'Cameras, doors and alarms in one app — manage and control your security from anywhere.', src: 'assets/smart-integration.png' }
];

function PhotoServiceCard({ id, icon, title, body, src }) {
  const [hov, setHov] = React.useState(false);
  return (
    <a href="services.html" onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{
      display: 'flex', flexDirection: 'column', background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 16,
      overflow: 'hidden', height: '100%', boxShadow: hov ? 'var(--shadow-md)' : 'var(--shadow-xs)',
      transform: hov ? 'translateY(-3px)' : 'none', transition: 'box-shadow .25s var(--ease), transform .25s var(--ease)'
    }}>
      <div style={{ position: 'relative' }}>
        <image-slot id={'card-' + id} fit="cover" src={src} placeholder={'Drop a ' + title + ' photo'}
          style={{ display: 'block', width: '100%', height: 168 }}></image-slot>
        <span style={{ position: 'absolute', left: 16, bottom: -22, width: 46, height: 46, borderRadius: 11, background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-sm)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name={icon} size={22} color="var(--brand-press)" />
        </span>
      </div>
      <div style={{ padding: '34px 24px 24px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 19, color: 'var(--fg1)', margin: '0 0 8px' }}>{title}</h3>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 18px', flex: 1 }}>{body}</p>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13.5, color: 'var(--brand-press)' }}>
          Learn more <Icon name="chevron-right" size={15} color="var(--brand-press)" style={{ transform: hov ? 'translateX(3px)' : 'none', transition: 'transform .2s var(--ease)' }} />
        </span>
      </div>
    </a>
  );
}

function ServicesGrid() {
  return (
    <section style={{ background: 'var(--surface)', padding: '88px 32px' }}>
      <Container style={{ padding: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, marginBottom: 52, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 560 }}>
            <Eyebrow style={{ marginBottom: 14 }}>OUR SERVICES</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(28px,3.4vw,42px)', letterSpacing: '-.015em', color: 'var(--fg1)', margin: 0, lineHeight: 1.08 }}>
              Complete security solutions.
            </h2>
          </div>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: 'var(--fg2)', margin: 0, maxWidth: 380 }}>
            From advanced CCTV to access control and 24/7 monitoring, we tailor solutions to protect what matters most to your business.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }} className="fy-services-grid">
          {FY_SERVICES.map(s => <PhotoServiceCard key={s.id} {...s} />)}
        </div>
      </Container>
    </section>
  );
}

// ---- Process / How it works -----------------------------------------
function Process() {
  const steps = [
    { n: '01', icon: 'clipboard-check', title: 'Site assessment', body: 'We visit your premises, understand the risks and map every entry point, blind spot and asset worth protecting.' },
    { n: '02', icon: 'pen-tool', title: 'Tailored design', body: 'You get a clear, itemised proposal — the right cameras and access hardware for your site, with no upsell.' },
    { n: '03', icon: 'wrench', title: 'Professional install', body: 'Our engineers fit and commission everything cleanly, then walk you through using it with confidence.' },
    { n: '04', icon: 'radio-tower', title: 'Monitor & maintain', body: 'Remote monitoring, alerts and scheduled maintenance keep your system reliable for years, not months.' }
  ];
  return (
    <section style={{ position: 'relative', background: 'var(--ink-900)', padding: '88px 32px', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(circle at 85% 0%,rgba(72,192,208,.09),transparent 50%)' }} />
      <Container style={{ padding: 0, position: 'relative' }}>
        <div style={{ maxWidth: 640, marginBottom: 52 }}>
          <Eyebrow style={{ marginBottom: 14 }}>HOW IT WORKS</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(28px,3.2vw,40px)', letterSpacing: '-.015em', color: '#fff', margin: 0 }}>
            A clear path from risk to protected.
          </h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6, color: 'var(--d-fg2)', marginTop: 16 }}>
            No jargon, no surprises. Four straightforward steps — and one team accountable for all of them.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 18 }} className="fy-process-grid">
          {steps.map(s => (
            <div key={s.n} style={{ position: 'relative', background: 'var(--ink-800)', border: '1px solid rgba(255,255,255,.08)', borderRadius: 16, padding: '26px 24px 28px' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
                <span style={{ width: 44, height: 44, borderRadius: 11, background: 'rgba(72,192,208,.12)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={s.icon} size={21} color="var(--brand)" />
                </span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--d-fg3)', letterSpacing: '.06em' }}>{s.n}</span>
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18.5, color: '#fff', margin: '0 0 8px' }}>{s.title}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: 'var(--d-fg2)', margin: 0 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { HeroPhoto, VideoModal, BenefitBar, Partners, ServicesGrid, PhotoServiceCard, FY_SERVICES, Process });
