/* global React, A, PARTNERS_A, PARTNERS_B, RESTO_CATS */
const { useState, useEffect, useRef } = React;

// ─── ICONS ──────────────────────────────────────────────────────────────
const Ico = {
  arrow: () => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M1 7H13M13 7L7.5 1.5M13 7L7.5 12.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/>
    </svg>
  ),
  pin: () => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M7 1C4.5 1 2.5 3 2.5 5.5C2.5 9 7 13 7 13C7 13 11.5 9 11.5 5.5C11.5 3 9.5 1 7 1Z M7 6.5C7.55 6.5 8 6.05 8 5.5C8 4.95 7.55 4.5 7 4.5C6.45 4.5 6 4.95 6 5.5C6 6.05 6.45 6.5 7 6.5Z" stroke="currentColor" strokeWidth="1.2"/>
    </svg>
  ),
  phone: () => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M3 1H5L6 4L4.5 5C5.5 7 7 8.5 9 9.5L10 8L13 9V11C13 12 12 13 11 13C6 13 1 8 1 3C1 2 2 1 3 1Z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round"/>
    </svg>
  ),
  mail: () => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <rect x="1" y="3" width="12" height="8" stroke="currentColor" strokeWidth="1.2"/>
      <path d="M1 4L7 8L13 4" stroke="currentColor" strokeWidth="1.2"/>
    </svg>
  ),
  clock: () => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <circle cx="7" cy="7" r="6" stroke="currentColor" strokeWidth="1.2"/>
      <path d="M7 3V7L9.5 8.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
    </svg>
  ),
  check: () => (
    <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
      <path d="M2 6.5L5 9.5L11 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
};

// ─── VIDEO AUTOPLAY HOOK ────────────────────────────────────────────────
function useInViewVideo(threshold = 0.3) {
  const containerRef = useRef(null);
  const videoRef = useRef(null);
  useEffect(() => {
    if (!containerRef.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (!videoRef.current) return;
        if (e.isIntersecting) videoRef.current.play().catch(() => {});
        else videoRef.current.pause();
      });
    }, { threshold });
    io.observe(containerRef.current);
    return () => io.disconnect();
  }, [threshold]);
  return [containerRef, videoRef];
}

// ─── COUNT-UP HOOK ──────────────────────────────────────────────────────
function useCountUp(end, duration, active) {
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!active || end === null) return;
    let startTs = null;
    let rafId;
    const step = (ts) => {
      if (!startTs) startTs = ts;
      const p = Math.min((ts - startTs) / duration, 1);
      setVal(Math.round((1 - Math.pow(1 - p, 3)) * end));
      if (p < 1) rafId = requestAnimationFrame(step);
    };
    rafId = requestAnimationFrame(step);
    return () => { if (rafId) cancelAnimationFrame(rafId); };
  }, [active, end, duration]);
  return val;
}

// ─── ANNOUNCEMENT BAR ───────────────────────────────────────────────────
function AnnouncementBar() {
  return (
    <div className="announcement" role="banner" aria-label="Contact information">
      <span className="ann-dot"></span>
      <span className="ann-item">Free Consultation · <strong>Call +965 60766633</strong></span>
      <span className="ann-sep"></span>
      <span className="ann-item">Shuwaikh Industrial · Block 2 · Kuwait</span>
      <span className="ann-sep"></span>
      <span className="ann-item"><strong>sales@automatkitchensco.com</strong></span>
      <span className="ann-dot"></span>
    </div>
  );
}

// ─── NAV ────────────────────────────────────────────────────────────────
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <a href="#hero" className="brand">
        <img src="assets/img/logo.png" alt="Automat Kitchens" className="brand-logo"/>
        <span className="brand-sub">Kuwait · Est. 2003</span>
      </a>
      <div className="links">
        <a href="#services">Services</a>
        <a href="#projects">Projects</a>
        <a href="#resto" className="resto-link">Resto</a>
        <a href="#partners">Partners</a>
        <a href="#contact">Contact</a>
      </div>
      <a href="#contact" className="cta">
        <span className="dot"></span>
        Get a Quote
      </a>
      <button
        className={"nav-burger" + (mobileOpen ? " open" : "")}
        aria-label="Menu"
        onClick={() => setMobileOpen(!mobileOpen)}
      >
        <span></span><span></span><span></span>
      </button>
      {mobileOpen && (
        <div className="mobile-menu" onClick={() => setMobileOpen(false)}>
          <a href="#services">Services</a>
          <a href="#projects">Projects</a>
          <a href="#resto">Resto Showroom</a>
          <a href="#partners">Partners</a>
          <a href="#contact">Contact</a>
          <a href="#contact" className="mm-cta">Get a Quote</a>
        </div>
      )}
    </nav>
  );
}

// ─── HERO ───────────────────────────────────────────────────────────────
function Hero() {
  const vRef = useRef(null);
  const statsRef = useRef(null);
  const [active, setActive] = useState(false);

  useEffect(() => {
    if (vRef.current) vRef.current.play().catch(() => {});
    const io = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setActive(true); io.disconnect(); } },
      { threshold: 0.1 }
    );
    if (statsRef.current) io.observe(statsRef.current);
    return () => io.disconnect();
  }, []);

  const c1 = useCountUp(86, 2000, active);
  const c2 = useCountUp(68, 2000, active);
  const c3 = useCountUp(20, 2000, active);

  return (
    <section id="hero" className="hero">
      <div className="hero-video">
        <video ref={vRef} src={A.vid.heroLoop} poster={A.img.hero} autoPlay muted loop playsInline preload="auto"/>
        <div className="hero-vignette"></div>
      </div>

      <div className="hero-content">
        <div className="hero-eyebrow">
          <span className="h-pulse"></span>
          Kuwait's Sole Authorised Distributor · Hobart · Traulsen · Foster · Bonnet · MBM
        </div>
        <h1 className="hero-h1">
          Our Expertise<br/>
          Streamlines<br/>
          Every <span className="h-gold">Kitchen.</span>
        </h1>
        <p className="hero-sub">
          Trusted by <span className="hs-hi">restaurants, hotels</span> &amp; catering companies across <span className="hs-hi">Kuwait.</span><br/>
          <span className="hs-services">
            <span className="hs-tag">Design</span>
            <span className="hs-dot">·</span>
            <span className="hs-tag">Supply</span>
            <span className="hs-dot">·</span>
            <span className="hs-tag">Install</span>
            <span className="hs-dot">·</span>
            <span className="hs-tag">Maintain</span>
          </span>
          <span className="hs-since">Est. 2003</span>
        </p>
        <div className="hero-actions">
          <a href="#services" className="btn-gold">
            Explore Services
            <span className="btn-arrow"></span>
          </a>
          <a href="#contact" className="btn-outline">Free Consultation</a>
        </div>
      </div>

      <div className="hero-stats" ref={statsRef}>
        <div className="h-stat">
          <span className="h-num">{active ? c1 : "0"}+</span>
          <span className="h-lbl">Projects Completed</span>
        </div>
        <div className="h-stat-sep"></div>
        <div className="h-stat">
          <span className="h-num">{active ? c2 : "0"}+</span>
          <span className="h-lbl">Manufacturer Partners</span>
        </div>
        <div className="h-stat-sep"></div>
        <div className="h-stat">
          <span className="h-num">{active ? c3 : "0"}+</span>
          <span className="h-lbl">Years in Operation</span>
        </div>
        <div className="h-stat-sep"></div>
        <div className="h-stat">
          <span className="h-num">5</span>
          <span className="h-lbl">Sole Distributorships</span>
        </div>
      </div>

      <div className="hero-strip">
        <div className="strip-track">
          {[0, 1].map((k) => (
            <div className="strip-row" key={k}>
              <span>Design</span><span className="dot">·</span>
              <span>Supply</span><span className="dot">·</span>
              <span>Install</span><span className="dot">·</span>
              <span>Maintain</span><span className="dot">●</span>
              <span>Resto Showroom</span><span className="dot">·</span>
              <span>OEM Spareparts</span><span className="dot">·</span>
              <span>+965 60766633</span><span className="dot">●</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── SERVICES ───────────────────────────────────────────────────────────
function Services() {
  const svcs = [
    {
      num: "01",
      title: "Commercial Kitchens",
      desc: "Full-cycle kitchen solutions: from 3D CAD design and permit-ready drawings through to supply, installation, commissioning, and a twenty-year after-sales commitment.",
      tags: ["Design & Planning", "Equipment Supply", "Installation", "Maintenance"],
      img: A.img.blueprint,
      vid: A.vid.blueprint,
    },
    {
      num: "02",
      title: "Resto Showroom",
      desc: "1,000+ cookware, bakeware and tabletop SKUs in stock at our Shuwaikh showroom. Knives, pots & pans, dinnerware, cutlery. Hospitality-spec and price-matched.",
      tags: ["Knives & Cutlery", "Pots & Pans", "Bakeware", "Dinnerware"],
      img: A.img.saucepans,
      vid: A.vid.pour,
    },
    {
      num: "03",
      title: "Spare Parts & Service",
      desc: "Genuine OEM spareparts and certified field service across a twenty-year horizon. Bonded warehousing, authentic warranties, rapid response for every installation we fit.",
      tags: ["OEM Genuine Parts", "Field Service", "20yr Horizon", "Real Warranties"],
      img: A.img.maintain,
      vid: null,
    },
  ];
  return (
    <section id="services" className="services">
      <div className="wrap">
        <div className="sec-head reveal-up">
          <span className="sec-label">What We Do</span>
          <h2 className="sec-h2">Three Pillars.<br/><span className="sec-gold">One Partner.</span></h2>
        </div>
        <div className="svc-grid">
          {svcs.map((s, i) => <SvcCard key={s.num} s={s} i={i}/>)}
        </div>
      </div>
    </section>
  );
}

function SvcCard({ s, i }) {
  const vRef = useRef(null);
  const [hover, setHover] = useState(false);
  useEffect(() => {
    if (!vRef.current) return;
    if (hover) vRef.current.play().catch(() => {});
    else vRef.current.pause();
  }, [hover]);
  return (
    <article
      className={"svc-card reveal-up delay-" + (i + 1)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      <div className="svc-media">
        {s.vid
          ? <video ref={vRef} src={s.vid} poster={s.img} muted loop playsInline preload="metadata"/>
          : <img src={s.img} alt={s.title} loading="lazy"/>
        }
        <div className="svc-shade"></div>
        <div className="svc-num-badge">{s.num}</div>
      </div>
      <div className="svc-body">
        <h3 className="svc-title">{s.title}</h3>
        <p className="svc-desc">{s.desc}</p>
        <div className="svc-tags">
          {s.tags.map((t) => <span key={t}>{t}</span>)}
        </div>
        <div className="svc-link">
          Learn More <Ico.arrow/>
        </div>
      </div>
    </article>
  );
}

// ─── ABOUT ──────────────────────────────────────────────────────────────
function About() {
  const features = [
    "Full Design & Planning",
    "Genuine OEM Spare Parts",
    "68+ Manufacturer Partners",
    "Trained Field Crew",
    "20yr After-Sales Support",
    "1,000+ Showroom SKUs",
    "Bonded Warehousing",
    "Permit-Ready Drawings",
  ];
  return (
    <section className="about">
      <div className="wrap">
        <div className="about-grid">
          <div className="about-left reveal-up">
            <span className="sec-label">Who We Are</span>
            <h2 className="sec-h2">Rethink Your<br/><span className="sec-gold">Kitchen.</span></h2>
            <p className="about-body">
              Since 2003, Automat Kitchens has been Kuwait's most trusted commercial kitchen company, and the sole authorised distributor in Kuwait for Hobart, Traulsen, Foster, Bonnet, and MBM. We deliver end-to-end solutions from initial concept and 3D design through to supply, installation, and after-sales maintenance.
            </p>
            <p className="about-body">
              With direct OEM partnerships across 68+ global manufacturers in Europe, the United States, and Asia, we bring world-class equipment to Kuwait's finest hotels, restaurants, schools, and catering operations.
            </p>
            <a href="#contact" className="btn-gold">
              Start a Project
              <span className="btn-arrow"></span>
            </a>
          </div>
          <div className="about-right reveal-up delay-2">
            <div className="about-img">
              <img src={A.img.install} alt="Automat Kitchens installation team" loading="lazy"/>
            </div>
            <div className="about-features">
              {features.map((f) => (
                <div key={f} className="af-item">
                  <span className="af-check"><Ico.check/></span>
                  <span>{f}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── VIDEO BREAK ────────────────────────────────────────────────────────
function VideoBreak() {
  const [containerRef, videoRef] = useInViewVideo(0.15);
  return (
    <section className="video-break" ref={containerRef}>
      <video ref={videoRef} src={A.vid.steam} poster={A.img.install} muted loop playsInline preload="metadata"/>
      <div className="vb-overlay">
        <div className="vb-line"></div>
        <p className="vb-quote">
          The standard of your kitchen<br/>
          is the <span className="vb-gold">ceiling</span> of your food.
        </p>
        <div className="vb-line"></div>
        <span className="vb-tag">Automat Kitchens W.L.L. · Kuwait · Est. 2003</span>
      </div>
    </section>
  );
}

// ─── PROJECTS ───────────────────────────────────────────────────────────
function Projects() {
  const cases = [
    {
      img: A.img.marriott, vid: null,
      tag: "Hotel · Kuwait City",
      title: "Marriott Hotel",
      scope: "Design · Supply · Install",
      year: "2022",
      capacity: "1,200 covers",
    },
    {
      img: A.img.salhiya, vid: A.vid.mibrasa,
      tag: "Fine Dining · Complex",
      title: "Salhiya Complex",
      scope: "Design · Supply · Install · Maintain",
      year: "2023",
      capacity: "180 covers",
    },
    {
      img: A.img.lepain, vid: null,
      tag: "Café & Patisserie",
      title: "Le Pain",
      scope: "Design · Supply · Install",
      year: "2023",
      capacity: "All-day service",
    },
    {
      img: A.img.burgan, vid: A.vid.pour,
      tag: "Central Catering",
      title: "Burgan",
      scope: "Full-suite contract",
      year: "2024",
      capacity: "5,000 meals/day",
    },
  ];
  return (
    <section id="projects" className="projects">
      <div className="wrap">
        <div className="sec-head reveal-up">
          <span className="sec-label">Selected Work</span>
          <h2 className="sec-h2">86+ Projects<br/><span className="sec-gold">Commissioned.</span></h2>
          <p className="sec-lede">Hotels, restaurants, schools, caterers and banquet halls across Kuwait and the Gulf.</p>
        </div>
        <div className="proj-grid">
          {cases.map((c, i) => <ProjCard key={i} c={c} i={i}/>)}
        </div>
      </div>
    </section>
  );
}

function ProjCard({ c, i }) {
  const [containerRef, videoRef] = useInViewVideo(0.35);
  return (
    <article ref={containerRef} className={"proj-card reveal-up delay-" + (i % 2 + 1)}>
      <div className="proj-media">
        {c.vid
          ? <video ref={videoRef} src={c.vid} poster={c.img} muted loop playsInline preload="metadata"/>
          : <img src={c.img} alt={c.title} loading="lazy"/>
        }
        <div className="proj-shade"></div>
        <span className="proj-tag">{c.tag}</span>
      </div>
      <div className="proj-info">
        <h3 className="proj-title">{c.title}</h3>
        <div className="proj-meta">
          <div><span>Scope</span><strong>{c.scope}</strong></div>
          <div><span>Year</span><strong>{c.year}</strong></div>
          <div><span>Capacity</span><strong>{c.capacity}</strong></div>
        </div>
      </div>
    </article>
  );
}

// ─── PHOTO STRIP ────────────────────────────────────────────────────────
function PhotoStrip() {
  const imgs = [
    { src: A.img.marriott,  cap: "Marriott Hotel · 1,200 covers" },
    { src: A.img.salhiya,   cap: "Salhiya Complex · Fine dining" },
    { src: A.img.lepain,    cap: "Le Pain · Patisserie" },
    { src: A.img.burgan,    cap: "Burgan · 5,000 meals/day" },
    { src: A.img.install,   cap: "Field crew · Installation" },
    { src: A.img.blueprint, cap: "CAD design · Permit-ready" },
    { src: A.img.maintain,  cap: "20-year service horizon" },
    { src: A.img.resto,     cap: "Resto showroom · Shuwaikh" },
  ];
  return (
    <div className="photo-strip">
      <div className="ps-track">
        {[...imgs, ...imgs].map((img, i) => (
          <div key={i} className="ps-frame">
            <img src={img.src} alt={img.cap} loading="lazy"/>
            <div className="ps-cap">{img.cap}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── RESTO ──────────────────────────────────────────────────────────────
function Resto() {
  return (
    <section id="resto" className="resto-sec">
      <div className="resto-banner">
        <img src={A.img.resto} alt="Resto Showroom · Shuwaikh"/>
        <div className="resto-tint"></div>
        <div className="resto-banner-content wrap">
          <span className="sec-label light">Showroom · Open Sun–Thu</span>
          <h2 className="sec-h2 light">One Stop.<br/><span className="sec-gold-2">Six Obsessions.</span></h2>
          <p className="resto-lede">
            Every cookware, bakeware and tabletop discipline a working kitchen needs. Curated, stocked, and price-matched at our Shuwaikh showroom.
          </p>
        </div>
      </div>
      <div className="wrap">
        <div className="prod-grid">
          {RESTO_CATS.map((c, i) => <RestoCard key={c.id} c={c} i={i}/>)}
        </div>
      </div>
    </section>
  );
}

function RestoCard({ c, i }) {
  const vRef = useRef(null);
  const [hover, setHover] = useState(false);
  useEffect(() => {
    if (!vRef.current) return;
    if (hover) vRef.current.play().catch(() => {});
    else vRef.current.pause();
  }, [hover]);
  const featSet = [
    ["VG-10 steel", "Riveted pakka", "Lifetime sharpen"],
    ["Tri-ply 5mm", "Induction-ready", "Forged handles"],
    ["Chrome / epoxy", "Modular bays", "Mobile + static"],
    ["Aluminized", "GN-spec", "Non-stick"],
    ["Vitrified", "Edge-chip rated", "Stackable"],
    ["18/10 mirror", "Weighted", "Hospitality"],
  ];
  return (
    <article
      className="prod-card"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      <div className="prod-img">
        {c.video
          ? <video ref={vRef} src={c.video} poster={c.poster} muted loop playsInline preload="metadata"/>
          : <img src={c.poster} alt={c.name} loading="lazy"/>
        }
        <div className="prod-shade"></div>
      </div>
      <div className="prod-body">
        <div className="prod-num">{c.id} / 06</div>
        <h3 className="prod-name">{c.name}</h3>
        <p className="prod-sub">{c.sub}</p>
        <div className="prod-feat">
          {featSet[i].map((f) => <span key={f}>{f}</span>)}
        </div>
        <div className="prod-arr"><Ico.arrow/></div>
      </div>
    </article>
  );
}

// ─── PARTNERS ───────────────────────────────────────────────────────────
function Partners() {
  const a = [...PARTNERS_A, ...PARTNERS_A];
  const b = [...PARTNERS_B, ...PARTNERS_B];
  return (
    <section id="partners" className="partners">
      <div className="partners-bg">
        <img src={A.img.partners} alt=""/>
      </div>
      <div className="wrap">
        <div className="sec-head reveal-up">
          <span className="sec-label">Our Brands</span>
          <h2 className="sec-h2">68+ Brands.<br/><span className="sec-gold">One Roof.</span></h2>
          <p className="sec-lede">Direct OEM relationships with European, American and Asian manufacturers. Bonded warehousing, authentic spareparts, real warranties.</p>
        </div>
      </div>
      <div className="marquee">
        {a.map((p, i) => (
          <div key={"a" + i} className="partner-card">
            <span className="pn">{p.name}</span>
            <span className="pc">{p.country}</span>
          </div>
        ))}
      </div>
      <div className="marquee reverse">
        {b.map((p, i) => (
          <div key={"b" + i} className="partner-card">
            <span className="pn">{p.name}</span>
            <span className="pc">{p.country}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── CORE VALUES ────────────────────────────────────────────────────────
function CoreValues() {
  const vals = [
    {
      num: "01",
      title: "Learning",
      body: "Continuously developing our team's expertise and staying ahead of the latest commercial kitchen technologies and global trends.",
    },
    {
      num: "02",
      title: "Quality",
      body: "Uncompromising standards in every piece of equipment we supply, every installation we complete, and every service call we deliver.",
    },
    {
      num: "03",
      title: "Teamwork",
      body: "One coordinated team across design, supply, installation, and maintenance. Your single point of accountability from day one.",
    },
    {
      num: "04",
      title: "Committed",
      body: "A twenty-year after-sales commitment to every kitchen we fit. We answer the phone long after the keys are handed over.",
    },
    {
      num: "05",
      title: "Customer-Obsessed",
      body: "Your kitchen's success is our success. We are not satisfied until your operation runs exactly as designed and planned.",
    },
  ];
  return (
    <section className="core-values">
      <div className="wrap">
        <div className="sec-head reveal-up">
          <span className="sec-label">Our Values</span>
          <h2 className="sec-h2">What We<br/><span className="sec-gold">Stand For.</span></h2>
        </div>
        <div className="vals-grid">
          {vals.map((v, i) => (
            <div key={v.num} className={"val-card reveal-up delay-" + (i % 3 + 1)}>
              <div className="val-num">{v.num}</div>
              <h3 className="val-title">{v.title}</h3>
              <p className="val-body">{v.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CONTACT ────────────────────────────────────────────────────────────
function Contact() {
  const enquiries = [
    { icon: <Ico.mail/>,  lbl: "Sales · Project Enquiries",   val: "sales@automatkitchensco.com",    href: "mailto:sales@automatkitchensco.com" },
    { icon: <Ico.phone/>, lbl: "Sales · Direct Line",         val: "+965 60766633",                  href: "tel:+96560766633" },
    { icon: <Ico.mail/>,  lbl: "Vendors & Opportunities",     val: "official@automatkitchensco.com", href: "mailto:official@automatkitchensco.com" },
    { icon: <Ico.phone/>, lbl: "Vendors · Direct Line",       val: "+965 69934607",                  href: "tel:+96569934607" },
    { icon: <Ico.pin/>,   lbl: "Showroom & Factory",          val: "Shuwaikh Industrial · Block 2",  href: "#" },
    { icon: <Ico.clock/>, lbl: "Business Hours",              val: "Sun–Thu · 08:00 to 17:00",       href: "#" },
  ];
  return (
    <section id="contact" className="contact">
      <div className="wrap">
        <div className="contact-head reveal-up">
          <span className="sec-label">Let's Talk</span>
          <h2 className="sec-h2">Start Your<br/><span className="sec-gold">Kitchen Project.</span></h2>
          <p className="sec-lede">From the first floor-plan sketch to the last bearing replacement. One accountable name across two decades.</p>
        </div>
        <div className="contact-cards">
          {enquiries.map((e, i) => (
            <a key={i} className={"cc-card reveal-up delay-" + (i % 3 + 1)} href={e.href}>
              <div className="cc-ico">{e.icon}</div>
              <div className="cc-text">
                <div className="cc-lbl">{e.lbl}</div>
                <div className="cc-val">{e.val}</div>
              </div>
              <div className="cc-arr"><Ico.arrow/></div>
            </a>
          ))}
        </div>
        <footer>
          <div className="fcol">
            <div className="ft-lbl">Company</div>
            <div className="ft-val">Automat Kitchens W.L.L.</div>
            <div className="ft-val sub">Shuwaikh Industrial · Block 2 · Kuwait</div>
          </div>
          <div className="fcol mid">
            <div className="ft-lbl">Services</div>
            <div className="ft-val">Commercial Kitchens · Resto Showroom</div>
            <div className="ft-val sub">OEM Spareparts · Installation · Maintenance</div>
          </div>
          <div className="fcol right">
            <div className="ft-lbl">Follow</div>
            <div className="ft-socials">
              <a className="ft-social-btn" href="https://www.instagram.com/automatkitchenscompany" target="_blank" rel="noreferrer" aria-label="Automat Kitchens on Instagram">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
                <span>@automatkitchenscompany</span>
              </a>
              <a className="ft-social-btn ft-social-li" href="https://www.linkedin.com/company/automat-kitchens" target="_blank" rel="noreferrer" aria-label="Automat Kitchens on LinkedIn">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                <span>LinkedIn</span>
              </a>
            </div>
            <div className="ft-val sub">© 2003–2026 Automat Kitchens W.L.L.</div>
          </div>
        </footer>
      </div>
    </section>
  );
}

// ─── WHATSAPP FLOAT ─────────────────────────────────────────────────────
function WhatsAppFloat() {
  return (
    <a className="wa" href="https://api.whatsapp.com/send?phone=96560766633&text=Hello%20there" target="_blank" rel="noreferrer" aria-label="WhatsApp">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="white">
        <path d="M17.5 14.4l-2-1c-.3-.1-.6 0-.8.2l-.7.9c-1-.5-2.4-1.8-3-2.7l.9-.8c.2-.2.3-.5.2-.8L11 8.5c-.2-.4-.6-.6-1-.5l-1.7.5c-.4.1-.6.5-.6.9 0 5 4.4 9.4 9.4 9.4.4 0 .7-.2.9-.6l.5-1.7c.1-.4-.1-.8-.5-1z M12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.3 1.2 4.7L2 22l5.4-1.4c1.4.7 2.9 1.1 4.6 1.1 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
      </svg>
    </a>
  );
}

window.AnnouncementBar = AnnouncementBar;
window.Nav             = Nav;
window.Hero            = Hero;
window.Services        = Services;
window.About           = About;
window.VideoBreak      = VideoBreak;
window.Projects        = Projects;
window.PhotoStrip      = PhotoStrip;
window.Resto           = Resto;
window.Partners        = Partners;
window.CoreValues      = CoreValues;
window.Contact         = Contact;
window.WhatsAppFloat   = WhatsAppFloat;