/* global React, Link, Placeholder, HTSteelBand, CTACard,
   PHONE_DISPLAY, PHONE_TEL, EMAIL, NAV */
const { useState: useStateP } = React;

/* ============================================
   DATA
   ============================================ */
const SERVICES = [
  {
    slug: "agricultural-repairs",
    num: "01",
    title: "Agricultural Repairs",
    blurb: "On-site & workshop welding for diggers, buckets, lorries, gates and grids.",
    detail: "From a fly-wheel facing to a full new bucket floor, we keep working farms running. The mobile rig comes to you when the machine can't move.",
    cover: "AGRICULTURAL REPAIRS · WORKSHOP",
    img: "tractor,farm machinery,repair",
    list: [
      "Hydraulic pipe making",
      "Lorry repairs & fabrication",
      "Digger repairs",
      "Bucket repairs — new floors, sides, cutting edges, teeth, shanks",
      "Skip repairs",
      "Boss repairs & alterations",
      "Facing fly wheels",
      "Skimming cylinder heads",
      "On-site welding (mobile rig)",
      "Gates & feed barriers",
      "Grain bins & storage",
      "Handling systems",
      "Cattle grids",
      "Slurry grills",
      "Kennels & stabling",
      "Sheeted doors",
    ],
  },
  {
    slug: "welding-fabrication",
    num: "02",
    title: "Welding & Fabrication",
    blurb: "TIG, MIG, ferrous & non-ferrous — every metal in the rack.",
    detail: "Fabrication done properly, in steel, stainless or non-ferrous. Finishing partners handle galvanising, powder coating and paintwork end-to-end.",
    cover: "TIG WELDING · STAINLESS",
    img: "welder,welding sparks,workshop",
    list: [
      "TIG welding",
      "MIG welding",
      "Ferrous & non-ferrous",
      "Spot welding",
      "Bespoke bracketing",
      "Sand-blasting",
      "Custom grills & drains",
      "Folded guttering",
      "Manor fencing",
      "Painting",
      "Galvanising",
      "Powder coating",
    ],
  },
  {
    slug: "bespoke",
    num: "03",
    title: "Bespoke",
    blurb: "Estate gates, staircases, balconies and one-off commissions.",
    detail: "Domestic, commercial and artist commissions. The bottle sculpture (Glastonbury, Welsh Assembly, Greenpeace London) was made here.",
    cover: "ESTATE GATES · BRENDON HILLS",
    img: "wrought iron gate,estate gates,countryside",
    list: [
      "Estate railings & fences",
      "Domestic gates",
      "Commercial gates",
      "Spiral staircases",
      "Quarter-turn staircases",
      "Half-turn staircases",
      "Fire escapes",
      "Metal staircases with wooden treads",
      "Balconies",
      "Art & sculpture commissions",
    ],
  },
  {
    slug: "machining-cnc",
    num: "04",
    title: "Machining & CNC",
    blurb: "Plasma cutting 1–25mm direct from CAD, plus lathe, fold and roll.",
    detail: "Send drawings as DXF or DWG and we'll plasma-cut, fold, bend or roll to spec. Capacity from a single bracket to a long production run.",
    cover: "CNC PLASMA · SWIFT CUT TABLE",
    img: "cnc plasma cutting,sparks,industrial",
    list: [
      "CNC plasma cutting (Swift Cut · 1mm–25mm)",
      "Centre lathing",
      "Head skimming",
      "Guillotining",
      "Punching",
      "Tube bending & rolling",
      "CNC sheet forming",
      "Erculina ring roller",
      "Custom drilling",
      "Pins & bushes",
    ],
  },
  {
    slug: "steel-sales",
    num: "05",
    title: "Steel Sales",
    blurb: "Steel by the metre — walk-in stock at Slowley Farm.",
    detail: "Walk-in steel sales at Slowley Farm. Bring drawings or rough sizes and we'll cut and drill from our stock.",
    cover: "STEEL STOCK · BOX SECTION RACK",
    img: "steel stock,metal warehouse,rolled steel",
    list: [
      "Box section",
      "Tube",
      "Angle iron",
      "Flat plate",
      "Mild steel",
      "Stainless steel",
      "Galvanised sheets",
      "Aluminium",
      "Beams & channels (drilling optional)",
      "Cor-ten weathering steel",
    ],
  },
];

const MATERIALS = ["Wrought iron", "Cast iron", "Mild steel", "Stainless 304/316", "Brass", "Bronze", "Copper", "Cor-ten", "Aluminium"];
const WELDING = ["TIG", "MIG", "Spot welding", "Ferrous", "Non-ferrous", "On-site mobile rig"];

const GALLERY = [
  { id: "042", title: "Estate gates", where: "Brendon Hills", cat: "Bespoke", feat: true, img: "wrought iron gate,estate" },
  { id: "038", title: "Cattle grid install", where: "Exmoor", cat: "Agricultural", img: "cattle grid,countryside" },
  { id: "036", title: "Spiral staircase", where: "Domestic", cat: "Bespoke", tall: true, img: "spiral staircase,metal" },
  { id: "041", title: "Digger bucket re-floor", where: "Workshop", cat: "Agricultural", img: "excavator bucket,welding" },
  { id: "024", title: "Bottle sculpture", where: "Glastonbury", cat: "Bespoke", img: "metal sculpture,art installation" },
  { id: "039", title: "Folded gutters", where: "Manor", cat: "Welding", img: "metal gutter,architecture" },
  { id: "045", title: "Custom bracketing", where: "Commercial", cat: "Welding", img: "metal bracket,fabrication" },
  { id: "048", title: "Plasma-cut signs", where: "Workshop", cat: "Machining", img: "cnc cutting,metal signs" },
  { id: "051", title: "Sheeted barn door", where: "Wootton Farm", cat: "Agricultural", img: "barn door,farm" },
  { id: "053", title: "Manor fencing", where: "Brendon", cat: "Bespoke", tall: true, img: "estate fence,wrought iron" },
  { id: "055", title: "Box section rack", where: "Stock", cat: "Steel Sales", img: "steel stock,warehouse" },
  { id: "057", title: "Fire-escape stair", where: "Commercial", cat: "Bespoke", img: "fire escape stair,steel" },
];

/* ============================================
   HOME
   ============================================ */
function HomePage() {
  return (
    <main data-screen-label="01 Home">
      {/* HERO */}
      <section className="hero" data-screen-label="Hero">
        <Placeholder label="HE.001 · WORKSHOP · 16:9" img="welding workshop,sparks,industrial,dark" w={2000} h={1300} />
        <div className="hero-corner">
          <span className="l">HE.001 · WORKSHOP — SLOWLEY FARM</span>
          <span className="r">SCROLL ↓</span>
        </div>
        <div className="hero-text">
          <h1>Welding, fabrication, and four generations of getting on with it.</h1>
          <div>
            <p>A family workshop on Slowley Farm, Luxborough. Repairs for Somerset's farms and businesses, bespoke commissions, and CNC plasma cut to size.</p>
            <div className="cta-row">
              <a className="btn btn-accent" href={PHONE_TEL}>Call Richard · <span className="num">{PHONE_DISPLAY}</span></a>
              <Link to="/services" className="btn btn-ghost">Our services →</Link>
            </div>
          </div>
        </div>
      </section>

      {/* SERVICES STRIP */}
      <section className="section" data-screen-label="Services overview">
        <div className="svc-strip">
          <div>
            <span className="eyebrow">— 01 / Services</span>
            <h2>Five lines, one workshop.</h2>
            <p className="lead">From a busted digger bucket to a one-off staircase, the answer's usually yes.</p>
            <div style={{ marginTop: 24 }}>
              <Link to="/services" className="text-link">View all services →</Link>
            </div>
          </div>
          <div className="svc-tiles">
            {SERVICES.map(s => (
              <Link key={s.slug} to={`/services/${s.slug}`} className="svc-tile">
                <Placeholder label={s.cover} img={s.img} w={900} h={680} />
                <div className="lab">
                  <span className="n">{s.num}</span>
                  <h3>{s.title}</h3>
                  <span className="arr">→</span>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* BOTTLE FEATURE TILE */}
      <section className="section-bleed" data-screen-label="Bottle sculpture feature">
        <div className="full-tile">
          <Placeholder label="HE.024 · BOTTLE SCULPTURE · GLASTONBURY" img="metal sculpture,festival,steel art" w={2000} h={1200} />
          <div className="full-tile-overlay">
            <div>
              <span className="eyebrow eyebrow-accent">— Featured commission</span>
              <h2 style={{ marginTop: 10 }}>The bottle sculpture.</h2>
              <Link to="/services/bespoke" className="more">See bespoke work →</Link>
            </div>
            <div className="meta">'14 GLASTONBURY<br />'15 LIVERPOOL<br />'16 WELSH ASSEMBLY<br />'18 GREENPEACE · LONDON</div>
          </div>
        </div>
      </section>

      {/* MATERIALS */}
      <section className="section" data-screen-label="Materials & welding">
        <div style={{ maxWidth: "var(--max)", margin: "0 auto" }}>
          <div className="svc-strip" style={{ alignItems: "start", marginBottom: 40 }}>
            <div>
              <span className="eyebrow">— 02 / What we work with</span>
              <h2>Every metal in the rack.</h2>
            </div>
            <p className="lead">If your job isn't in the list, ring us anyway. We've worked on most things in 60 years.</p>
          </div>
          <div className="chip-band">
            <div>
              <h3>Materials</h3>
              <div className="chips">
                {MATERIALS.map(m => <span key={m} className="chip">{m}</span>)}
              </div>
            </div>
            <div>
              <h3>Welding types</h3>
              <div className="chips">
                {WELDING.map(m => <span key={m} className="chip">{m}</span>)}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* RECENT WORK */}
      <section style={{ borderBottom: "1px solid var(--line)" }} data-screen-label="Recent work">
        <div style={{ padding: "80px var(--gutter) 8px", maxWidth: "var(--max)", margin: "0 auto" }}>
          <div className="svc-strip" style={{ alignItems: "start" }}>
            <div>
              <span className="eyebrow">— 03 / Recent work</span>
              <h2>From farm to festival.</h2>
            </div>
            <p className="lead">A working sample from the Slowley Farm yard.<br /><br /><Link to="/gallery" className="text-link">View the full gallery →</Link></p>
          </div>
        </div>
        <div className="work-mosaic">
          <div className="feat"><Placeholder label="ESTATE GATES · BRENDON HILLS" img="wrought iron gate,estate,countryside" w={1200} h={1500} /></div>
          <Placeholder label="CATTLE GRID · EXMOOR" img="cattle grid,rural road" w={900} h={700} />
          <Placeholder label="SPIRAL STAIR · DOMESTIC" img="spiral staircase,metal" w={900} h={700} />
          <Placeholder label="DIGGER BUCKET RE-FLOOR" img="excavator bucket,workshop" w={900} h={700} />
          <Placeholder label="FOLDED GUTTER · MANOR" img="metal gutter,roof" w={900} h={700} />
        </div>
      </section>

      {/* TESTIMONIAL */}
      <section data-screen-label="Quote">
        <div className="quote-strip">
          <blockquote>"Came out same day. Welded the loader back together in the yard. Back in the field by lunch."</blockquote>
          <cite>— <span className="name">Tom Patterson</span> · Wootton Farm, Exmoor</cite>
        </div>
      </section>

      {/* CONTACT BAND */}
      <section data-screen-label="Contact teaser">
        <div className="contact-band">
          <div>
            <span className="eyebrow eyebrow-accent">— Call Richard direct</span>
            <br />
            <a className="big" href={PHONE_TEL}>{PHONE_DISPLAY}</a>
          </div>
          <div className="lines">
            Slowley Farm · Luxborough · Somerset TA23 0SB<br />
            <a href={`mailto:${EMAIL}`}>{EMAIL}</a><br />
            Mon–Fri 08:00–17:00 · Out-of-hours on-site by arrangement
          </div>
        </div>
      </section>

      <HTSteelBand />
    </main>
  );
}

/* ============================================
   SERVICES HUB
   ============================================ */
function ServicesHub() {
  return (
    <main data-screen-label="02 Services hub">
      <section className="page-head">
        <Placeholder label="HE.002 · WORKSHOP — TIG BENCH" img="welding workshop,tig welder,sparks" w={2000} h={900} />
        <div className="inner">
          <div className="crumbs"><Link to="/">Henson Engineering</Link> &nbsp;/&nbsp; <span>Services</span></div>
          <div className="head-grid">
            <div>
              <span className="eyebrow">— Services index</span>
              <h1 style={{ marginTop: 12 }}>What we do.<br /><span style={{ color: "var(--accent)" }}>Five service lines.</span></h1>
            </div>
            <div>
              <p className="lead">A complete metal-trades shop in one place — repairs and fabrication for farms and industry, bespoke architectural work, CNC plasma cutting and walk-in steel sales.</p>
              <div style={{ marginTop: 18, display: "flex", gap: 12, flexWrap: "wrap" }}>
                <a className="btn btn-accent" href={PHONE_TEL}>Call · <span className="num">{PHONE_DISPLAY}</span></a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div style={{ maxWidth: "var(--max)", margin: "0 auto" }}>
          <div className="svc-tiles" style={{ gridTemplateColumns: "repeat(2, 1fr)" }}>
            {SERVICES.map(s => (
              <Link key={s.slug} to={`/services/${s.slug}`} className="svc-tile">
                <Placeholder label={s.cover} img={s.img} w={1100} h={780} />
                <div className="lab">
                  <span className="n">{s.num}</span>
                  <h3>{s.title}</h3>
                  <span className="arr">→</span>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <HTSteelBand />
    </main>
  );
}

/* ============================================
   SERVICE DETAIL
   ============================================ */
function ServiceDetail({ slug }) {
  const s = SERVICES.find(x => x.slug === slug);
  if (!s) return <NotFound />;
  const idx = SERVICES.findIndex(x => x.slug === slug);
  const prev = SERVICES[(idx - 1 + SERVICES.length) % SERVICES.length];
  const next = SERVICES[(idx + 1) % SERVICES.length];
  return (
    <main data-screen-label={`Service · ${s.title}`}>
      <section className="page-head">
        <Placeholder label={`HE.${s.num} · ${s.cover}`} img={s.img} w={2000} h={900} />
        <div className="inner">
          <div className="crumbs">
            <Link to="/">Henson</Link> &nbsp;/&nbsp; <Link to="/services">Services</Link> &nbsp;/&nbsp; <span>{s.title}</span>
          </div>
          <div className="head-grid">
            <div>
              <span className="eyebrow eyebrow-accent">— {s.num} / 05 · Service</span>
              <h1 style={{ marginTop: 12 }}>{s.title}.</h1>
            </div>
            <div>
              <p className="lead">{s.detail}</p>
              <div style={{ marginTop: 18, display: "flex", flexWrap: "wrap", gap: 12 }}>
                <a className="btn btn-accent" href={PHONE_TEL}>Call · <span className="num">{PHONE_DISPLAY}</span></a>
                <a className="btn btn-ghost" href={`mailto:${EMAIL}?subject=${encodeURIComponent(s.title + " enquiry")}`}>Email a job sheet</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section>
        <div className="svc-detail-body">
          <aside className="svc-aside">
            <span className="eyebrow">— On this page</span>
            <p style={{ marginTop: 14 }}>The list opposite isn't exhaustive — if your job isn't on it, ring us anyway.</p>
            <table className="spec-table">
              <tbody>
                <tr><td>Location</td><td>Workshop · on-site (mobile rig)</td></tr>
                <tr><td>Lead time</td><td>1–7 days · same-day emergency</td></tr>
                <tr><td>Drawings</td><td>DXF · DWG · paper sketch</td></tr>
                <tr><td>Finish</td><td>Paint · galvanise · powder coat</td></tr>
                <tr><td>Quote</td><td>By phone · no obligation</td></tr>
              </tbody>
            </table>
          </aside>
          <div>
            <span className="eyebrow">— Service list</span>
            <h2 style={{ marginTop: 12 }}>{s.list.length} things we do under {s.title.toLowerCase()}.</h2>
            <ul className="svc-list">
              {s.list.map(item => <li key={item}>{item}</li>)}
            </ul>
            <CTACard title={`Ready to talk about a ${s.title.toLowerCase()} job?`} />
          </div>
        </div>
      </section>

      {/* Examples */}
      <section style={{ borderBottom: "1px solid var(--line)" }}>
        <div style={{ padding: "80px var(--gutter) 8px", maxWidth: "var(--max)", margin: "0 auto" }}>
          <div className="svc-strip" style={{ alignItems: "start" }}>
            <div>
              <span className="eyebrow">— Examples</span>
              <h2>Recent {s.title.toLowerCase()} jobs.</h2>
            </div>
            <p className="lead">A sample from the last twelve months.<br /><br /><Link to="/gallery" className="text-link">View the full gallery →</Link></p>
          </div>
        </div>
        <div className="work-mosaic">
          <div className="feat"><Placeholder label={`${s.title.toUpperCase()} · JOB 1`} img={s.img} w={1200} h={1500} /></div>
          <Placeholder label={`${s.title.toUpperCase()} · JOB 2`} img={s.img} w={900} h={700} />
          <Placeholder label={`${s.title.toUpperCase()} · JOB 3`} img={s.img} w={900} h={700} />
          <Placeholder label={`${s.title.toUpperCase()} · JOB 4`} img={s.img} w={900} h={700} />
          <Placeholder label={`${s.title.toUpperCase()} · JOB 5`} img={s.img} w={900} h={700} />
        </div>
      </section>

      {/* Prev/next */}
      <section>
        <div className="prevnext">
          <Link to={`/services/${prev.slug}`}>
            <span className="lab">← Previous · {prev.num}</span>
            <span className="ttl">{prev.title}</span>
          </Link>
          <Link to={`/services/${next.slug}`}>
            <span className="lab">Next · {next.num} →</span>
            <span className="ttl">{next.title}</span>
          </Link>
        </div>
      </section>

      <HTSteelBand />
    </main>
  );
}

/* ============================================
   GALLERY
   ============================================ */
const GALLERY_CATS = ["All", "Bespoke", "Agricultural", "Welding", "Machining", "Steel Sales"];

function GalleryPage() {
  const [filter, setFilter] = useStateP("All");
  const items = filter === "All" ? GALLERY : GALLERY.filter(i => i.cat === filter);
  return (
    <main data-screen-label="Gallery">
      <section className="page-head">
        <Placeholder label="HE.GAL · WORK SAMPLE" img="wrought iron gate,estate,countryside" w={2000} h={900} />
        <div className="inner">
          <div className="crumbs"><Link to="/">Henson</Link> &nbsp;/&nbsp; <span>Gallery</span></div>
          <div className="head-grid">
            <div>
              <span className="eyebrow">— Gallery</span>
              <h1 style={{ marginTop: 12 }}>Recent work.</h1>
            </div>
            <div>
              <p className="lead">A working sample from the last few years — bespoke gates, on-farm repairs, sculpture and the day-to-day output of the Slowley Farm workshop.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div style={{ maxWidth: "var(--max)", margin: "0 auto" }}>
          <div className="gallery-filters">
            {GALLERY_CATS.map(c => (
              <button key={c} className={`gallery-filter ${c === filter ? "active" : ""}`} onClick={() => setFilter(c)}>
                {c}
              </button>
            ))}
          </div>
          <div className="gallery-grid">
            {items.map(it => (
              <div key={it.id} className={`item ${it.feat ? "feat" : ""} ${it.tall ? "tall" : ""}`}>
                <Placeholder label={`HE.${it.id} · ${it.title.toUpperCase()}`} img={it.img} w={it.feat ? 1400 : 800} h={it.feat ? 1400 : (it.tall ? 1100 : 800)} />
                <div className="cap">
                  <h4>{it.title}</h4>
                  <div className="meta">HE.{it.id} · {it.cat} · {it.where}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section data-screen-label="Contact teaser">
        <div className="contact-band">
          <div>
            <span className="eyebrow eyebrow-accent">— Got something in mind?</span>
            <br />
            <a className="big" href={PHONE_TEL}>{PHONE_DISPLAY}</a>
          </div>
          <div className="lines">
            Send a photo and rough measurements and<br />
            we'll come back with a price by the next<br />
            working day. <Link to="/contact" style={{ color: "var(--accent)" }}>Or use the contact form →</Link>
          </div>
        </div>
      </section>

      <HTSteelBand />
    </main>
  );
}

/* ============================================
   ABOUT
   ============================================ */
function AboutPage() {
  return (
    <main data-screen-label="About">
      <section className="page-head">
        <Placeholder label="HE.ABOUT · RICHARD IN THE WORKSHOP" img="welder portrait,workshop,craftsman" w={2000} h={900} />
        <div className="inner">
          <div className="crumbs"><Link to="/">Henson</Link> &nbsp;/&nbsp; <span>About</span></div>
          <div className="head-grid">
            <div>
              <span className="eyebrow">— About · Family business</span>
              <h1 style={{ marginTop: 12 }}>A family workshop<br /><span style={{ color: "var(--accent)" }}>on a working farm.</span></h1>
            </div>
            <div>
              <p className="lead">Four generations welding, fabricating and fixing for Somerset's farmers, businesses and householders. The workshop sits on Slowley Farm in Luxborough, where the kettle's usually on.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Story */}
      <section className="section">
        <div className="row-2col">
          <Placeholder label="RICHARD IN THE WORKSHOP · TIG BENCH" img="welder,tig welding,workshop" w={1100} h={900} />
          <div>
            <span className="eyebrow">— The story</span>
            <h2 style={{ marginTop: 12, marginBottom: 18 }}>Four generations. One workshop. Every metal.</h2>
            <p>Started by Richard's grandfather in the 1960s, the business has grown from a single forge under a tin roof to a fully-kitted modern fabrication shop — without ever leaving the farm.</p>
            <p>We've kept the things that mattered: a straight quote, work done when we said we'd do it, and a willingness to have a look at anything that arrives on the back of a trailer.</p>
            <p>We've added the things that helped: a Swift Cut CNC plasma table, an Erculina ring roller, an Erculina sheet former, and a full TIG suite for stainless and non-ferrous.</p>
            <p>The result is a small workshop that can take a job from a sketch on paper to a finished, galvanised, painted product without it ever leaving Somerset.</p>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="section">
        <div style={{ maxWidth: "var(--max)", margin: "0 auto 32px" }}>
          <span className="eyebrow">— Workshop spec</span>
          <h2 style={{ marginTop: 12 }}>The shop, in numbers.</h2>
        </div>
        <div className="stats">
          {[
            ["YEARS", "60+", "Est. 1962", false],
            ["GENERATIONS", "4", "Henson family", false],
            ["METALS", "09", "Fe · Stainless · Cu", false],
            ["MAX CUT", "25 mm", "Swift Cut CNC", false],
            ["BED LENGTH", "7.0 m", "Plasma table", false],
            ["PROCESS", "TIG / MIG / Spot", "Fe & non-Fe", true],
            ["MOBILE", "On-site", "Anywhere SW", false],
            ["LEAD TIME", "1–7 d", "Same-day emerg.", false],
          ].map(([k, v, sub, sm]) => (
            <div key={k} className="stat">
              <div className="k">— {k}</div>
              <div className={`v ${sm ? "v-sm" : ""}`}>{v}</div>
              <div className="sub">{sub}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Steps */}
      <section className="section">
        <div style={{ maxWidth: "var(--max)", margin: "0 auto 40px" }}>
          <span className="eyebrow">— How we work</span>
          <h2 style={{ marginTop: 12 }}>Straightforward.</h2>
        </div>
        <div className="steps">
          <div className="step">
            <div className="n">— Step 01</div>
            <h3>You call.</h3>
            <p>Richard picks up. Tell him the job — broken bucket, new gate, fire-escape spec. He'll tell you straight if we can do it.</p>
          </div>
          <div className="step">
            <div className="n">— Step 02</div>
            <h3>We have a look.</h3>
            <p>Drop it in, send a photo, or we'll come to you with the mobile rig if the machine can't move.</p>
          </div>
          <div className="step">
            <div className="n">— Step 03</div>
            <h3>We get on with it.</h3>
            <p>Quoted, made, painted or galvanised, delivered. One workshop, no sub-contracting around the houses.</p>
          </div>
        </div>
      </section>

      <HTSteelBand />
    </main>
  );
}

/* ============================================
   CONTACT
   ============================================ */
function ContactPage() {
  const [state, setState] = useStateP({ name: "", email: "", phone: "", message: "" });
  const [errors, setErrors] = useStateP({});
  const [sent, setSent] = useStateP(false);
  const update = (k) => (e) => setState(s => ({ ...s, [k]: e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    const er = {};
    if (!state.name.trim()) er.name = "Required";
    if (!state.email.trim() && !state.phone.trim()) {
      er.email = "Email or phone required";
      er.phone = "Email or phone required";
    }
    if (state.email && !/^\S+@\S+\.\S+$/.test(state.email)) er.email = "Doesn't look right";
    if (!state.message.trim() || state.message.trim().length < 10) er.message = "Tell us a bit more (10+ chars)";
    setErrors(er);
    if (Object.keys(er).length === 0) {
      setSent(true);
      setState({ name: "", email: "", phone: "", message: "" });
    }
  };
  return (
    <main data-screen-label="Contact">
      <section className="page-head">
        <Placeholder label="HE.CONTACT · WORKSHOP DOOR" img="workshop door,industrial entrance" w={2000} h={900} />
        <div className="inner">
          <div className="crumbs"><Link to="/">Henson</Link> &nbsp;/&nbsp; <span>Contact</span></div>
          <div className="head-grid">
            <div>
              <span className="eyebrow">— Contact</span>
              <h1 style={{ marginTop: 12 }}>Get in touch.</h1>
            </div>
            <div>
              <p className="lead">Quickest way is to ring Richard direct. He's usually in the workshop or in the yard — leave a message if it bounces and he'll come back to you the same day.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="contact-grid">
        <div className="contact-info">
          <div className="info-block">
            <span className="label">— Phone</span>
            <a className="value mono" href={PHONE_TEL}>{PHONE_DISPLAY}</a>
            <div className="sub">Tap to call · Richard Henson direct.</div>
          </div>
          <div className="info-block">
            <span className="label">— Email</span>
            <a className="value" style={{ fontSize: 18 }} href={`mailto:${EMAIL}`}>{EMAIL}</a>
          </div>
          <div className="info-block">
            <span className="label">— Workshop</span>
            <div className="value">Slowley Farm<br />Luxborough<br />Somerset TA23 0SB</div>
            <div className="sub mono" style={{ marginTop: 8 }}>51.1483°N · 3.4847°W</div>
          </div>
          <div className="info-block">
            <span className="label">— Hours</span>
            <div className="value">Mon–Fri · <span className="mono">08:00–17:00</span></div>
            <div className="sub">Out-of-hours on-site by arrangement.</div>
          </div>
          <div className="map-embed">
            <Placeholder label="MAP · SLOWLEY FARM · TA23 0SB" img="aerial view,countryside,england" w={900} h={600} style={{ position: "absolute", inset: 0 }} />
          </div>
        </div>

        <div className="contact-form-wrap">
          <span className="eyebrow">— Or send a message</span>
          <h2 style={{ marginTop: 8, marginBottom: 24 }}>Tell us about the job.</h2>
          {sent && (
            <div className="success-banner">
              ✓ Thanks — we'll get back to you within one working day.
            </div>
          )}
          <form onSubmit={submit} noValidate>
            <div className="form-field">
              <label htmlFor="n">Your name</label>
              <input id="n" type="text" value={state.name} onChange={update("name")} placeholder="John Smith" />
              {errors.name && <div className="form-error">— {errors.name}</div>}
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div className="form-field">
                <label htmlFor="e">Email</label>
                <input id="e" type="email" value={state.email} onChange={update("email")} placeholder="john@farm.co.uk" />
                {errors.email && <div className="form-error">— {errors.email}</div>}
              </div>
              <div className="form-field">
                <label htmlFor="p">Phone</label>
                <input id="p" type="tel" value={state.phone} onChange={update("phone")} placeholder="07xxx" />
                {errors.phone && <div className="form-error">— {errors.phone}</div>}
              </div>
            </div>
            <div className="form-field">
              <label htmlFor="m">What's the job?</label>
              <textarea id="m" value={state.message} onChange={update("message")} placeholder="Broken digger bucket, need new floor and edges. Can drop it in next week."></textarea>
              {errors.message && <div className="form-error">— {errors.message}</div>}
            </div>
            <button type="submit" className="btn btn-accent btn-lg">
              Send message →
            </button>
            <div className="mono" style={{ marginTop: 18, fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--paper-mute)" }}>
              — Or skip the form: tap-to-call <a href={PHONE_TEL} style={{ color: "var(--accent)", textDecoration: "none", borderBottom: "1px solid currentColor", paddingBottom: 1 }}>{PHONE_DISPLAY}</a>
            </div>
          </form>
        </div>
      </section>

      <HTSteelBand />
    </main>
  );
}

/* ============================================
   NOT FOUND
   ============================================ */
function NotFound() {
  return (
    <main>
      <section className="notfound">
        <div className="num">404</div>
        <h1 style={{ marginBottom: 14 }}>Page not found.</h1>
        <p className="lead" style={{ margin: "0 auto 24px" }}>That page isn't where it should be.</p>
        <div style={{ display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap" }}>
          <Link to="/" className="btn btn-ghost">← Home</Link>
          <a className="btn btn-accent" href={PHONE_TEL}>Call · <span className="num">{PHONE_DISPLAY}</span></a>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, {
  HomePage, ServicesHub, ServiceDetail, GalleryPage, AboutPage, ContactPage, NotFound,
  SERVICES,
});