'use client';

import React, { useState } from 'react';

export default function HomePage() {
  const [openFaq, setOpenFaq] = useState<number | null>(0);
  const [submitting, setSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);

  const handleFaqToggle = (index: number) => {
    setOpenFaq(openFaq === index ? null : index);
  };

  const handleQuoteSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitting(true);
    setTimeout(() => {
      setSubmitting(false);
      setSubmitted(true);
      setTimeout(() => setSubmitted(false), 2200);
    }, 900);
  };

  return (
    <>
      <style jsx global>{`
        @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700;800&display=swap');

        :root {
          --ink: #0B0B0C;
          --paper: #FFFFFF;
          --paper-dim: #F5F4EF;
          --yellow: #FFC629;
          --coral: #FF5A36;
          --blue: #2B59FF;
          --grey: #6B6E76;
          --line: #111112;
          --lightline: #E4E2DA;
          --radius: 6px;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
          margin: 0;
          font-family: 'Inter', sans-serif;
          background: var(--paper);
          color: var(--ink);
          -webkit-font-smoothing: antialiased;
        }
        .display { font-family: 'Archivo Black', sans-serif; }
        img, svg { display: block; max-width: 100%; }
        a { color: inherit; text-decoration: none; }
        .wrap { max-width: 1220px; margin: 0 auto; padding: 0 32px; }
        button { font-family: inherit; cursor: pointer; }
        :focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

        /* ---------- DIAGONAL SEAM ---------- */
        .seam { height: 56px; position: relative; }
        .seam svg { width: 100%; height: 100%; display: block; }
        @media (max-width: 700px) { .seam { height: 32px; } }

        /* ---------- HEADER ---------- */
        header {
          background: var(--paper);
          border-bottom: 2px solid var(--ink);
          position: sticky; top: 0; z-index: 50;
        }
        nav.main {
          display: flex; align-items: center; justify-content: space-between;
          padding: 20px 32px; max-width: 1220px; margin: 0 auto;
        }
        .logo {
          display: flex; align-items: center; gap: 10px;
          font-family: 'Archivo Black', sans-serif;
          font-size: 19px; color: var(--ink); letter-spacing: -0.01em;
        }
        .logo .dotcom { color: var(--coral); }
        .navlinks { display: flex; gap: 30px; align-items: center; }
        .navlinks a { font-size: 15px; color: var(--grey); font-weight: 600; }
        .navlinks a:hover { color: var(--coral); }

        .btn {
          display: inline-flex; align-items: center; justify-content: center; gap: 8px;
          padding: 13px 24px; border-radius: var(--radius);
          font-weight: 800; font-size: 15px; border: 2px solid transparent;
          transition: transform .12s ease; text-decoration: none;
        }
        .btn:active { transform: translateY(1px); }
        .btn-yellow { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
        .btn-yellow:hover { background: #FFD65C; }
        .btn-coral { background: var(--coral); color: var(--paper); border-color: var(--coral); }
        .btn-coral:hover { background: #ff6f4d; }
        .btn-outline-light { border-color: var(--ink); color: var(--ink); }
        .btn-outline-light:hover { background: var(--ink); color: var(--paper); }
        .btn-outline-white { border-color: var(--paper); color: var(--paper); }
        .btn-outline-white:hover { background: var(--paper); color: var(--coral); }

        /* ---------- HERO ---------- */
        .hero { background: var(--paper); color: var(--ink); padding-top: 60px; padding-bottom: 76px; overflow: hidden; }
        .hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
        .tag {
          display: inline-flex; align-items: center; gap: 8px;
          background: var(--ink); color: var(--yellow);
          font-weight: 800; font-size: 12.5px; letter-spacing: 0.04em;
          text-transform: uppercase; padding: 7px 12px; border-radius: 3px;
          margin-bottom: 22px; transform: rotate(-1.5deg);
        }
        h1 { font-family: 'Archivo Black', sans-serif; font-size: 56px; line-height: 1.04; margin: 0 0 22px; letter-spacing: -0.01em; }
        h1 .hl { background: var(--yellow); padding: 2px 10px; display: inline-block; transform: rotate(-1deg); border: 3px solid var(--ink); border-radius: 4px; }
        .hero-copy p.lede { font-size: 18px; line-height: 1.6; color: var(--grey); max-width: 46ch; margin: 0 0 32px; }
        .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
        .boxgraphic { position: relative; height: 400px; }
        .boxgraphic svg { width: 100%; height: 100%; }

        /* ---------- MARQUEE ---------- */
        .marquee { background: var(--ink); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); overflow: hidden; padding: 15px 0; }
        .marquee-track { display: flex; width: max-content; animation: scroll 26s linear infinite; }
        .marquee-item { display: flex; align-items: center; gap: 14px; font-family: 'Archivo Black', sans-serif; font-size: 19px; color: var(--yellow); padding: 0 28px; white-space: nowrap; }
        .marquee-item .sep { width: 8px; height: 8px; background: var(--coral); border-radius: 50%; }
        @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

        /* ---------- TICKET / QUOTE FORM ---------- */
        .quote-zone { background: var(--paper); padding: 56px 0 66px; }
        .ticket {
          background: var(--paper); border: 3px solid var(--ink); border-radius: 10px;
          box-shadow: 8px 8px 0 var(--ink); display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto;
        }
        .tfield { padding: 22px 24px; border-right: 2px dashed var(--lightline); }
        .tfield:last-of-type { border-right: none; }
        .tfield label { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--grey); margin-bottom: 8px; }
        .tfield input, .tfield select { width: 100%; border: none; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: var(--ink); background: transparent; padding: 0; }
        .tfield input:focus, .tfield select:focus { outline: none; }
        .tfield input::placeholder { color: #B7B7BC; font-weight: 600; }
        .ticket-submit { display: flex; align-items: center; background: var(--coral); padding: 10px; border-radius: 0 6px 6px 0; }
        .ticket-submit button { background: none; border: none; color: var(--paper); font-weight: 800; font-size: 15px; padding: 10px 18px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
        .ticket-submit small { font-weight: 600; font-size: 11px; opacity: 0.9; }
        .quote-note { margin-top: 20px; display: flex; gap: 26px; flex-wrap: wrap; font-size: 14px; font-weight: 600; color: var(--ink); }
        .quote-note span { display: flex; align-items: center; gap: 8px; }
        .quote-note svg { width: 16px; height: 16px; flex: none; color: var(--coral); }

        /* ---------- SECTION SHELL ---------- */
        section { padding: 80px 0; }
        .section-head { max-width: 640px; margin-bottom: 52px; }
        .section-head .tag { margin-bottom: 16px; }
        .section-head h2 { font-family: 'Archivo Black', sans-serif; font-size: 37px; line-height: 1.1; margin: 0 0 16px; letter-spacing: -0.01em; }
        .section-head p { font-size: 17px; line-height: 1.6; color: var(--grey); margin: 0; }

        /* ---------- HOW IT WORKS ---------- */
        .how-section { background: var(--yellow); padding-top: 0; }
        .how-section .tag { background: var(--ink); color: var(--yellow); transform: rotate(-1.5deg); }
        .how-section .section-head p { color: #4a3c0f; }
        .ramp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .ramp-step { border-radius: 10px; padding: 32px 28px; position: relative; border: 3px solid var(--ink); }
        .ramp-step.c1 { background: var(--paper); color: var(--ink); }
        .ramp-step.c2 { background: var(--coral); color: var(--paper); border-color: var(--ink); transform: translateY(-14px); }
        .ramp-step.c3 { background: var(--blue); color: var(--paper); border-color: var(--ink); transform: translateY(-28px); }
        .ramp-step .num { font-family: 'Archivo Black', sans-serif; font-size: 42px; line-height: 1; margin-bottom: 16px; }
        .ramp-step h3 { font-size: 20px; margin: 0 0 10px; font-weight: 800; }
        .ramp-step p { font-size: 14.5px; line-height: 1.6; margin: 0; opacity: 0.95; }

        /* ---------- SERVICES ---------- */
        .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--ink); border: 2px solid var(--ink); }
        .svc-card { background: var(--paper); padding: 26px 22px; min-height: 168px; display: flex; flex-direction: column; justify-content: space-between; transition: background .15s ease, color .15s ease; }
        .svc-card:hover { background: var(--yellow); }
        .svc-card h3 { font-size: 16.5px; margin: 0 0 8px; font-weight: 800; }
        .svc-card p { font-size: 13px; color: var(--grey); line-height: 1.5; margin: 0; }
        .svc-card:hover p { color: #3a3a1f; }
        .svc-icon { width: 26px; height: 26px; margin-bottom: 14px; color: var(--coral); }

        /* ---------- WHY ---------- */
        .why { background: var(--paper-dim); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
        .why .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
        .why h2 { font-family: 'Archivo Black', sans-serif; font-size: 35px; line-height: 1.12; margin: 0 0 20px; }
        .why p.lede { color: var(--grey); font-size: 16.5px; line-height: 1.65; margin: 0 0 30px; max-width: 44ch; }
        .why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
        .why-list li { display: flex; gap: 16px; align-items: flex-start; }
        .why-list .ico { flex: none; width: 34px; height: 34px; border-radius: 6px; background: var(--ink); display: flex; align-items: center; justify-content: center; }
        .why-list .ico svg { width: 18px; height: 18px; color: var(--yellow); }
        .why-list strong { display: block; font-size: 16px; margin-bottom: 2px; }
        .why-list span.desc { font-size: 14.5px; color: var(--grey); line-height: 1.5; }

        .coverage-card { background: var(--ink); color: var(--paper); border-radius: 12px; padding: 36px; transform: rotate(1deg); }
        .coverage-card .tag2 { display: inline-block; background: var(--yellow); color: var(--ink); font-weight: 800; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; padding: 6px 10px; border-radius: 3px; margin-bottom: 16px; }
        .coverage-num { font-family: 'Archivo Black', sans-serif; font-size: 50px; line-height: 1; margin-bottom: 10px; color: var(--yellow); }
        .coverage-card > p { font-size: 14.5px; line-height: 1.55; margin: 0 0 26px; max-width: 38ch; color: #D8D8DC; }
        .coverage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border-top: 2px solid rgba(255,255,255,0.15); padding-top: 22px; }
        .coverage-grid h4 { font-family: 'Archivo Black', sans-serif; font-size: 22px; margin: 0 0 4px; color: var(--yellow); }
        .coverage-grid p { font-size: 12.5px; margin: 0; color: #B7B7BC; }

        /* ---------- BADGES ---------- */
        .badges { background: var(--paper); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 32px 0; }
        .badges .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
        .badge-label { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--grey); }
        .badge-row { display: flex; gap: 32px; flex-wrap: wrap; }
        .badge-row span { font-weight: 800; font-size: 15px; color: var(--ink); }

        /* ---------- FAQ ---------- */
        .faq-list { max-width: 820px; }
        .faq-item { border-bottom: 2px solid var(--ink); }
        .faq-item:first-child { border-top: 2px solid var(--ink); }
        .faq-q { width: 100%; background: none; border: none; display: flex; justify-content: space-between; align-items: center; padding: 24px 4px; text-align: left; font-size: 17px; font-weight: 800; color: var(--ink); cursor: pointer; }
        .faq-q .plusbox { flex: none; width: 30px; height: 30px; border-radius: 6px; background: var(--yellow); position: relative; }
        .faq-q .plusbox::before, .faq-q .plusbox::after { content: ""; position: absolute; background: var(--ink); top: 50%; left: 50%; transform: translate(-50%,-50%); }
        .faq-q .plusbox::before { width: 14px; height: 3px; }
        .faq-q .plusbox::after { width: 3px; height: 14px; transition: transform .2s ease, opacity .2s ease; }
        .faq-item.open .plusbox::after { transform: translate(-50%,-50%) scale(0); opacity: 0; }
        .faq-item.open .plusbox { background: var(--coral); }
        .faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
        .faq-a p { font-size: 15px; color: var(--grey); line-height: 1.65; margin: 0 0 22px 4px; max-width: 64ch; }
        .faq-item.open .faq-a { max-height: 220px; }

        /* ---------- PARTNER ---------- */
        .partner { background: var(--coral); color: var(--paper); }
        .partner .wrap { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; }
        .partner h2 { font-family: 'Archivo Black', sans-serif; font-size: 32px; margin: 0 0 16px; line-height: 1.1; }
        .partner p { font-size: 16px; line-height: 1.6; margin: 0 0 28px; max-width: 46ch; color: #FFE3DB; }
        .partner-actions { display: flex; gap: 14px; flex-wrap: wrap; }
        .partner-card { background: var(--paper); border-radius: 10px; padding: 28px; border: 3px solid var(--ink); }
        .partner-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
        .partner-card li { display: flex; justify-content: space-between; font-size: 14.5px; color: var(--ink); padding-bottom: 16px; border-bottom: 1px solid var(--lightline); }
        .partner-card li:last-child { border-bottom: none; padding-bottom: 0; }
        .partner-card li b { color: var(--coral); font-weight: 800; }

        /* ---------- FOOTER ---------- */
        footer { background: var(--paper-dim); color: var(--grey); padding: 56px 0 26px; border-top: 2px solid var(--ink); }
        .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 44px; border-bottom: 1px solid var(--lightline); }
        .footer-grid h4 { color: var(--ink); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 18px; }
        .footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
        .footer-grid a { font-size: 14px; color: var(--grey); }
        .footer-grid a:hover { color: var(--coral); }
        .footer-brand .logo { color: var(--ink); margin-bottom: 14px; }
        .footer-brand p { font-size: 14px; line-height: 1.6; color: var(--grey); max-width: 32ch; }
        .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; font-size: 13px; color: #8B8E96; flex-wrap: wrap; gap: 12px; }
        .footer-bottom a { color: var(--grey); }

        /* ---------- RESPONSIVE MEDIA QUERIES ---------- */
        @media (max-width: 980px) {
          .hero .wrap { grid-template-columns: 1fr; }
          .boxgraphic { display: none; }
          h1 { font-size: 40px; }
          .ticket { grid-template-columns: 1fr 1fr; }
          .tfield { border-right: none; border-bottom: 2px dashed var(--lightline); }
          .ticket-submit { grid-column: 1/-1; border-radius: 0 0 6px 6px; justify-content: center; }
          .why .wrap { grid-template-columns: 1fr; }
          .partner .wrap { grid-template-columns: 1fr; }
          .footer-grid { grid-template-columns: 1fr 1fr; }
          /* Note: Navbar maintains visibility or wraps gracefully */
          .navlinks { display: flex; gap: 15px; flex-wrap: wrap; }
        }
        @media (max-width: 860px) {
          .ramp { grid-template-columns: 1fr; }
          .ramp-step.c2, .ramp-step.c3 { transform: none; }
        }
        @media (max-width: 920px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } }
      `}</style>

      {/* HEADER */}
      <header>
        <nav className="main">
          <a href="#" className="logo">
            <svg width="24" height="24" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 22V8C2 6.9 2.9 6 4 6H16V22" stroke="#0B0B0C" strokeWidth="2.4"/>
              <path d="M16 12H22L27 17V22H16" stroke="#0B0B0C" strokeWidth="2.4"/>
              <circle cx="9" cy="24" r="2.6" fill="#FF5A36"/>
              <circle cx="22" cy="24" r="2.6" fill="#FFC629"/>
            </svg>
            hireandmove<span className="dotcom">.com</span>
          </a>
          <div className="navlinks">
            <a href="#services">Services</a>
            <a href="#how">How it works</a>
            <a href="#coverage">Coverage</a>
            <a href="#faq">FAQ</a>
            <a href="#partner">For movers</a>
          </div>
          <a href="#quote" className="btn btn-yellow">Get free quotes</a>
        </nav>
      </header>

      {/* HERO SECTION */}
      <section className="hero">
        <div className="wrap">
          <div className="hero-copy">
            <span className="tag">Free · No obligation · 2-min request</span>
            <h1>Moving is chaos.<br/>Finding a mover<br/>shouldn't <span className="hl">be.</span></h1>
            <p className="lede">hireandmove.com lines up licensed, insured movers for your exact route — across town, across the country, or across the border — so you compare real quotes instead of cold calls.</p>
            <div className="hero-actions">
              <a href="#quote" className="btn btn-coral">Get my free quotes</a>
              <a href="#how" className="btn btn-outline-light">See how it works</a>
            </div>
          </div>
          <div className="boxgraphic">
            <svg viewBox="0 0 420 420" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <line x1="10" y1="120" x2="90" y2="120" stroke="#D8D6CC" strokeWidth="4" strokeLinecap="round"/>
              <line x1="10" y1="150" x2="60" y2="150" stroke="#D8D6CC" strokeWidth="4" strokeLinecap="round"/>
              <line x1="10" y1="180" x2="75" y2="180" stroke="#D8D6CC" strokeWidth="4" strokeLinecap="round"/>
              <g transform="translate(120,60)">
                <rect x="0" y="180" width="150" height="110" rx="6" fill="#FFC629" stroke="#0B0B0C" strokeWidth="3"/>
                <line x1="0" y1="220" x2="150" y2="220" stroke="#0B0B0C" strokeWidth="3"/>
                <rect x="40" y="90" width="150" height="100" rx="6" fill="#FF5A36" stroke="#0B0B0C" strokeWidth="3" transform="rotate(-4 115 140)"/>
                <line x1="42" y1="132" x2="188" y2="126" stroke="#0B0B0C" strokeWidth="3" transform="rotate(-4 115 140)"/>
                <rect x="15" y="0" width="150" height="95" rx="6" fill="#2B59FF" stroke="#0B0B0C" strokeWidth="3" transform="rotate(3 90 47)"/>
                <line x1="17" y1="40" x2="163" y2="44" stroke="#0B0B0C" strokeWidth="3" transform="rotate(3 90 47)"/>
                <text x="55" y="30" fontFamily="Archivo Black" fontSize="13" fill="#FFFFFF" transform="rotate(3 90 47)">FRAGILE</text>
              </g>
              <circle cx="360" cy="60" r="26" fill="none" stroke="#FF5A36" strokeWidth="3" strokeDasharray="4 6"/>
              <circle cx="360" cy="60" r="6" fill="#FF5A36"/>
            </svg>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <div className="marquee" aria-hidden="true">
        <div className="marquee-track">
          <span className="marquee-item">LOCAL MOVES<span className="sep"></span></span>
          <span className="marquee-item">LONG-DISTANCE<span className="sep"></span></span>
          <span className="marquee-item">CROSS-BORDER US ⇄ CANADA<span className="sep"></span></span>
          <span className="marquee-item">AUTO TRANSPORT<span className="sep"></span></span>
          <span className="marquee-item">STORAGE &amp; LABOR<span className="sep"></span></span>
          <span className="marquee-item">LICENSED &amp; INSURED ONLY<span className="sep"></span></span>
          <span className="marquee-item">LOCAL MOVES<span className="sep"></span></span>
          <span className="marquee-item">LONG-DISTANCE<span className="sep"></span></span>
          <span className="marquee-item">CROSS-BORDER US ⇄ CANADA<span className="sep"></span></span>
          <span className="marquee-item">AUTO TRANSPORT<span className="sep"></span></span>
          <span className="marquee-item">STORAGE &amp; LABOR<span className="sep"></span></span>
          <span className="marquee-item">LICENSED &amp; INSURED ONLY<span className="sep"></span></span>
        </div>
      </div>

      {/* QUOTE FORM */}
      <div className="quote-zone">
        <div className="wrap">
          <form className="ticket" id="quote" onSubmit={handleQuoteSubmit}>
            <div className="tfield">
              <label>Moving from</label>
              <input type="text" placeholder="City or ZIP / postal code" aria-label="Moving from" required />
            </div>
            <div className="tfield">
              <label>Moving to</label>
              <input type="text" placeholder="City or ZIP / postal code" aria-label="Moving to" required />
            </div>
            <div className="tfield">
              <label>Move date</label>
              <input type="text" placeholder="MM / DD / YYYY" aria-label="Move date" />
            </div>
            <div className="tfield">
              <label>Home size</label>
              <select aria-label="Home size">
                <option>Studio / 1 room</option>
                <option>1 bedroom</option>
                <option>2 bedroom</option>
                <option>3 bedroom</option>
                <option>4+ bedroom</option>
              </select>
            </div>
            <div className="ticket-submit">
              <button type="submit">
                {submitting ? (
                  <span>Matching movers…</span>
                ) : submitted ? (
                  <span>Quotes on the way ✓</span>
                ) : (
                  <>Get quotes<small>free · takes 2 min</small></>
                )}
              </button>
            </div>
          </form>
          <div className="quote-note">
            <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 2l7 4v6c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6z"/></svg>Licensed &amp; insured only</span>
            <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M3 12h18M3 6h18M3 18h18"/></svg>Up to 5 matched quotes</span>
            <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/></svg>No hidden fees</span>
          </div>
        </div>
      </div>

      <div className="seam" aria-hidden="true">
        <svg viewBox="0 0 1200 56" preserveAspectRatio="none"><polygon points="0,56 1200,0 1200,56" fill="#FFC629"/></svg>
      </div>

      {/* HOW IT WORKS */}
      <section id="how" className="how-section">
        <div className="wrap">
          <div className="section-head">
            <span className="tag">The process</span>
            <h2>Three steps, zero cold calls.</h2>
            <p>Tell us the route, get matched with movers who actually cover it, then pick the quote that fits.</p>
          </div>
          <div className="ramp">
            <div className="ramp-step c1">
              <div className="num display">01</div>
              <h3>Enter your move</h3>
              <p>Origin, destination, date, and roughly how much you're moving. Two minutes, no account needed.</p>
            </div>
            <div className="ramp-step c2">
              <div className="num display">02</div>
              <h3>Get matched movers</h3>
              <p>We check which licensed, insured companies actually run your route and send up to five quotes.</p>
            </div>
            <div className="ramp-step c3">
              <div className="num display">03</div>
              <h3>Compare and book</h3>
              <p>Weigh price, availability, and verified reviews side by side, then lock in the one you trust.</p>
            </div>
          </div>
        </div>
      </section>

      <div className="seam" aria-hidden="true" style={{ transform: 'scaleY(-1)' }}>
        <svg viewBox="0 0 1200 56" preserveAspectRatio="none"><polygon points="0,56 1200,0 1200,56" fill="#FFC629"/></svg>
      </div>

      {/* SERVICES */}
      <section id="services">
        <div className="wrap">
          <div className="section-head">
            <span className="tag">What we cover</span>
            <h2>Every kind of move, one directory.</h2>
            <p>From a studio down the block to a household crossing the border, here's what our network handles.</p>
          </div>
          <div className="services-grid">
            <div className="svc-card"><div><svg className="svc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 12h18M3 6h18M3 18h18"/></svg><h3>Local movers</h3></div><p>In-town moves, priced by the hour with crews who know your area.</p></div>
            <div className="svc-card"><div><svg className="svc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 12h18M15 6l6 6-6 6"/></svg><h3>Long-distance</h3></div><p>Interstate and cross-province moves, priced by weight and distance.</p></div>
            <div className="svc-card"><div><svg className="svc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 010 18M12 3a15 15 0 000 18"/></svg><h3>Cross-border</h3></div><p>US–Canada relocations with customs and paperwork sorted.</p></div>
            <div className="svc-card"><div><svg className="svc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 21V7l9-4 9 4v14M9 21V12h6v9"/></svg><h3>Corporate</h3></div><p>Employee and office moves managed to minimize downtime.</p></div>
            <div className="svc-card"><div><svg className="svc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="1" y="7" width="15" height="10" rx="1"/><path d="M16 10h4l3 3v4h-7z"/><circle cx="5.5" cy="18.5" r="1.5"/><circle cx="18.5" cy="18.5" r="1.5"/></svg><h3>Auto transport</h3></div><p>Open or enclosed car shipping, door-to-door.</p></div>
            <div className="svc-card"><div><svg className="svc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="4" y="8" width="16" height="12" rx="1"/><path d="M9 8V5h6v3"/></svg><h3>Small &amp; dorm</h3></div><p>Single rooms and studios, sized so you're not overpaying.</p></div>
            <div className="svc-card"><div><svg className="svc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 21V10l6-6 6 6v11M9 21v-6h6v6"/></svg><h3>Moving labor</h3></div><p>Just need hands for loading? Book crews by the hour.</p></div>
            <div className="svc-card"><div><svg className="svc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="7" width="18" height="13" rx="1"/><path d="M3 7l3-4h12l3 4"/></svg><h3>Self-storage</h3></div><p>Short or long-term units near your origin or destination.</p></div>
            <div className="svc-card"><div><svg className="svc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 3v18M5 8l7-5 7 5M5 8v10l7 4 7-4V8"/></svg><h3>Specialty items</h3></div><p>Pianos, art, antiques, and pets handled with care.</p></div>
            <div className="svc-card"><div><svg className="svc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="1" y="6" width="15" height="12" rx="1"/><circle cx="6" cy="18" r="1.6"/><circle cx="17" cy="18" r="1.6"/><path d="M16 9h4l3 3v6h-7"/></svg><h3>Truck rentals</h3></div><p>Compare rental trucks by size, mileage, and drop-off.</p></div>
            <div className="svc-card"><div><svg className="svc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 3v6"/></svg><h3>Packing supplies</h3></div><p>Boxes, tape, and padding delivered before packing day.</p></div>
            <div className="svc-card"><div><svg className="svc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2v20M2 12h20"/></svg><h3>Self-service</h3></div><p>Pack yourself, hire labor separately, keep more budget.</p></div>
          </div>
        </div>
      </section>

      {/* WHY SECTION */}
      <section className="why" id="coverage">
        <div className="wrap">
          <div>
            <span className="tag">Why hireandmove.com</span>
            <h2>Vetted before they ever reach your route.</h2>
            <p className="lede">Every company in the network is checked against carrier registries before we'll ever send you their quote — not just after a complaint comes in.</p>
            <ul className="why-list">
              <li>
                <span className="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="9"/></svg></span>
                <div><strong>Licensing checked first</strong><span className="desc">USDOT numbers and provincial carrier licenses are verified before a mover joins.</span></div>
              </li>
              <li>
                <span className="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M12 2l7 4v6c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6z"/></svg></span>
                <div><strong>Insurance on file</strong><span className="desc">Liability coverage confirmed, with what's included shown before you book.</span></div>
              </li>
              <li>
                <span className="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M4 4h16v4H4zM4 12h10v8H4zM16 12h4v8h-4z"/></svg></span>
                <div><strong>Pricing shown up front</strong><span className="desc">Binding, non-binding, or not-to-exceed — stated plainly, no fine print.</span></div>
              </li>
            </ul>
          </div>
          <div className="coverage-card">
            <span className="tag2">Coverage</span>
            <div className="coverage-num display">50 + 13</div>
            <p>Every US state and every Canadian province and territory, with movers who run cross-border lanes.</p>
            <div className="coverage-grid">
              <div><h4 className="display">1,900+</h4><p>routes served monthly</p></div>
              <div><h4 className="display">24 hr</h4><p>typical quote turnaround</p></div>
              <div><h4 className="display">3,400+</h4><p>vetted movers</p></div>
              <div><h4 className="display">4.7/5</h4><p>average verified rating</p></div>
            </div>
          </div>
        </div>
      </section>

      {/* BADGES */}
      <div className="badges">
        <div className="wrap">
          <span className="badge-label">Recognized &amp; verified by</span>
          <div className="badge-row">
            <span>FMCSA</span>
            <span>BBB</span>
            <span>Canadian Assoc. of Movers</span>
            <span>Dept. of Transportation</span>
            <span>Google Reviews</span>
          </div>
        </div>
      </div>

      {/* FAQ */}
      <section id="faq">
        <div className="wrap">
          <div className="section-head">
            <span className="tag">FAQ</span>
            <h2>Questions people ask before booking.</h2>
            <p>The short answers — every quote through hireandmove.com includes the details specific to your move.</p>
          </div>
          <div className="faq-list">
            {[
              { q: 'How much does a move usually cost?', a: 'Local moves typically run $300–$2,500 depending on hours and crew size. Long-distance and cross-border moves range from about $2,000 to $10,000+, based on distance, weight, and date.' },
              { q: 'How far ahead should I book movers?', a: 'Aim for 4–8 weeks ahead for a local move and 8–12 weeks for long-distance or cross-border, especially between May and September.' },
              { q: 'Can movers handle a US–Canada move?', a: 'Yes — part of our network specializes in cross-border relocations and can walk you through customs paperwork ahead of time.' },
              { q: 'What don\'t movers typically transport?', a: 'Hazardous materials, perishables, live plants, pets, and valuables like cash or jewelry usually travel with you.' },
              { q: 'Is there a fee to use hireandmove.com?', a: 'No. Requesting quotes is free — you only pay the moving company you choose to book.' }
            ].map((item, idx) => (
              <div key={idx} className={`faq-item ${openFaq === idx ? 'open' : ''}`}>
                <button type="button" className="faq-q" onClick={() => handleFaqToggle(idx)}>
                  <span>{item.q}</span>
                  <span className="plusbox"></span>
                </button>
                <div className="faq-a">
                  <p>{item.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PARTNER CTA */}
      <section className="partner" id="partner">
        <div className="wrap">
          <div>
            <h2>Run a moving company? Get in front of people who are actually moving.</h2>
            <p>Join the hireandmove.com network for leads on the routes you cover, a verified profile, and visibility to customers comparing quotes in your area.</p>
            <div className="partner-actions">
              <a href="#" className="btn btn-yellow">Join the network</a>
              <a href="#" className="btn btn-outline-white">Vendor sign in</a>
            </div>
          </div>
          <div className="partner-card">
            <ul>
              <li>Verified profile &amp; reviews <b>Included</b></li>
              <li>Leads filtered to your area <b>Included</b></li>
              <li>Route-matched delivery <b>Included</b></li>
              <li>Contract length <b>Month-to-month</b></li>
            </ul>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer>
        <div className="wrap">
          <div className="footer-grid">
            <div className="footer-brand">
              <a href="#" className="logo">
                <svg width="24" height="24" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2 22V8C2 6.9 2.9 6 4 6H16V22" stroke="#0B0B0C" strokeWidth="2.4"/>
                  <path d="M16 12H22L27 17V22H16" stroke="#0B0B0C" strokeWidth="2.4"/>
                  <circle cx="9" cy="24" r="2.6" fill="#FF5A36"/>
                  <circle cx="22" cy="24" r="2.6" fill="#FFC629"/>
                </svg>
                hireandmove<span className="dotcom">.com</span>
              </a>
              <p>A directory connecting people across the US and Canada with licensed, insured moving companies.</p>
            </div>
            <div>
              <h4>Services</h4>
              <ul>
                <li><a href="#">Local movers</a></li>
                <li><a href="#">Long-distance</a></li>
                <li><a href="#">Cross-border</a></li>
                <li><a href="#">Auto transport</a></li>
                <li><a href="#">Storage</a></li>
              </ul>
            </div>
            <div>
              <h4>Coverage</h4>
              <ul>
                <li><a href="#">Browse by US state</a></li>
                <li><a href="#">Browse by province</a></li>
                <li><a href="#">Popular routes</a></li>
                <li><a href="#">Moving cost guide</a></li>
              </ul>
            </div>
            <div>
              <h4>Resources</h4>
              <ul>
                <li><a href="#">Moving guides</a></li>
                <li><a href="#">Ask an expert</a></li>
                <li><a href="#">Reviews</a></li>
                <li><a href="#">Moving checklist</a></li>
              </ul>
            </div>
            <div>
              <h4>Company</h4>
              <ul>
                <li><a href="#">About us</a></li>
                <li><a href="#">Join our network</a></li>
                <li><a href="#">Contact support</a></li>
                <li><a href="#">Privacy policy</a></li>
              </ul>
            </div>
          </div>
          <div className="footer-bottom">
            <span>© 2026 hireandmove.com. All rights reserved.</span>
            <span>Licensed carrier data verified via FMCSA &amp; provincial registries.</span>
          </div>
        </div>
      </footer>
    </>
  );
}