// ===== src/icons.jsx =====
// Lucide icon wrapper — gives us <Icon name="..." /> with consistent sizing
const Icon = ({ name, size = 18, stroke = 1.6, className = '' }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = '';
      const el = document.createElement('i');
      el.setAttribute('data-lucide', name);
      ref.current.appendChild(el);
      window.lucide.createIcons({
        attrs: { width: size, height: size, 'stroke-width': stroke },
      });
    }
  }, [name, size, stroke]);
  return <span ref={ref} className={`inline-flex ${className}`} style={{ width: size, height: size }} />;
};

window.Icon = Icon;

// ===== src/data.jsx =====
// Shared data — categories, partners, clients, products

// Six broad buckets used by the catalogue filter strip.
// Each PRODUCT below is one product line Electro Mech actually sells, and
// references one of these via `cat`.
const CATEGORIES = [
  { id: "sensing", name: "Sensing", short: "Sensing", code: "SE" },
  { id: "control", name: "Control & Timing", short: "Control", code: "CT" },
  {
    id: "switching",
    name: "Switching & Relays",
    short: "Switching",
    code: "SW",
  },
  { id: "power", name: "Power & Supplies", short: "Power", code: "PW" },
  {
    id: "measurement",
    name: "Measurement & Transmitters",
    short: "Measurement",
    code: "MS",
  },
  { id: "components", name: "Components", short: "Components", code: "CO" },
];

const PARTNERS = [
  {
    name: "Autonics",
    kind: "Sensors & controllers",
    country: "KR",
    logo: "images/partners/autonics.png",
  },
  {
    name: "Phoenix Contact",
    kind: "Connectors & I/O",
    country: "DE",
    logo: "images/partners/phoenix-contact.png",
  },
  {
    name: "HPL",
    kind: "Switchgear",
    country: "IN",
    logo: "images/partners/hpl.png",
  },
  {
    name: "Jai Balaji",
    kind: "Components",
    country: "IN",
    logo: "images/partners/jai-balaji.png",
  },
  {
    name: "Leuze",
    kind: "Optical sensors",
    country: "DE",
    logo: "images/partners/leuze.svg",
  },
  {
    name: "GIC India",
    kind: "Process controllers",
    country: "IN",
    logo: "images/partners/gic.png",
  },
];

// Industries served. Used in place of a named client list — we describe the
// floors our instruments end up on, rather than name-drop accounts.
const VERTICALS = [
  {
    name: "Automotive forging",
    note: "Press controls, induction heating, end-of-line gauging.",
  },
  {
    name: "Steel & rolling",
    note: "Thermocouples, SCR drives, mill-side automation.",
  },
  {
    name: "Cycle manufacturing",
    note: "Spot-weld timers, paint-line sensors, conveyor control.",
  },
  {
    name: "Tractor & farm equipment",
    note: "Assembly-line PLCs, torque monitors, test rigs.",
  },
  {
    name: "Gears & transmissions",
    note: "Hobbing & grinding controls, encoders, safety relays.",
  },
  {
    name: "Rubber & tyre",
    note: "Curing-press temperature loops, pressure transmitters.",
  },
];

// How an enquiry moves through the shop — 4 steps used on the homepage.
const PROCESS = [
  {
    t: "Send the requirement",
    d: "Part number, drawing, or just a description of the problem. WhatsApp a photo if that's faster.",
  },
  {
    t: "Same-day spec match",
    d: "A named contact confirms the part — or proposes an equivalent across our six partners.",
  },
  {
    t: "Quote with lead time",
    d: "Written quote with stock status, delivery window, and any duty / warranty notes.",
  },
  {
    t: "Dispatch & support",
    d: "Shipped from Ludhiana. Technical channel back to the OEM stays open after invoice.",
  },
];

// Product catalogue — 27 product lines Electro Mech sells.
// `slug` matches the filename in images/products/<slug>.jpg.
const PRODUCTS = [
  // Sensing
  {
    id: 1,
    cat: "sensing",
    slug: "photo-sensors",
    name: "Photo Sensors",
    blurb: "Through-beam, diffuse, retro-reflective.",
  },
  {
    id: 2,
    cat: "sensing",
    slug: "proximity-sensors",
    name: "Proximity Sensors",
    blurb: "Inductive & capacitive, M8–M30 bodies.",
  },
  {
    id: 3,
    cat: "sensing",
    slug: "reed-sensors",
    name: "Reed Sensors",
    blurb: "Magnetic switching for cylinders & doors.",
  },
  {
    id: 4,
    cat: "sensing",
    slug: "pressure-sensors",
    name: "Pressure Sensors",
    blurb: "Hydraulic & pneumatic, gauge & absolute.",
  },
  {
    id: 5,
    cat: "sensing",
    slug: "encoders",
    name: "Encoders",
    blurb: "Incremental & absolute, hollow & solid shaft.",
  },
  {
    id: 6,
    cat: "sensing",
    slug: "thermocouples",
    name: "Thermocouples",
    blurb: "K, J, T, R, S — bare wire to MI cable.",
  },
  {
    id: 7,
    cat: "sensing",
    slug: "limit-switch",
    name: "Limit Switches",
    blurb: "Heavy-duty, plunger and lever variants.",
  },
  // Control
  {
    id: 8,
    cat: "control",
    slug: "pid-controller",
    name: "PID Controllers",
    blurb: "1/16, 1/8 and 1/4 DIN, auto-tune.",
  },
  {
    id: 9,
    cat: "control",
    slug: "digital-temp-controller",
    name: "Digital Temp. Controllers",
    blurb: "Multi-input, relay/SSR/4–20 mA out.",
  },
  {
    id: 10,
    cat: "control",
    slug: "timers",
    name: "Timers",
    blurb: "Multifunction & dedicated, panel & DIN-rail.",
  },
  // Switching
  {
    id: 11,
    cat: "switching",
    slug: "relays",
    name: "Relays",
    blurb: "PCB, plug-in, and interface relays.",
  },
  {
    id: 12,
    cat: "switching",
    slug: "safety-relays",
    name: "Safety Relays",
    blurb: "Cat-3 / Cat-4 force-guided contacts.",
  },
  {
    id: 13,
    cat: "switching",
    slug: "ssr",
    name: "Solid State Relays",
    blurb: "AC & DC output, 10–125 A.",
  },
  // Power & supplies
  {
    id: 14,
    cat: "power",
    slug: "diodes",
    name: "Diodes",
    blurb: "Stud, disc and press-pak power diodes.",
  },
  {
    id: 15,
    cat: "power",
    slug: "igbt-modules",
    name: "IGBT Modules",
    blurb: "600–1700 V, single & dual configurations.",
  },
  {
    id: 16,
    cat: "power",
    slug: "rectifiers",
    name: "Rectifiers",
    blurb: "Bridge, half-wave, fully-controlled.",
  },
  {
    id: 17,
    cat: "power",
    slug: "scr-modules",
    name: "SCR Modules",
    blurb: "Thyristor power blocks for drives.",
  },
  {
    id: 18,
    cat: "power",
    slug: "smps",
    name: "SMPS",
    blurb: "DIN-rail and panel-mount supplies.",
  },
  {
    id: 19,
    cat: "power",
    slug: "instrument-fans-and-blowers",
    name: "Instrument Fans & Blowers",
    blurb: "AC, DC and EC variants for panels.",
  },
  // Measurement & transmitters
  {
    id: 20,
    cat: "measurement",
    slug: "clamp-on-multimeter",
    name: "Clamp-on Multimeters",
    blurb: "True-RMS, AC/DC, CAT III rated.",
  },
  {
    id: 21,
    cat: "measurement",
    slug: "current-transducers",
    name: "Current Transducers",
    blurb: "Split-core & solid-core, Hall-effect.",
  },
  {
    id: 22,
    cat: "measurement",
    slug: "power-transducers",
    name: "Power Transducers",
    blurb: "Single & three-phase active power.",
  },
  {
    id: 23,
    cat: "measurement",
    slug: "pressure-transmitter",
    name: "Pressure Transmitters",
    blurb: "4–20 mA, HART, hygienic options.",
  },
  {
    id: 24,
    cat: "measurement",
    slug: "temp-transmitters",
    name: "Temperature Transmitters",
    blurb: "Head-mount and rail-mount, RTD/TC.",
  },
  {
    id: 25,
    cat: "measurement",
    slug: "signal-isolators",
    name: "Signal Isolators",
    blurb: "Loop-powered & line-powered models.",
  },
  // Components
  {
    id: 26,
    cat: "components",
    slug: "connectors",
    name: "Connectors",
    blurb: "Aviation, M-series, COMBICON.",
  },
  {
    id: 27,
    cat: "components",
    slug: "terminal-blocks",
    name: "Terminal Blocks",
    blurb: "Screw, push-in and spring-cage.",
  },
];

Object.assign(window, { CATEGORIES, PARTNERS, VERTICALS, PROCESS, PRODUCTS });

// ===== src/chrome.jsx =====
// Reveal-on-scroll
const useReveal = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
};

// Plain serif wordmark — no symbol, no caption
const Wordmark = ({ tone = 'ink' }) => {
  const color = tone === 'ink' ? '#0A0A0A' : '#F5F2EC';
  return (
    <a href="#/" className="font-serif text-[20px] md:text-[22px] tracking-[-0.02em] leading-none" style={{ color }}>
      Electro Mech <span style={{ color: tone === 'ink' ? '#6B6B6B' : '#9A968D' }}>(India)</span>
    </a>
  );
};

const NavLink = ({ to, route, navigate, children }) => {
  const active = route === to;
  return (
    <button
      onClick={() => navigate(to)}
      className={`relative text-[14px] py-2 transition-colors ${active ? 'text-ink' : 'text-mute hover:text-ink'}`}
    >
      {children}
      <span
        className="absolute left-0 right-0 -bottom-px h-px bg-ink origin-left transition-transform"
        style={{ transform: active ? 'scaleX(1)' : 'scaleX(0)' }}
      />
    </button>
  );
};

const TopNav = ({ route, navigate }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { to: 'home',     label: 'Home' },
    { to: 'products', label: 'Products' },
    { to: 'about',    label: 'About' },
    { to: 'contact',  label: 'Contact' },
  ];

  return (
    <header
      className={`sticky top-0 z-40 transition-colors ${scrolled ? 'bg-paper/90 backdrop-blur-md border-b border-ink/10' : 'bg-paper border-b border-transparent'}`}
    >
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10 h-[68px] flex items-center justify-between">
        <Wordmark />

        <nav className="hidden md:flex items-center gap-8">
          {links.map(l => (
            <NavLink key={l.to} to={l.to} route={route} navigate={navigate}>{l.label}</NavLink>
          ))}
        </nav>

        <div className="hidden md:flex items-center gap-4">
          <a href="tel:01612537446" className="text-[13.5px] text-mute hover:text-ink transition-colors whitespace-nowrap">
            0161-2537446
          </a>
          <button
            onClick={() => navigate('contact')}
            className="bg-ink text-paper px-4 py-2.5 text-[13.5px] hover:bg-blue transition-colors rounded-sm"
          >
            Enquire
          </button>
        </div>

        <button onClick={() => setOpen(o => !o)} className="md:hidden p-2 -mr-2">
          <Icon name={open ? 'x' : 'menu'} size={22} />
        </button>
      </div>

      {open && (
        <div className="md:hidden border-t border-ink/10 bg-paper">
          <div className="px-6 py-4 flex flex-col">
            {links.map(l => (
              <button
                key={l.to}
                onClick={() => { navigate(l.to); setOpen(false); }}
                className={`text-left py-3 border-b border-ink/8 ${route === l.to ? 'text-ink' : 'text-mute'}`}
              >
                <span className="font-serif text-2xl tracking-tightest">{l.label}</span>
              </button>
            ))}
            <a href="tel:01612537446" className="text-[14px] text-mute mt-4">0161-2537446</a>
          </div>
        </div>
      )}
    </header>
  );
};

// Small uppercase eyebrow — no rules, no mono
const Eyebrow = ({ children, className = '' }) => (
  <div className={`text-[12px] uppercase tracking-[0.16em] text-mute ${className}`}>
    {children}
  </div>
);

// Footer — simple business-style, no GSTIN
const Footer = ({ navigate }) => (
  <footer className="bg-ink text-paper">
    <div className="max-w-[1280px] mx-auto px-6 lg:px-10 pt-16 pb-8">
      <div className="grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-8">
        <div className="md:col-span-5">
          <Wordmark tone="paper" />
          <p className="mt-5 text-[15px] leading-[1.65] text-paper/70 max-w-sm">
            Authorized distributor of industrial automation instruments.
            Serving North Indian manufacturing since 1989.
          </p>
        </div>

        <div className="md:col-span-3">
          <div className="text-[12px] uppercase tracking-[0.16em] text-paper/45 mb-4">Address</div>
          <address className="not-italic text-[14px] leading-[1.7] text-paper/85">
            G.T. Road, Miller Ganj<br />
            Near IDBI Bank,<br />
            Nirankari Street No. 1<br />
            Ludhiana, Punjab — 141 008
          </address>
        </div>

        <div className="md:col-span-2">
          <div className="text-[12px] uppercase tracking-[0.16em] text-paper/45 mb-4">Phone</div>
          <ul className="text-[14px] text-paper/85 space-y-1.5">
            <li><a href="tel:01612537446" className="hover:text-paper">0161-2537446</a></li>
            <li><a href="tel:01612541787" className="hover:text-paper">0161-2541787</a></li>
            <li><a href="tel:01615033359" className="hover:text-paper">0161-5033359</a></li>
            <li className="pt-2"><a href="https://wa.me/919814092663" className="hover:text-paper">+91 98140 92663</a></li>
          </ul>
        </div>

        <div className="md:col-span-2">
          <div className="text-[12px] uppercase tracking-[0.16em] text-paper/45 mb-4">Email</div>
          <ul className="text-[14px] text-paper/85 space-y-1.5">
            <li><a href="mailto:elmech456@gmail.com" className="hover:text-paper break-all">elmech456@gmail.com</a></li>
          </ul>
          <div className="mt-5 text-[12px] uppercase tracking-[0.16em] text-paper/45 mb-1.5">Hours</div>
          <p className="text-[13.5px] text-paper/70">Mon–Sat · 9:30 – 19:00</p>
        </div>
      </div>

      <div className="mt-12 pt-6 border-t border-paper/15 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div className="text-[12.5px] text-paper/50">
          © 1989–2026 Electro Mech (India). All rights reserved.
        </div>
        <div className="flex gap-6">
          {['Home','Products','About','Contact'].map(r => (
            <button key={r} onClick={() => navigate(r.toLowerCase())}
              className="text-[12.5px] text-paper/65 hover:text-paper">
              {r}
            </button>
          ))}
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { useReveal, Wordmark, TopNav, Eyebrow, Footer });

// ===== src/home.jsx =====
// HOMEPAGE — light hero, partners w/ logo slots, why-us, contact CTA. No categories grid.

const Hero = ({ navigate }) => (
  <section className="relative overflow-hidden bg-paper">
    <div className="max-w-[1280px] mx-auto px-6 lg:px-10 pt-20 md:pt-28 pb-20 md:pb-28">
      <div className="grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-12 items-center">
        <div className="md:col-span-7">
          <Eyebrow className="mb-7">Established 1989 · Ludhiana</Eyebrow>
          <h1
            className="font-serif font-light text-ink text-balance"
            style={{
              fontSize: "clamp(40px, 6vw, 84px)",
              lineHeight: 1.0,
              letterSpacing: "-0.035em",
            }}
          >
            Industrial automation instruments, since 1989.
          </h1>
          <p className="mt-7 max-w-xl text-[16.5px] leading-[1.65] text-ink/70">
            Trusted by automotive, forging, steel, gears and rubber
            manufacturers across North India.
          </p>
          <div className="mt-9 flex flex-wrap items-center gap-3">
            <button
              onClick={() => navigate("products")}
              className="inline-flex items-center gap-2 bg-ink text-paper px-5 py-3 text-[14.5px] hover:bg-blue transition-colors rounded-sm"
            >
              Browse products <Icon name="arrow-right" size={15} />
            </button>
            <button
              onClick={() => navigate("contact")}
              className="inline-flex items-center gap-2 border border-ink/25 text-ink px-5 py-3 text-[14.5px] hover:border-ink transition-colors rounded-sm"
            >
              Talk to a specialist
            </button>
          </div>

          {/* Authority numbers, inline & quiet */}
          <div className="mt-12 pt-8 border-t border-ink/12 flex flex-wrap gap-x-12 gap-y-5">
            {[
              ["37 years", "In business"],
              ["27 product lines", "In stock"],
              ["6 brand partners", "Authorized"],
            ].map(([n, t]) => (
              <div key={n}>
                <div className="font-serif text-[20px] text-ink leading-tight">
                  {n}
                </div>
                <div className="text-[13px] text-mute mt-0.5">{t}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="md:col-span-5">
          <div className="relative aspect-[4/5] bg-paper overflow-hidden rounded-sm">
            <image-slot
              id="hero-image"
              shape="rect"
              fit="contain"
              src="images/hero-illustration.webp"
              placeholder="Drop hero image (factory or product photo)"
              style={{ width: "100%", height: "100%", display: "block" }}
            ></image-slot>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const PartnerStrip = () => (
  <section className="border-y border-ink/10 bg-paper2/60">
    <div className="max-w-[1280px] mx-auto px-6 lg:px-10 py-14 md:py-20">
      <div className="text-center mb-10 md:mb-14">
        <Eyebrow className="mb-3">Authorized partners</Eyebrow>
        <h3
          className="font-serif font-light text-ink"
          style={{
            fontSize: "clamp(26px, 3vw, 36px)",
            lineHeight: 1.15,
            letterSpacing: "-0.025em",
          }}
        >
          Genuine stock from six global manufacturers.
        </h3>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-x-10 gap-y-10 md:gap-x-12 items-center">
        {PARTNERS.map((p) => (
          <div
            key={p.name}
            className="aspect-[3/2] flex items-center justify-center p-4"
          >
            <img
              src={p.logo}
              alt={p.name}
              className="max-w-full max-h-full w-auto h-auto object-contain"
            />
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Capabilities = ({ navigate }) => {
  const counts = CATEGORIES.map((c) => ({
    ...c,
    n: PRODUCTS.filter((p) => p.cat === c.id).length,
  }));
  return (
    <section className="py-20 md:py-28 bg-paper">
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-10 mb-12 md:mb-14">
          <div className="md:col-span-5 reveal">
            <Eyebrow className="mb-3">What we stock</Eyebrow>
            <h2
              className="font-serif font-light text-ink"
              style={{
                fontSize: "clamp(30px, 3.6vw, 46px)",
                lineHeight: 1.05,
                letterSpacing: "-0.03em",
              }}
            >
              Twenty-seven product lines, six categories.
            </h2>
          </div>
          <div
            className="md:col-span-6 md:col-start-7 reveal"
            style={{ transitionDelay: "100ms" }}
          >
            <p className="text-[15.5px] leading-[1.65] text-ink/70 max-w-lg">
              From a single proximity sensor to a stud-mount diode for a welding
              rectifier — we stock the breadth that keeps a panel build, or a
              line repair, on schedule.
            </p>
          </div>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-3 border-t border-l border-ink/12">
          {counts.map((c, i) => (
            <button
              key={c.id}
              onClick={() => navigate("products", { cat: c.id })}
              className="reveal group text-left border-r border-b border-ink/12 p-7 md:p-8 min-h-[160px] flex flex-col justify-between bg-paper hover:bg-paper2 transition-colors"
              style={{ transitionDelay: `${(i % 3) * 80}ms` }}
            >
              <div className="flex items-start justify-between">
                <span className="text-[10.5px] uppercase tracking-[0.22em] text-mute">
                  {c.code}
                </span>
                <span className="text-[10.5px] tnum text-mute">
                  {c.n} lines
                </span>
              </div>
              <div>
                <div className="font-serif text-[26px] md:text-[28px] tracking-tightest text-ink leading-tight">
                  {c.name}
                </div>
                <div className="mt-3 inline-flex items-center gap-2 text-[12.5px] text-ink/55 group-hover:text-blue transition-colors">
                  Browse <Icon name="arrow-right" size={12} />
                </div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
};

const VerticalsStrip = () => (
  <section className="bg-paper2/60 border-y border-ink/10 py-20 md:py-24">
    <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
      <div className="text-center max-w-2xl mx-auto mb-12 md:mb-14 reveal">
        <Eyebrow className="mb-3">Industries served</Eyebrow>
        <h2
          className="font-serif font-light text-ink"
          style={{
            fontSize: "clamp(30px, 3.6vw, 46px)",
            lineHeight: 1.1,
            letterSpacing: "-0.03em",
          }}
        >
          North India runs on these floors.
        </h2>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-2">
        {VERTICALS.map((v, i) => (
          <div
            key={v.name}
            className="reveal flex items-baseline gap-4 py-5 border-b border-ink/15"
            style={{ transitionDelay: `${(i % 3) * 70}ms` }}
          >
            <span className="text-[10.5px] tracking-[0.2em] text-mute tnum">
              {String(i + 1).padStart(2, "0")}
            </span>
            <div>
              <div className="font-serif text-[22px] tracking-tightest text-ink leading-tight">
                {v.name}
              </div>
              <div className="mt-1.5 text-[12.5px] leading-[1.55] text-mute max-w-[40ch]">
                {v.note}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Process = () => (
  <section className="py-20 md:py-28 bg-paper">
    <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
      <div className="grid grid-cols-1 md:grid-cols-12 gap-10 mb-12 md:mb-14">
        <div className="md:col-span-5 reveal">
          <Eyebrow className="mb-3">How we work</Eyebrow>
          <h2
            className="font-serif font-light text-ink"
            style={{
              fontSize: "clamp(30px, 3.6vw, 46px)",
              lineHeight: 1.05,
              letterSpacing: "-0.03em",
            }}
          >
            From enquiry to dispatch, the same week.
          </h2>
        </div>
        <div
          className="md:col-span-6 md:col-start-7 reveal"
          style={{ transitionDelay: "100ms" }}
        >
          <p className="text-[15.5px] leading-[1.65] text-ink/70 max-w-lg">
            No portals, no SLA theatre — a phone call, a named contact, and a
            quote as quickly as possible. Procurement engineers know the
            difference.
          </p>
        </div>
      </div>

      <ol className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px bg-ink/10 border border-ink/10">
        {PROCESS.map((s, i) => (
          <li
            key={s.t}
            className="reveal bg-paper p-7 md:p-8 min-h-[210px] flex flex-col"
            style={{ transitionDelay: `${i * 80}ms` }}
          >
            <div className="flex items-baseline justify-between mb-6">
              <span className="font-serif text-[44px] tnum text-ink/15 leading-none">
                {String(i + 1).padStart(2, "0")}
              </span>
              <span className="w-1.5 h-1.5 bg-blue" />
            </div>
            <div className="font-serif text-[20px] tracking-tightest text-ink leading-tight">
              {s.t}
            </div>
            <p className="mt-3 text-[13.5px] leading-[1.6] text-ink/70">
              {s.d}
            </p>
          </li>
        ))}
      </ol>
    </div>
  </section>
);

const PILLARS = [
  {
    t: "Innovative Solutions",
    d: "When the catalogue answer is wrong for the floor, we engineer the right one — sourcing across our partners until the spec, the cost, and the lead time agree.",
  },
  {
    t: "Quality Unsurpassed",
    d: "Every component is genuine, traceable, and warrantied by the manufacturer. No grey stock, no compromise at the goods-inward gate.",
  },
  {
    t: "Customer Satisfaction",
    d: "Same-day quotes, named technical contacts, and a bias to action. A line down at 6 AM is on a truck before noon.",
  },
];

const WhyUs = () => (
  <section className="py-20 md:py-28">
    <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
      <div className="text-center max-w-2xl mx-auto mb-14 reveal">
        <Eyebrow className="mb-3">Why us</Eyebrow>
        <h2
          className="font-serif font-light text-ink"
          style={{
            fontSize: "clamp(32px, 4vw, 52px)",
            lineHeight: 1.05,
            letterSpacing: "-0.03em",
          }}
        >
          Three commitments, held since 1989.
        </h2>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10">
        {PILLARS.map((p, i) => (
          <div
            key={p.t}
            className="reveal"
            style={{ transitionDelay: `${i * 80}ms` }}
          >
            <div className="font-serif text-[24px] tracking-[-0.02em] text-ink leading-tight">
              {p.t}
            </div>
            <div className="mt-3 h-px w-10 bg-blue" />
            <p className="mt-5 text-[15px] leading-[1.65] text-ink/70">{p.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const ContactCTA = ({ navigate }) => (
  <section className="bg-ink text-paper">
    <div className="max-w-[1280px] mx-auto px-6 lg:px-10 py-20 md:py-24 grid grid-cols-1 md:grid-cols-12 gap-10 items-center">
      <div className="md:col-span-7">
        <Eyebrow className="mb-4 text-paper/60">Contact</Eyebrow>
        <h2
          className="font-serif font-light"
          style={{
            fontSize: "clamp(32px, 4.4vw, 56px)",
            lineHeight: 1.05,
            letterSpacing: "-0.03em",
          }}
        >
          Get in touch — we respond as fast as we quote.
        </h2>
        <p className="mt-5 max-w-md text-[15.5px] leading-[1.65] text-paper/70">
          Procurement enquiries, technical questions, or bulk orders.
        </p>
      </div>
      <div className="md:col-span-5 md:pl-8 md:border-l border-paper/20 flex flex-col gap-4">
        <a
          href="tel:01612537446"
          className="flex items-center justify-between border-b border-paper/20 pb-3 hover:border-paper transition-colors"
        >
          <div>
            <div className="text-[12px] uppercase tracking-[0.14em] text-paper/55">
              Phone
            </div>
            <div className="text-[20px] mt-1">0161-2537446</div>
          </div>
          <Icon name="phone" size={18} className="text-paper/70" />
        </a>
        <a
          href="https://wa.me/919814092663"
          className="flex items-center justify-between border-b border-paper/20 pb-3 hover:border-paper transition-colors"
        >
          <div>
            <div className="text-[12px] uppercase tracking-[0.14em] text-paper/55">
              WhatsApp
            </div>
            <div className="text-[20px] mt-1">+91 98140 92663</div>
          </div>
          <Icon name="message-circle" size={18} className="text-paper/70" />
        </a>
        <button
          onClick={() => navigate("contact")}
          className="self-start mt-2 inline-flex items-center gap-2 bg-paper text-ink px-5 py-3 text-[14px] hover:bg-blue hover:text-paper transition-colors rounded-sm"
        >
          Send an enquiry <Icon name="arrow-right" size={14} />
        </button>
      </div>
    </div>
  </section>
);

const Home = ({ navigate }) => {
  useReveal();
  return (
    <main>
      <Hero navigate={navigate} />
      <PartnerStrip />
      <Capabilities navigate={navigate} />
      <VerticalsStrip />
      <WhyUs />
      <Process />
      <ContactCTA navigate={navigate} />
    </main>
  );
};

window.Home = Home;

// ===== src/products.jsx =====
// PRODUCTS LISTING PAGE

const ProductCard = ({ p, idx }) => {
  const cat = CATEGORIES.find(c => c.id === p.cat);
  return (
    <article className="group card-lift bg-paper border border-ink/10 hover:border-ink/40 flex flex-col">
      <div className="relative w-full aspect-[4/3] overflow-hidden bg-paper2">
        <img
          src={`images/products/${p.slug}.jpg`}
          alt={p.name}
          loading="lazy"
          className="absolute inset-0 w-full h-full object-cover transition-transform duration-[600ms] group-hover:scale-[1.03]"
        />
        <div className="absolute top-3 left-3 px-2 py-0.5 bg-paper/85 backdrop-blur-sm text-[9.5px] uppercase tracking-[0.22em] text-ink/75">
          {cat?.short}
        </div>
        <div className="absolute bottom-3 right-3 text-[9.5px] tracking-[0.18em] text-paper/75 mix-blend-difference">
          {cat?.code} · {String(p.id).padStart(2, '0')}
        </div>
      </div>
      <div className="p-5 flex flex-col gap-3 flex-1">
        <h3 className="font-serif text-[20px] leading-[1.1] tracking-tightest text-ink text-balance">
          {p.name}
        </h3>
        <div className="text-[13.5px] leading-[1.5] text-ink/65">{p.blurb}</div>
        <div className="mt-auto pt-4 border-t border-ink/10 flex items-center justify-between">
          <span className="inline-flex items-center gap-2">
            <span className="w-1.5 h-1.5 bg-blue" />
            <span className="text-[12px] text-ink/75">In stock</span>
          </span>
          <button className="inline-flex items-center gap-1.5 text-[11px] uppercase tracking-[0.18em] text-ink group-hover:text-blue transition-colors">
            Enquire <Icon name="arrow-up-right" size={12} />
          </button>
        </div>
      </div>
    </article>
  );
};

const FilterStrip = ({ active, setActive }) => {
  const all = [{ id: 'all', short: 'All', code: '—' }, ...CATEGORIES];
  return (
    <div className="sticky top-[68px] z-30 bg-paper/90 backdrop-blur-md border-b border-ink/10">
      <div className="max-w-[1320px] mx-auto px-6 lg:px-10">
        <div className="flex items-center gap-6 py-4 overflow-x-auto no-scrollbar">
          <span className="shrink-0 text-[10.5px] uppercase tracking-[0.22em] text-mute">Filter</span>
          <div className="flex items-center gap-2">
            {all.map(c => {
              const on = active === c.id;
              return (
                <button key={c.id} onClick={() => setActive(c.id)}
                  className={`shrink-0 px-3.5 py-1.5 text-[12.5px] tracking-[0.01em] border transition-colors
                    ${on ? 'bg-ink text-paper border-ink' : 'bg-transparent text-ink/75 border-ink/15 hover:border-ink/50 hover:text-ink'}`}>
                  {c.short}
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};

const Products = ({ navigate, initialCat }) => {
  useReveal();
  const [active, setActive] = React.useState(initialCat || 'all');
  React.useEffect(() => { if (initialCat) setActive(initialCat); }, [initialCat]);

  const filtered = active === 'all' ? PRODUCTS : PRODUCTS.filter(p => p.cat === active);
  const activeCat = CATEGORIES.find(c => c.id === active);

  return (
    <main>
      {/* Header */}
      <section className="pt-12 md:pt-20 pb-10 md:pb-14">
        <div className="max-w-[1320px] mx-auto px-6 lg:px-10">
          <div className="flex items-center gap-3 mb-8 text-[10.5px] uppercase tracking-[0.22em] text-mute">
            <button onClick={() => navigate('home')} className="hover:text-ink">Home</button>
            <span>/</span>
            <span className="text-ink">Products</span>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-10 items-end">
            <div className="md:col-span-8">
              <Eyebrow className="mb-5">Catalogue · 2026</Eyebrow>
              <h1 className="font-serif font-light text-ink" style={{ fontSize: 'clamp(44px, 6.4vw, 92px)', lineHeight: 0.96, letterSpacing: '-0.045em' }}>
                {active === 'all' ? (
                  <>The full range,<br/><span className="italic">organized.</span></>
                ) : (
                  <>{activeCat.name}.</>
                )}
              </h1>
            </div>
            <div className="md:col-span-4 md:pl-8 md:border-l border-ink/15">
              <p className="text-[15.5px] leading-[1.6] text-ink/70">
                {active === 'all'
                  ? 'Twenty-seven product lines, six authorized partners, hundreds of part numbers in active stock. Filter below — or call us with the requirement and skip the catalogue entirely.'
                  : `Authorized stock from our partner manufacturers. If your spec isn't shown, call — most ${activeCat.short.toLowerCase()} requests are handled outside the visible catalogue.`}
              </p>
              <div className="mt-5 flex items-center gap-5 text-[11px] uppercase tracking-[0.18em] text-mute">
                <span><span className="text-ink tnum">{filtered.length}</span> products</span>
                <span className="h-3 w-px bg-ink/20" />
                <span>Updated 04·2026</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <FilterStrip active={active} setActive={setActive} />

      {/* Grid */}
      <section className="py-10 md:py-14">
        <div className="max-w-[1320px] mx-auto px-6 lg:px-10">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
            {filtered.map((p, i) => (
              <div key={p.id} className="reveal" style={{ transitionDelay: `${(i % 8) * 50}ms` }}>
                <ProductCard p={p} idx={i} />
              </div>
            ))}
          </div>

          {filtered.length === 0 && (
            <div className="py-24 text-center text-ink/60">
              <div className="font-serif text-3xl">Nothing to show in this category.</div>
              <div className="mt-3 text-[12px] uppercase tracking-[0.2em]">Call us — we'll source it.</div>
            </div>
          )}
        </div>
      </section>

      {/* Sticky enquiry CTA */}
      <StickyEnquiry navigate={navigate} />

      {/* Bottom CTA band */}
      <section className="bg-ink text-paper py-20 md:py-24 mt-10">
        <div className="max-w-[1320px] mx-auto px-6 lg:px-10 grid grid-cols-1 md:grid-cols-12 gap-10 items-end">
          <div className="md:col-span-7">
            <Eyebrow className="mb-5 [&>span]:text-paper/70 [&>.h-px]:bg-paper/40">Can't find a part?</Eyebrow>
            <h2 className="font-serif font-light" style={{ fontSize: 'clamp(36px, 4.8vw, 64px)', lineHeight: 0.98, letterSpacing: '-0.045em' }}>
              The catalogue is a starting point.<br/>
              <span className="italic text-paper/85">Tell us the requirement.</span>
            </h2>
          </div>
          <div className="md:col-span-5 md:pl-10 md:border-l border-paper/20">
            <p className="text-[15.5px] leading-[1.6] text-paper/75 mb-6">
              Most enquiries are handled by phone within the same business
              hour. Bring the part number, the use-case, or simply the
              symptom — we'll work the rest out.
            </p>
            <div className="flex flex-wrap gap-3">
              <button onClick={() => navigate('contact')}
                className="inline-flex items-center gap-3 bg-paper text-ink px-5 py-3 text-[14px] hover:bg-blue hover:text-paper transition-colors">
                Send enquiry <Icon name="arrow-right" size={14} />
              </button>
              <a href="tel:01612537446"
                className="inline-flex items-center gap-3 border border-paper/35 px-5 py-3 text-[14px] hover:bg-paper hover:text-ink transition-colors">
                <Icon name="phone" size={14} /> 0161-2537446
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

const StickyEnquiry = ({ navigate }) => {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 400);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div
      className={`fixed bottom-6 right-6 z-40 transition-all duration-500 ${show ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-3 pointer-events-none'}`}
    >
      <button onClick={() => navigate('contact')}
        className="group inline-flex items-center gap-3 bg-blue text-paper pl-5 pr-3 py-3.5 shadow-[0_8px_24px_rgba(11,61,145,0.25)] hover:bg-ink transition-colors">
        <span className="text-[10.5px] uppercase tracking-[0.22em] text-paper/70">01</span>
        <span className="text-[14px]">Send an enquiry</span>
        <span className="grid place-items-center w-7 h-7 border border-paper/40">
          <Icon name="arrow-right" size={13} />
        </span>
      </button>
    </div>
  );
};

window.Products = Products;

// ===== src/about.jsx =====
// ABOUT PAGE

const About = ({ navigate }) => {
  useReveal();
  return (
    <main>
      {/* Editorial opener */}
      <section className="pt-16 md:pt-28 pb-16 md:pb-24">
        <div className="max-w-[1320px] mx-auto px-6 lg:px-10">
          <div className="flex items-center gap-3 mb-10 text-[10.5px] uppercase tracking-[0.22em] text-mute">
            <button onClick={() => navigate('home')} className="hover:text-ink">Home</button>
            <span>/</span>
            <span className="text-ink">About</span>
          </div>

          <Eyebrow className="mb-8">Our story · Est. 1989</Eyebrow>

          <h1 className="font-serif font-light text-ink max-w-[18ch] text-balance"
              style={{ fontSize: 'clamp(44px, 7vw, 112px)', lineHeight: 0.94, letterSpacing: '-0.045em' }}>
            Since 1989, supplying the instruments that keep India's <span className="italic">factories running.</span>
          </h1>
        </div>
      </section>

      {/* Two-column story + portrait plate */}
      <section className="pb-20 md:pb-28">
        <div className="max-w-[1320px] mx-auto px-6 lg:px-10 grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-16">
          <div className="md:col-span-5 reveal">
            <div className="aspect-[4/5] stripe-bg relative overflow-hidden">
              <svg className="absolute inset-0 w-full h-full opacity-40" viewBox="0 0 400 500">
                <g stroke="#0A0A0A" strokeOpacity="0.35" fill="none">
                  <rect x="40" y="40" width="320" height="420"/>
                  <rect x="60" y="60" width="280" height="380"/>
                  <line x1="40" y1="200" x2="360" y2="200"/>
                  <line x1="40" y1="320" x2="360" y2="320"/>
                  <circle cx="200" cy="120" r="40"/>
                  <circle cx="200" cy="120" r="28"/>
                </g>
                <text x="40" y="30" fontFamily="JetBrains Mono" fontSize="9" fill="#0A0A0A" fillOpacity="0.5" letterSpacing="2">
                  PHOTO · WORKSHOP / 1991
                </text>
                <text x="40" y="478" fontFamily="JetBrains Mono" fontSize="9" fill="#0A0A0A" fillOpacity="0.5" letterSpacing="2">
                  G.T. ROAD, MILLER GANJ
                </text>
              </svg>
              <div className="absolute top-4 left-4 w-6 h-6 border-l border-t border-ink/40" />
              <div className="absolute top-4 right-4 w-6 h-6 border-r border-t border-ink/40" />
              <div className="absolute bottom-4 left-4 w-6 h-6 border-l border-b border-ink/40" />
              <div className="absolute bottom-4 right-4 w-6 h-6 border-r border-b border-ink/40" />
            </div>
            <p className="mt-4 text-[10.5px] uppercase tracking-[0.22em] text-mute">
              Fig. 02 — Workshop. Ludhiana, Punjab. Circa 1991.
            </p>
          </div>

          <div className="md:col-span-7 md:pt-6 reveal" style={{ transitionDelay: '120ms' }}>
            <div className="prose-none space-y-6 text-[17px] leading-[1.65] text-ink/80 max-w-[60ch]">
              <p className="first-letter:font-serif first-letter:text-[68px] first-letter:leading-[0.85] first-letter:float-left first-letter:mr-3 first-letter:mt-1 first-letter:text-ink">
                Electro Mech (India) was founded in Ludhiana in 1989, in a
                single room off G.T. Road, on the bet that India's factories
                would always need a vendor who actually knew the difference
                between a stud-mount diode and a press-pak. Thirty-seven
                years later, that bet is the business.
              </p>
              <p>
                We are an authorized distributor and importer of industrial
                automation instruments and electromechanical components,
                working directly with six manufacturers across Germany,
                South Korea and India. Our job is to compress the distance
                between a procurement engineer's RFQ and a working line —
                and to do it without surprises.
              </p>
              <p>
                What that looks like, day to day: phones that get answered,
                stock that's genuine and traceable, technical pre-sales
                from people who've been on the floor, and a same-day-quote
                discipline we've held for nearly four decades. The market
                has changed; that hasn't.
              </p>
            </div>

            <div className="mt-12 pt-8 border-t border-ink/15 grid grid-cols-2 gap-6 max-w-md">
              <div>
                <div className="text-[10.5px] uppercase tracking-[0.22em] text-mute">Founded</div>
                <div className="mt-1 font-serif text-[22px] tnum">1989</div>
              </div>
              <div>
                <div className="text-[10.5px] uppercase tracking-[0.22em] text-mute">Headquarters</div>
                <div className="mt-1 font-serif text-[22px]">Ludhiana</div>
              </div>
              <div>
                <div className="text-[10.5px] uppercase tracking-[0.22em] text-mute">Channel</div>
                <div className="mt-1 font-serif text-[22px]">Authorized</div>
              </div>
              <div>
                <div className="text-[10.5px] uppercase tracking-[0.22em] text-mute">Coverage</div>
                <div className="mt-1 font-serif text-[22px]">North India</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Stats band */}
      <section className="bg-ink text-paper">
        <div className="max-w-[1320px] mx-auto px-6 lg:px-10 py-16 md:py-24">
          <div className="grid grid-cols-2 md:grid-cols-4">
            {[
              { n: '37',   l: 'years', t: 'in business' },
              { n: '27',   l: 'product', t: 'lines' },
              { n: '06',   l: 'global', t: 'brand partners' },
              { n: '200+', l: 'active', t: 'accounts' },
            ].map((s, i) => (
              <div key={i} className={`reveal py-6 ${i > 0 ? 'md:border-l border-paper/20 md:pl-10' : 'md:pr-10'}`}
                   style={{ transitionDelay: `${i * 80}ms` }}>
                <div className="text-[10.5px] uppercase tracking-[0.22em] text-paper/45 mb-3">{s.l}</div>
                <div className="font-serif font-light tnum text-paper" style={{ fontSize: 'clamp(56px, 7vw, 96px)', lineHeight: 0.9, letterSpacing: '-0.045em' }}>
                  {s.n}
                </div>
                <div className="mt-3 text-[14px] text-paper/70">{s.t}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Brand partners detailed */}
      <section className="py-20 md:py-28">
        <div className="max-w-[1320px] mx-auto px-6 lg:px-10">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-10 mb-14">
            <div className="md:col-span-5 reveal">
              <Eyebrow className="mb-5">Authorized partners</Eyebrow>
              <h2 className="font-serif font-light text-ink" style={{ fontSize: 'clamp(36px, 4.6vw, 64px)', lineHeight: 1, letterSpacing: '-0.045em' }}>
                Six manufacturers.<br/>
                <span className="italic">Direct relationships.</span>
              </h2>
            </div>
            <div className="md:col-span-6 md:col-start-7 reveal" style={{ transitionDelay: '100ms' }}>
              <p className="text-[16px] leading-[1.65] text-ink/75 max-w-lg">
                Each partnership is a written authorization, not a reseller
                arrangement — meaning genuine stock, factory warranty, and
                the technical channel back to the OEM when an answer needs
                to come from the source.
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 border-t border-l border-ink/12">
            {PARTNERS.map((p, i) => (
              <div key={p.name} className="reveal border-r border-b border-ink/12 p-8 min-h-[200px] flex flex-col justify-between"
                   style={{ transitionDelay: `${(i % 3) * 80}ms` }}>
                <div className="flex items-start justify-between">
                  <span className="text-[10.5px] uppercase tracking-[0.22em] text-mute">
                    {String(i + 1).padStart(2, '0')} · {p.country}
                  </span>
                  <span className="w-1.5 h-1.5 bg-blue mt-2" />
                </div>
                <div>
                  <div className="font-serif text-[34px] tracking-tightest text-ink">{p.name}</div>
                  <div className="mt-1 text-[13px] text-mute">{p.kind}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Industries served */}
      <section className="bg-paper2 border-y border-ink/10 py-20 md:py-28">
        <div className="max-w-[1320px] mx-auto px-6 lg:px-10">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-10 mb-14">
            <div className="md:col-span-5 reveal">
              <Eyebrow className="mb-5">Industries served</Eyebrow>
              <h2 className="font-serif font-light text-ink" style={{ fontSize: 'clamp(36px, 4.6vw, 64px)', lineHeight: 1, letterSpacing: '-0.045em' }}>
                Where our instruments end up.
              </h2>
            </div>
            <div className="md:col-span-6 md:col-start-7 reveal" style={{ transitionDelay: '100ms' }}>
              <p className="text-[16px] leading-[1.65] text-ink/75 max-w-lg">
                North India's industrial belt — automotive forging, steel,
                cycles, tractors, gears, rubber. The same shortlist of
                instruments shows up across all of it; the application is
                what changes.
              </p>
            </div>
          </div>

          <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 border-t border-l border-ink/12">
            {VERTICALS.map((v, i) => (
              <li key={v.name} className="reveal border-r border-b border-ink/12 p-8 min-h-[180px] flex flex-col justify-between"
                  style={{ transitionDelay: `${(i % 3) * 80}ms` }}>
                <div className="flex items-start justify-between">
                  <span className="text-[10.5px] uppercase tracking-[0.22em] text-mute">
                    {String(i + 1).padStart(2, '0')}
                  </span>
                  <span className="w-1.5 h-1.5 bg-blue mt-2" />
                </div>
                <div>
                  <div className="font-serif text-[26px] tracking-tightest text-ink leading-tight">{v.name}</div>
                  <div className="mt-2 text-[13px] leading-[1.55] text-mute max-w-[36ch]">{v.note}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* Closing CTA */}
      <section className="py-24 md:py-32">
        <div className="max-w-[1320px] mx-auto px-6 lg:px-10 grid grid-cols-1 md:grid-cols-12 gap-10 items-end">
          <div className="md:col-span-8 reveal">
            <Eyebrow className="mb-6">Next step</Eyebrow>
            <h2 className="font-serif font-light text-ink" style={{ fontSize: 'clamp(40px, 5.4vw, 84px)', lineHeight: 0.98, letterSpacing: '-0.045em' }}>
              Bring us the requirement.<br/>
              <span className="italic">We'll bring the part.</span>
            </h2>
          </div>
          <div className="md:col-span-4 md:pl-8 md:border-l border-ink/15 reveal" style={{ transitionDelay: '120ms' }}>
            <div className="flex flex-col gap-3">
              <button onClick={() => navigate('contact')}
                className="inline-flex items-center justify-between gap-3 bg-ink text-paper px-5 py-4 text-[14px] hover:bg-blue transition-colors">
                <span>Open enquiry form</span>
                <Icon name="arrow-right" size={14} />
              </button>
              <a href="tel:01612537446"
                className="inline-flex items-center justify-between gap-3 border border-ink/25 px-5 py-4 text-[14px] hover:bg-ink hover:text-paper transition-colors">
                <span>Call · 0161-2537446</span>
                <Icon name="phone" size={14} />
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

window.About = About;

// ===== src/contact.jsx =====
// CONTACT — paper-on-paper editorial layout matching the rest of the site

const EnquiryForm = () => {
  const [form, setForm] = React.useState({
    name: "",
    phone: "",
    email: "",
    message: "",
  });
  const [status, setStatus] = React.useState({ state: "idle", error: null });

  const isValid = form.name && form.phone && form.email && form.message;
  const submitting = status.state === "submitting";

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!isValid || submitting) return;
    setStatus({ state: "submitting", error: null });
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.error || "Something went wrong.");
      }
      setStatus({ state: "success", error: null });
    } catch (err) {
      setStatus({
        state: "error",
        error:
          err && err.message
            ? err.message
            : "We couldn't send your message right now.",
      });
    }
  };

  if (status.state === "success") {
    return (
      <div className="min-h-[440px] flex flex-col items-start justify-center">
        <div className="w-10 h-10 rounded-full bg-blue/10 text-blue grid place-items-center mb-6">
          <Icon name="check" size={20} stroke={2} />
        </div>
        <h3
          className="font-serif font-light text-ink"
          style={{
            fontSize: "clamp(26px, 2.8vw, 36px)",
            lineHeight: 1.1,
            letterSpacing: "-0.025em",
          }}
        >
          Thank you — we'll be in touch.
        </h3>
        <p className="mt-4 text-[15px] leading-[1.6] text-ink/65 max-w-sm">
          We've received your message and will reply within one business day.
        </p>
        <button
          onClick={() => {
            setStatus({ state: "idle", error: null });
            setForm({ name: "", phone: "", email: "", message: "" });
          }}
          className="mt-7 text-[13.5px] text-blue hover:underline"
        >
          Send another message
        </button>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit}>
      <h2 className="font-serif text-[24px] md:text-[28px] tracking-[-0.02em] text-ink leading-tight">
        Send us an enquiry
      </h2>
      <p className="mt-2 text-[14.5px] text-ink/65">
        Fields marked <span className="text-blue">*</span> are required.
      </p>

      <div className="mt-9 space-y-7">
        <div>
          <label className="field-label">
            Name <span className="text-blue">*</span>
          </label>
          <input
            type="text"
            className="field"
            disabled={submitting}
            value={form.name}
            onChange={(e) => setForm({ ...form, name: e.target.value })}
          />
        </div>
        <div>
          <label className="field-label">
            Phone <span className="text-blue">*</span>
          </label>
          <input
            type="tel"
            className="field"
            placeholder="+91"
            disabled={submitting}
            value={form.phone}
            onChange={(e) => setForm({ ...form, phone: e.target.value })}
          />
        </div>
        <div>
          <label className="field-label">
            Email <span className="text-blue">*</span>
          </label>
          <input
            type="email"
            className="field"
            disabled={submitting}
            value={form.email}
            onChange={(e) => setForm({ ...form, email: e.target.value })}
          />
        </div>
        <div>
          <label className="field-label">
            Message <span className="text-blue">*</span>
          </label>
          <textarea
            rows="5"
            className="field"
            disabled={submitting}
            placeholder="Tell us what you need."
            value={form.message}
            onChange={(e) => setForm({ ...form, message: e.target.value })}
          />
        </div>
      </div>

      {status.state === "error" && (
        <div className="mt-7 pt-5 border-t border-ink/15 flex items-start gap-3">
          <span className="mt-0.5 text-blue shrink-0">
            <Icon name="alert-circle" size={16} />
          </span>
          <div className="text-[14px] leading-[1.55]">
            <span className="text-ink">Couldn't send your message.</span>{" "}
            <span className="text-ink/65">
              Please call us, or email{" "}
              <a
                href="mailto:elmech456@gmail.com"
                className="text-blue hover:underline"
              >
                elmech456@gmail.com
              </a>{" "}
              directly.
            </span>
          </div>
        </div>
      )}

      <div className="mt-10 flex flex-wrap items-center gap-x-6 gap-y-3">
        <button
          type="submit"
          disabled={!isValid || submitting}
          className={`inline-flex items-center gap-2 px-6 py-3.5 text-[14.5px] rounded-sm transition-colors
            ${!isValid || submitting ? "bg-ink/10 text-ink/40 cursor-not-allowed" : "bg-ink text-paper hover:bg-blue cursor-pointer"}`}
        >
          {submitting ? (
            <>
              Sending…{" "}
              <Icon name="loader-2" size={15} className="animate-spin" />
            </>
          ) : (
            <>
              Send enquiry <Icon name="arrow-right" size={15} />
            </>
          )}
        </button>
        <p className="text-[13.5px] text-ink/60">
          Or email{" "}
          <a
            href="mailto:elmech456@gmail.com"
            className="text-blue hover:underline"
          >
            elmech456@gmail.com
          </a>
        </p>
      </div>
    </form>
  );
};

const Contact = ({ navigate }) => {
  useReveal();
  return (
    <main className="bg-paper">
      {/* Header */}
      <section className="pt-16 md:pt-24 pb-12 md:pb-16">
        <div className="max-w-[1280px] mx-auto px-6 lg:px-10 text-center">
          <Eyebrow className="mb-4">Get in touch</Eyebrow>
          <h1
            className="font-serif font-light text-ink"
            style={{
              fontSize: "clamp(40px, 5.5vw, 72px)",
              lineHeight: 1.0,
              letterSpacing: "-0.035em",
            }}
          >
            Talk to us.
          </h1>
          <p className="mt-5 max-w-xl mx-auto text-[16px] leading-[1.6] text-ink/70">
            Procurement enquiries, technical questions, or bulk orders — we
            respond as quickly as we can.
          </p>
        </div>
      </section>

      {/* Two-column */}
      <section className="pb-20 md:pb-28">
        <div className="max-w-[1180px] mx-auto px-6 lg:px-10 grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-16">
          {/* LEFT — editorial rows on paper, no cards */}
          <div>
            <h2 className="font-serif text-[24px] md:text-[28px] tracking-[-0.02em] text-ink leading-tight">
              Contact details
            </h2>
            <p className="mt-2 text-[14.5px] text-ink/65">
              The fastest way to reach us is by phone or WhatsApp.
            </p>

            <div className="mt-9 border-t border-ink/12 divide-y divide-ink/12">
              {/* Phone */}
              <div className="py-7">
                <div className="text-[11px] uppercase tracking-[0.14em] text-mute mb-3 flex items-center gap-2">
                  <Icon name="phone" size={12} /> Call us
                </div>
                <ul className="space-y-1.5 text-[17px] tnum">
                  <li>
                    <a
                      href="tel:01612537446"
                      className="text-ink hover:text-blue transition-colors"
                    >
                      0161-2537446
                    </a>
                  </li>
                  <li>
                    <a
                      href="tel:01612541787"
                      className="text-ink hover:text-blue transition-colors"
                    >
                      0161-2541787
                    </a>
                  </li>
                  <li>
                    <a
                      href="tel:01615033359"
                      className="text-ink hover:text-blue transition-colors"
                    >
                      0161-5033359
                    </a>
                  </li>
                </ul>
              </div>

              {/* WhatsApp */}
              <a
                href="https://wa.me/919814092663"
                target="_blank"
                rel="noopener"
                className="block py-7 group"
              >
                <div className="text-[11px] uppercase tracking-[0.14em] text-mute mb-3 flex items-center gap-2">
                  <Icon name="message-circle" size={12} /> WhatsApp
                </div>
                <div className="flex items-center justify-between">
                  <div className="text-[17px] tnum text-ink group-hover:text-blue transition-colors">
                    +91 98140 92663
                  </div>
                  <Icon
                    name="arrow-up-right"
                    size={16}
                    className="text-mute group-hover:text-blue transition-colors"
                  />
                </div>
              </a>

              {/* Email */}
              <div className="py-7">
                <div className="text-[11px] uppercase tracking-[0.14em] text-mute mb-3 flex items-center gap-2">
                  <Icon name="mail" size={12} /> Email
                </div>
                <ul className="space-y-3 text-[15px]">
                  <li>
                    <a
                      href="mailto:elmech456@gmail.com"
                      className="text-ink hover:text-blue transition-colors"
                    >
                      elmech456@gmail.com
                    </a>
                    <span className="block text-[12.5px] text-mute mt-0.5">
                      Quotes, orders &amp; general enquiries
                    </span>
                  </li>
                </ul>
              </div>

              {/* Address */}
              <div className="py-7">
                <div className="text-[11px] uppercase tracking-[0.14em] text-mute mb-3 flex items-center gap-2">
                  <Icon name="map-pin" size={12} /> Address
                </div>
                <address className="not-italic text-[15px] leading-[1.65] text-ink">
                  Electro Mech (India)
                  <br />
                  G.T. Road, Miller Ganj
                  <br />
                  Near IDBI Bank, Nirankari Street No. 1<br />
                  Ludhiana, Punjab — 141 008
                </address>
                <a
                  href="https://www.google.com/maps/dir/?api=1&destination=Niran+Kari+Nagar,+Miller+Ganj,+Ludhiana,+Punjab+141008"
                  target="_blank"
                  rel="noopener"
                  className="mt-3 inline-flex items-center gap-1.5 text-[13px] text-blue hover:underline"
                >
                  Get directions <Icon name="arrow-up-right" size={12} />
                </a>
              </div>

              {/* Hours */}
              <div className="py-7">
                <div className="text-[11px] uppercase tracking-[0.14em] text-mute mb-3 flex items-center gap-2">
                  <Icon name="clock" size={12} /> Hours
                </div>
                <p className="text-[15px] leading-[1.65] text-ink">
                  Monday – Saturday <span className="text-mute">·</span>{" "}
                  <span className="tnum">9:30 AM – 7:00 PM IST</span>
                </p>
              </div>
            </div>
          </div>

          {/* RIGHT — form */}
          <div className="md:pl-12 md:border-l md:border-ink/12">
            <EnquiryForm />
          </div>
        </div>
      </section>

      {/* Map */}
      <section className="border-t border-ink/10">
        <div className="max-w-[1280px] mx-auto px-6 lg:px-10 py-14 md:py-20">
          <div className="text-center mb-8">
            <Eyebrow className="mb-3">Visit us</Eyebrow>
            <h2
              className="font-serif font-light text-ink"
              style={{
                fontSize: "clamp(26px, 3vw, 36px)",
                lineHeight: 1.15,
                letterSpacing: "-0.025em",
              }}
            >
              Ludhiana, Punjab
            </h2>
          </div>
          <div className="aspect-[16/8] md:aspect-[16/6] bg-paper2 border border-ink/10 rounded-sm overflow-hidden relative">
            <iframe
              title="Electro Mech (India) location"
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3439.5847312345678!2d75.8555800!3d30.9189000!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391a83037d74c239%3A0xacac0d972f187a4f!2sElectro%20Mech%20India!5e0!3m2!1sen!2sca!4v1778020691711!5m2!1sen!2sca"
              className="absolute inset-0 w-full h-full"
              style={{ border: 0, filter: "saturate(0.85) contrast(0.97)" }}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
            />
            <a
              href="https://www.google.com/maps/dir/?api=1&destination=Niran+Kari+Nagar,+Miller+Ganj,+Ludhiana,+Punjab+141008"
              target="_blank"
              rel="noopener"
              className="absolute bottom-4 right-4 inline-flex items-center gap-2 bg-white border border-ink/15 px-3.5 py-2 text-[13px] hover:border-ink transition-colors rounded-sm shadow-sm"
            >
              <Icon name="map-pin" size={13} /> Open in Google Maps
            </a>
          </div>
        </div>
      </section>
    </main>
  );
};

window.Contact = Contact;

// ===== src/app.jsx =====
// App router — hash-based, simple

const parseHash = () => {
  const h = (window.location.hash || '#/').replace(/^#\/?/, '');
  const [path, qs] = h.split('?');
  const params = {};
  if (qs) qs.split('&').forEach(kv => { const [k,v] = kv.split('='); if (k) params[k] = decodeURIComponent(v||''); });
  const route = path || 'home';
  return { route, params };
};

const App = () => {
  const [{ route, params }, setRoute] = React.useState(parseHash());

  React.useEffect(() => {
    const onHash = () => {
      setRoute(parseHash());
      window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' });
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const navigate = (to, p) => {
    let h = '#/' + to;
    if (p) h += '?' + Object.entries(p).map(([k,v]) => `${k}=${encodeURIComponent(v)}`).join('&');
    if (window.location.hash === h) {
      window.scrollTo({ top: 0 });
    } else {
      window.location.hash = h;
    }
  };

  let page;
  if (route === 'products') page = <Products navigate={navigate} initialCat={params.cat} />;
  else if (route === 'about') page = <About navigate={navigate} />;
  else if (route === 'contact') page = <Contact navigate={navigate} />;
  else page = <Home navigate={navigate} />;

  return (
    <div className="min-h-screen flex flex-col">
      <TopNav route={route} navigate={navigate} />
      <div data-screen-label={
        route === 'products' ? '02 Products' :
        route === 'about'    ? '03 About' :
        route === 'contact'  ? '04 Contact' :
                               '01 Home'
      } className="flex-1">
        {page}
      </div>
      <Footer navigate={navigate} />
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);