/* global React, PCBMacro, ImgPh */
const { useState: useStateSvc } = React;

const SERVICES = [
{ id: 'assembly', cat: 'Assembly', name: 'Circuit board assembly', desc: 'Surface mount and thru-hole production from prototypes to mid-volume runs.', tag: 'IPC-A-610' },
{ id: 'rework', cat: 'Rework', name: 'Circuit board rework and modification', desc: 'BGA reballing, fine-pitch component replacement, and field-failure recovery.', tag: 'BGA · QFN' },
{ id: 'wires', cat: 'Wires and Cables', name: 'Wires and Cables', desc: 'Custom wire harnesses and cable assemblies — crimped, terminated, and tested to spec for production runs and one-off integrations.', tag: 'Crimp · Harness' },
{ id: 'proto', cat: 'Custom prototyping', name: 'Custom prototyping', desc: 'One-off boards and bespoke builds — proof-of-concept work, new revisions, and small exploratory runs for teams refining a product before production.', tag: 'Prototype' },
{ id: 'mech', cat: 'Mechanical', name: 'Mechanical assembly', desc: 'Enclosures, harnesses, panel-mount, and final box-build integration.', tag: 'Box build' },
{ id: 'solder', cat: 'Soldering', name: 'Soldering services', desc: 'Hand-soldering for prototypes, rework, and complex thru-hole work.', tag: 'Class 3' },
{ id: 'print', cat: '3D printing', name: '3D printing', desc: 'Functional prototypes, jigs, and small-run enclosure parts in FDM and resin.', tag: 'FDM · SLA' },
{ id: 'laser', cat: 'Laser engraving', name: 'Laser engraving', desc: 'Permanent marking on enclosures, panels, and metal or acrylic parts for branding, serialization, and traceability.', tag: 'Engraving' },
{ id: 'horn', cat: 'Train horn', name: 'Train horn systems', desc: 'A specialty line — drivers, controllers, and harnesses for train horn rigs.', tag: 'Specialty' }];


const CATEGORIES = ['All', 'Assembly', 'Rework', 'Wires and Cables', 'Custom prototyping', 'Mechanical', 'Soldering', '3D printing', 'Laser engraving', 'Train horn'];

function ServiceCard({ s, hover, faded }) {
  const handleClick = () => {
    window.dispatchEvent(new CustomEvent('contact-prefill', { detail: { what: s.name } }));
    if (window.smoothScrollToCenter) window.smoothScrollToCenter('contact');
  };
  return (
    <div
      onClick={handleClick}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(); } }}
      className={"svc-card" + (hover ? " is-hover" : "") + (faded ? " is-faded" : "")}>
      <div className="svc-body">
        <h3>{s.name}</h3>
        <p>{s.desc}</p>
        <div className="svc-meta">
          <span>→</span>
        </div>
      </div>
    </div>);

}

function Dropdown({ value, onChange, options, open, setOpen }) {
  return (
    <div className={"dropdown" + (open ? " is-open" : "")}>
      <div className="dropdown-trigger" onClick={() => setOpen(!open)}>
        <span>{value}</span>
        <span className="caret">▾</span>
      </div>
      {open &&
      <div className="dropdown-menu">
          {options.map((o) =>
        <div
          key={o}
          className={"dropdown-item" + (o === value ? " is-active" : "")}
          onClick={() => {onChange(o);setOpen(false);}}>
          
              {o}
            </div>
        )}
        </div>
      }
    </div>);

}

function ServiceGrid({ initialFilter = 'All', dropdownOpen = false, hoverIndex = -1, fadeNonMatch = false }) {
  const [filter, setFilter] = useStateSvc(initialFilter);
  const [open, setOpen] = useStateSvc(dropdownOpen);
  const matches = (s) => filter === 'All' || s.cat === filter;
  const visibleCount = SERVICES.filter(matches).length;

  return (
    <section id="services" className="svc-section">
      <div className="svc-inner">
        <header className="svc-header">
          <div className="svc-header-left">
            <span className="eyebrow" style={{ display: 'block', marginBottom: 14 }}>What we make</span>
            <h2>A catalog of <em>specific</em> services.</h2>
          </div>
          <div className="svc-header-right">
            <span className="svc-filter-label">Filter by category</span>
            <div className="svc-filter-control">
              <Dropdown value={filter} onChange={setFilter} options={CATEGORIES} open={open} setOpen={setOpen} />
              {filter !== 'All' && (
                <span className="chip" style={{ marginLeft: 12 }}>
                  {filter} · {visibleCount}
                  <span className="x" onClick={() => setFilter('All')}>×</span>
                </span>
              )}
            </div>
          </div>
        </header>

        <div className="svc-grid-3">
          {SERVICES.map((s, i) => {
            const m = matches(s);
            if (!m && !fadeNonMatch) return null;
            return <ServiceCard key={s.id} s={s} hover={i === hoverIndex} faded={!m && fadeNonMatch} />;
          })}
        </div>

        <div className="svc-foot">
          Don't see what you need? We take on specialty work, especially in low-volume specialty electronics.
        </div>
      </div>
    </section>);

}

window.ServiceGrid = ServiceGrid;
window.SERVICES = SERVICES;
window.CATEGORIES = CATEGORIES;