/* Work, About, Contact, Footer */

const PROJECTS = [
  {
    num: "01",
    name: "Growers Marketplace",
    role: "Identity, platform, ongoing build",
    year: "2024 — ongoing",
    sector: "Rural classifieds · Canada-wide",
    summary:
      "A Canadian rural classifieds marketplace connecting growers, farmers, homesteaders and rural service providers. Custom WordPress + HivePress build with a hand-rolled child theme, tuned for slow rural connections.",
    visual: "growers",
    color: "#1b3225",
    url: "dev.growersmarketplace.ca",
    stack: ["WordPress", "HivePress", "Custom theme"],
  },
  {
    num: "02",
    name: "Drift Overland",
    role: "Brand, web, e-commerce",
    year: "2025",
    sector: "Adventure rentals · Vancouver Island",
    summary:
      "Jeep and trailer rentals for BC overlanders. A confident identity, Outdoorsy integration, a WooCommerce sales layer, and route-planning content built for back-roads research.",
    visual: "drift",
    color: "#1a1a1c",
    url: "driftoverland.ca",
    stack: ["WordPress", "WooCommerce", "Slider Revolution"],
  },
  {
    num: "03",
    name: "Alternate Roots Farm",
    role: "Identity, web",
    year: "2023 — ongoing",
    sector: "Market garden · Gabriola Island",
    summary:
      "A sister project. Small market garden and livestock farm on the south end of Gabriola — Wordpress built, conveys values and ethics of the growers through content and feel, updated info on available products in a menu (a la carte) format.",
    visual: "roots",
    color: "#2a3a1f",
    url: "alternaterootsfarm.ca",
    stack: ["Identity", "Web", "E-commerce"],
  },
  {
    num: "04",
    name: "Gabriola Men's Group",
    role: "Identity, web — in progress",
    year: "2026 — current",
    sector: "Community group · Gabriola Island",
    summary:
      "A new circle for mutual support, honest conversation and personal wellness — meetings every Tuesday at the Commons. Identity and a quiet, welcoming site, currently in build.",
    visual: "mens",
    color: "#2a2118",
    url: "gabriolamensgroup.ca",
    stack: ["Identity", "Web (in build)"],
  },
];

const Work = () => {
  return (
    <section id="work" className="work">
      <hr className="rule" />
      <div className="container container--wide work__inner">
        <div className="section-head">
          <ColumnLabel num="§ 02">Selected work</ColumnLabel>
          <h2 className="section-head__title">
            Quiet projects that<br />
            <span className="accent" style={{fontStyle:"italic", fontWeight:400}}>kept going.</span>
          </h2>
        </div>

        <div className="work__grid">
          {PROJECTS.map((p, i) => (
            <ProjectCard key={p.num} {...p} idx={i} />
          ))}
        </div>

        <div className="work__cta">
          <p className="body" style={{margin:0, maxWidth:"44ch"}}>
            Always something else in the pipeline. Get in touch if you'd like to talk about a project of your own.
          </p>
          <a href="#contact" className="btn btn--ghost btn--arrow">
            Start a conversation <NavArrow />
          </a>
        </div>
      </div>
      <style>{`
        .work { padding: 120px 0; }
        .work__grid {
          display:grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 32px;
        }
        .work__cta {
          display:flex; justify-content:space-between; align-items:center;
          padding: 64px 0 0; gap: 24px; flex-wrap:wrap;
        }
        @media (max-width: 900px) {
          .work__grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
};

const ProjectCard = ({ num, name, role, year, sector, summary, visual, color, url, stack, idx }) => {
  const href = url ? `https://${url}` : "#";
  return (
    <article className="pcard" data-screen-label={`work/${num}-${name}`}>
      <a className="pcard__poster" style={{ background: color }} href={href} target="_blank" rel="noopener" aria-label={`Visit ${name}`}>
        <ProjectVisual kind={visual} />
        <div className="pcard__poster-meta">
          <span className="mono">{num}</span>
          <span className="mono">{year}</span>
        </div>
      </a>
      <div className="pcard__body">
        <div className="pcard__head">
          <h3 className="pcard__name">{name}</h3>
          <span className="mono pcard__role">{role}</span>
        </div>
        <p className="pcard__sector mono">{sector}</p>
        <p className="pcard__summary">{summary}</p>
        <div className="pcard__foot">
          <div className="pcard__stack">
            {stack.map(s => <span key={s} className="pcard__stack-chip">{s}</span>)}
          </div>
          <a className="pcard__cta" href={href} target="_blank" rel="noopener" aria-label={`Visit ${name}`}>
            {url} <NavArrow />
          </a>
        </div>
      </div>
      <style>{`
        .pcard {
          background: var(--bg-2);
          border: 1px solid var(--border);
          border-radius: 4px;
          overflow: hidden;
          transition: border-color var(--t), transform var(--t);
        }
        .pcard:hover { border-color: var(--border-2); }
        .pcard__poster {
          aspect-ratio: 16 / 11;
          position: relative;
          padding: 28px;
          display:flex; flex-direction:column; justify-content:space-between;
          overflow:hidden;
          text-decoration:none;
          color: inherit;
          transition: filter var(--t-fast);
        }
        .pcard__poster:hover { filter: brightness(1.08); }
        .pcard__poster-meta {
          position:absolute; bottom: 22px; left: 24px; right: 24px;
          display:flex; justify-content:space-between;
          color: rgba(255,255,255,0.55);
          z-index: 2;
        }
        .pcard__body { padding: 28px; }
        .pcard__head {
          display:flex; justify-content:space-between; gap: 16px;
          align-items: baseline; margin-bottom: 8px;
        }
        .pcard__name {
          font-family: var(--font-display);
          font-weight: 500;
          font-size: clamp(1.4rem, 1.8vw, 1.75rem);
          letter-spacing: -0.025em;
          line-height: 1.05;
          margin: 0;
        }
        .pcard__role { color: var(--ink-3); text-align:right; flex-shrink:0; }
        .pcard__sector { color: var(--ink-3); margin: 0 0 18px; }
        .pcard__summary {
          color: var(--ink-2); font-size: 14.5px; line-height: 1.55;
          margin: 0 0 24px;
        }
        .pcard__foot {
          display:flex; justify-content:space-between; align-items:flex-end;
          padding-top: 20px;
          border-top: 1px solid var(--border);
        }
        .pcard__stack { display:flex; flex-wrap:wrap; gap: 6px; max-width: 60%; }
        .pcard__stack-chip {
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          color: var(--ink-2);
          padding: 5px 9px;
          border: 1px solid var(--border);
          border-radius: 999px;
        }
        .pcard__cta {
          display:inline-flex; align-items:center; gap: 8px;
          font-size: 13px; color: var(--ink-2);
          transition: color var(--t-fast);
        }
        .pcard__cta:hover { color: var(--accent); }
        .pcard__cta svg { transition: transform var(--t-fast); }
        .pcard__cta:hover svg { transform: translate(2px, -2px); }
      `}</style>
    </article>
  );
};

const ProjectVisual = ({ kind }) => {
  if (kind === "growers") {
    /* Growers Marketplace — forest green, DM Serif Display feel,
       gridded listing cards motif */
    return (
      <svg className="pvisual" viewBox="0 0 400 280" fill="none">
        <text x="28" y="92" fontFamily="DM Serif Display, Switzer, serif"
              fontWeight="400" fontSize="56" letterSpacing="-0.02em" fill="#e8f5ee">Growers</text>
        <text x="28" y="138" fontFamily="DM Serif Display, Switzer, serif"
              fontStyle="italic" fontWeight="400" fontSize="56"
              letterSpacing="-0.02em" fill="#7ed79a">Marketplace.</text>
        <text x="28" y="166" fontFamily="JetBrains Mono, monospace"
              fontSize="9.5" letterSpacing="0.14em" fill="rgba(232,245,238,0.55)">
          LIVESTOCK · PLANTS & SOIL · EQUIPMENT · SERVICES
        </text>
        {/* mini listing tiles */}
        <g>
          {Array.from({length:4}).map((_,i)=>(
            <g key={i} transform={`translate(${28 + i*88} 192)`}>
              <rect width="76" height="60" rx="4"
                    fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.18)" />
              <rect x="6" y="6" width="64" height="28" rx="2" fill="rgba(126,215,154,0.18)" />
              <rect x="6" y="40" width="40" height="3" fill="rgba(255,255,255,0.55)" />
              <rect x="6" y="48" width="26" height="3" fill="rgba(255,255,255,0.3)" />
            </g>
          ))}
        </g>
      </svg>
    );
  }
  if (kind === "drift") {
    /* Drift Overland — rugged, black/cream, condensed type */
    return (
      <svg className="pvisual" viewBox="0 0 400 280" fill="none">
        <defs>
          <pattern id="drift-grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.05)" />
          </pattern>
        </defs>
        <rect width="400" height="280" fill="url(#drift-grid)" />
        <text x="28" y="86" fontFamily="Switzer, sans-serif" fontWeight="700"
              fontSize="56" letterSpacing="-0.04em" fill="#f5f5ed">DRIFT.</text>
        <text x="28" y="140" fontFamily="Switzer, sans-serif" fontWeight="500"
              fontSize="56" letterSpacing="-0.04em" fill="#e9a96b">OVERLAND</text>
        <text x="28" y="166" fontFamily="JetBrains Mono, monospace"
              fontSize="9.5" letterSpacing="0.16em" fill="rgba(245,245,237,0.5)">
          ADVENTURE RENTALS · BC · EST. 2025
        </text>
        {/* horizon / mountain ridge */}
        <g stroke="rgba(245,245,237,0.35)" strokeWidth="1" fill="none">
          <path d="M28 230 L80 198 L120 218 L160 192 L210 224 L260 200 L310 230 L372 208" />
          <line x1="28" y1="246" x2="372" y2="246" />
        </g>
        {/* coords */}
        <text x="28" y="262" fontFamily="JetBrains Mono, monospace"
              fontSize="9" letterSpacing="0.1em" fill="rgba(245,245,237,0.45)">
          49.16°N / 123.93°W
        </text>
      </svg>
    );
  }
  if (kind === "roots") {
    /* Alternate Roots Farm — warm earthy green, serifed wordmark,
       botanical hand-drawn lines */
    return (
      <svg className="pvisual" viewBox="0 0 400 280" fill="none">
        <text x="28" y="86" fontFamily="DM Serif Display, Switzer, serif"
              fontWeight="400" fontSize="48" letterSpacing="-0.02em" fill="#f1ebd9">Alternate</text>
        <text x="28" y="136" fontFamily="DM Serif Display, Switzer, serif"
              fontStyle="italic" fontWeight="400" fontSize="58"
              letterSpacing="-0.02em" fill="#cfe89a">Roots</text>
        <text x="28" y="162" fontFamily="JetBrains Mono, monospace"
              fontSize="9.5" letterSpacing="0.16em" fill="rgba(241,235,217,0.55)">
          SMALL FARM LIVESTOCK AND GARDENS · GABRIOLA ISLAND
        </text>
        {/* botanical/root lines */}
        <g stroke="rgba(207,232,154,0.55)" strokeWidth="1.2" strokeLinecap="round" fill="none">
          <path d="M40 230 Q60 200 80 220 Q100 240 120 215" />
          <path d="M140 232 Q165 205 185 230" />
          <path d="M210 230 Q230 200 252 222 Q270 240 290 218" />
          <path d="M310 228 Q330 205 352 230" />
        </g>
        <g fill="rgba(207,232,154,0.75)">
          <circle cx="68" cy="212" r="2" />
          <circle cx="113" cy="206" r="2" />
          <circle cx="172" cy="216" r="2" />
          <circle cx="240" cy="212" r="2" />
          <circle cx="282" cy="208" r="2" />
          <circle cx="340" cy="218" r="2" />
        </g>
        <line x1="28" y1="246" x2="372" y2="246" stroke="rgba(241,235,217,0.25)" />
      </svg>
    );
  }
  /* mens — Gabriola Men's Group, warm, communal */
  return (
    <svg className="pvisual" viewBox="0 0 400 280" fill="none">
      <text x="28" y="86" fontFamily="DM Serif Display, Switzer, serif"
            fontWeight="400" fontSize="42" letterSpacing="-0.02em" fill="#f1e8d7">Gabriola</text>
      <text x="28" y="128" fontFamily="DM Serif Display, Switzer, serif"
            fontStyle="italic" fontWeight="400" fontSize="42"
            letterSpacing="-0.02em" fill="#e8b860">Men's Group.</text>
      <text x="28" y="156" fontFamily="JetBrains Mono, monospace"
            fontSize="9.5" letterSpacing="0.14em" fill="rgba(241,232,215,0.55)">
        TUESDAYS · 7PM · THE COMMONS
      </text>
      {/* circle of figures */}
      <g transform="translate(200 215)">
        {Array.from({length:8}).map((_,i)=>{
          const a = (i / 8) * Math.PI * 2 - Math.PI/2;
          const r = 38;
          const x = Math.cos(a) * r;
          const y = Math.sin(a) * r * 0.6;
          return (
            <circle key={i} cx={x} cy={y} r="4"
                    fill={i === 0 ? "#e8b860" : "rgba(241,232,215,0.7)"} />
          );
        })}
        <circle cx="0" cy="0" r="44" fill="none"
                stroke="rgba(241,232,215,0.25)" strokeDasharray="2 4" />
      </g>
    </svg>
  );
};

/* ---------- ABOUT ---------- */

const About = () => {
  return (
    <section id="about" className="about">
      <hr className="rule" />
      <div className="container container--wide about__inner">
        <div className="section-head">
          <ColumnLabel num="§ 03">About</ColumnLabel>
          <h2 className="section-head__title">
            A studio of one, on<br />
            <span className="accent" style={{fontStyle:"italic", fontWeight:400}}>a small island.</span>
          </h2>
        </div>

        <div className="about__layout">
          <div className="about__copy">
            <p className="about__para">
              AR Communications is a one-person studio on Gabriola Island, off the east coast of
              Vancouver Island. It exists to make good design and reliable technology affordable
              for the kinds of organisations that hold rural communities together — co-ops, land
              trusts, community health organizations, libraries, small farms, family shops.
            </p>
            <p className="about__para">
              The work crosses two trades. Half of it is{" "}
              <span className="about__accent">design</span> — identity, websites, the printed
              things that go on a wall. The other half is{" "}
              <span className="about__accent">tech</span> — setting up small offices, running the
              cabling, untangling the email, keeping the backups honest. They sound like different
              jobs. They aren't. They're both the same answer to the same question: how do small
              organisations look and feel like they belong in this decade, without a corporate
              budget?
            </p>
          </div>

          <aside className="about__side">
            <div className="about__card">
              <ColumnLabel num="—">Principles</ColumnLabel>
              <ol className="about__princ">
                <li><span className="mono">i.</span> Plain language. No jargon.</li>
                <li><span className="mono">ii.</span> Build for the slow connection.</li>
                <li><span className="mono">iii.</span> Boring infrastructure is good infrastructure.</li>
                <li><span className="mono">iv.</span> Hand over the keys when you're done.</li>
              </ol>
            </div>
            <div className="about__card about__card--quiet">
              <p className="mono" style={{margin:0, color:"var(--ink-3)"}}>Developing since 2008</p>
              <p className="about__bignum">18</p>
              <p className="mono" style={{margin:0, color:"var(--ink-3)"}}>years · Many Industries</p>
            </div>
          </aside>
        </div>
      </div>
      <style>{`
        .about { padding: 120px 0; }
        .about__layout {
          display:grid; grid-template-columns: 1.6fr 1fr; gap: 64px;
        }
        .about__copy { padding-top: 8px; }
        .about__para {
          font-size: clamp(1rem, 1.25vw, 1.2rem);
          line-height: 1.55;
          color: var(--ink);
          margin: 0 0 24px;
          max-width: 56ch;
        }
        .about__para:last-child { margin-bottom: 0; }
        .about__accent { color: var(--accent); font-style: italic; }
        .about__side { display:flex; flex-direction:column; gap: 20px; }
        .about__card {
          border: 1px solid var(--border);
          border-radius: 4px;
          padding: 24px;
          background: var(--bg-2);
        }
        .about__card--quiet { background: transparent; }
        .about__princ {
          list-style: none; padding: 0; margin: 16px 0 0;
          display: grid; gap: 12px;
        }
        .about__princ li {
          display:grid; grid-template-columns: 28px 1fr; gap: 12px;
          font-size: 14.5px; line-height: 1.4;
        }
        .about__princ .mono { color: var(--ink-4); }
        .about__chips { display:flex; flex-wrap:wrap; gap: 6px; margin-top: 16px; }
        .about__chip {
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.04em;
          color: var(--ink-2);
          padding: 6px 10px;
          border: 1px solid var(--border);
          border-radius: 999px;
        }
        .about__bignum {
          font-family: var(--font-display);
          font-size: 5rem; font-weight: 500;
          letter-spacing: -0.05em; line-height: 1;
          margin: 14px 0 8px;
          color: var(--accent);
        }
        @media (max-width: 900px) {
          .about__layout { grid-template-columns: 1fr; gap: 40px; }
        }
      `}</style>
    </section>
  );
};

/* ---------- CONTACT ---------- */

const Contact = () => {
  const [form, setForm] = React.useState({
    name: "", org: "", email: "", scope: "Brand identity", message: "",
  });
  const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error
  const [errMsg, setErrMsg] = React.useState("");
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    if (status === "sending") return;
    setStatus("sending");
    setErrMsg("");
    try {
      const res = await fetch("https://formsubmit.co/ajax/hello@arcomm.ca", {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify({
          name: form.name,
          organisation: form.org,
          email: form.email,
          scope: form.scope,
          message: form.message,
          _subject: `New brief from ${form.name || "the website"} — ${form.scope}`,
          _template: "table",
          _captcha: "false",
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && (data.success === "true" || data.success === true)) {
        setStatus("sent");
      } else {
        throw new Error(data.message || "Couldn't send right now.");
      }
    } catch (err) {
      setStatus("error");
      setErrMsg(err.message || "Couldn't send right now. Try email instead.");
    }
  };

  return (
    <section id="contact" className="contact">
      <hr className="rule" />
      <div className="container container--wide contact__inner">
        <div className="section-head">
          <ColumnLabel num="§ 04">Contact</ColumnLabel>
          <h2 className="section-head__title">
            Tell me about<br />
            <span className="accent" style={{fontStyle:"italic", fontWeight:400}}>the work.</span>
          </h2>
        </div>

        <div className="contact__layout">
          <div className="contact__intro">
            <p className="lead" style={{maxWidth:"42ch"}}>
              The best projects start with a phone call or a long email. Tell me what
              you're trying to do, and I'll write back within a working day.
            </p>

            <div className="contact__direct">
              <a href="mailto:hello@arcomm.ca" className="contact__big-link">
                hello@arcomm.ca
                <NavArrow size={18}/>
              </a>
              <a href="#contact" className="contact__big-link">
                Send a project brief
                <NavArrow size={18}/>
              </a>
            </div>

            <div className="contact__details">
              <div className="contact__det">
                <ColumnLabel num="—">Studio</ColumnLabel>
                <p className="contact__det-body">
                  Gabriola Island, BC<br />
                  Canada<br />
                  By appointment
                </p>
              </div>
              <div className="contact__det">
                <ColumnLabel num="—">Hours</ColumnLabel>
                <p className="contact__det-body">
                  Tue — Fri · 09:00 — 17:00 PT<br />
                  Reply within one working day
                </p>
              </div>
            </div>
          </div>

          {status === "sent" ? (
            <div className="contact__form contact__form--sent">
              <div className="contact__form-head">
                <ColumnLabel num="04 / 01">Project brief — received</ColumnLabel>
              </div>
              <div className="contact__sent">
                <div className="contact__sent-check" aria-hidden="true">
                  <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
                    <circle cx="32" cy="32" r="31" stroke="currentColor" strokeOpacity="0.35"/>
                    <path d="M18 33 L28 43 L46 22" stroke="currentColor" strokeWidth="2" fill="none"/>
                  </svg>
                </div>
                <h3 className="contact__sent-title">Thanks, {form.name || "friend"}.</h3>
                <p className="contact__sent-body">
                  Your brief is on its way. I'll get back to you at
                  {" "}<span className="accent">{form.email || "the email you provided"}</span>{" "}
                  within one working day.
                </p>
                <button type="button" className="btn btn--ghost"
                        onClick={() => { setForm({ name:"", org:"", email:"", scope:"Brand identity", message:"" }); setStatus("idle"); }}>
                  Send another
                </button>
              </div>
            </div>
          ) : (
          <form className="contact__form" onSubmit={submit}>
            <div className="contact__form-head">
              <ColumnLabel num="04 / 01">Project brief</ColumnLabel>
            </div>
            <div className="contact__row">
              <Field label="01 — Your name" value={form.name} onChange={set("name")} placeholder="Renee Thompson" required />
              <Field label="02 — Organisation" value={form.org} onChange={set("org")} placeholder="Alternate Roots Farm" />
            </div>
            <Field label="03 — Email" type="email" value={form.email} onChange={set("email")} placeholder="renee@yourdomain.ca" required />

            <div className="field">
              <label className="mono field__label">04 — Scope</label>
              <div className="scope-grid">
                {["Brand identity","Web design","Office tech","Installation","Not sure yet"].map(s => (
                  <button type="button" key={s}
                    className={`scope-chip ${form.scope===s ? "is-active":""}`}
                    onClick={() => setForm(f => ({...f, scope: s}))}>
                    {s}
                  </button>
                ))}
              </div>
            </div>

            <div className="field">
              <label className="mono field__label">05 — Tell me about the work</label>
              <textarea
                value={form.message}
                onChange={set("message")}
                rows={5}
                required
                placeholder="What does the organisation do, what's the deadline, what's the budget you're working with?"
                className="field__input field__input--ta"
              />
            </div>

            {status === "error" && (
              <div className="contact__error">
                {errMsg} Or email <a href="mailto:hello@arcomm.ca" style={{textDecoration:"underline"}}>hello@arcomm.ca</a> directly.
              </div>
            )}

            <div className="contact__form-foot">
              <button type="submit" className="btn btn--primary btn--arrow" disabled={status === "sending"}>
                {status === "sending" ? "Sending…" : "Send brief"} <NavArrow />
              </button>
              <span className="mono" style={{color:"var(--ink-3)"}}>
                or — <a href="mailto:hello@arcomm.ca" style={{textDecoration:"underline"}}>email me directly</a>
              </span>
            </div>
          </form>
          )}
        </div>
      </div>

      <style>{`
        .contact { padding: 120px 0 80px; }
        .contact__layout {
          display: grid;
          grid-template-columns: 1fr 1.2fr;
          gap: 80px;
        }
        .contact__direct { margin: 32px 0 48px; display:flex; flex-direction:column; }
        .contact__big-link {
          display:flex; align-items:center; justify-content:space-between;
          gap:16px; padding: 22px 0;
          font-family: var(--font-display);
          font-size: clamp(1.3rem, 2.2vw, 1.85rem);
          font-weight: 500;
          letter-spacing: -0.02em;
          border-bottom: 1px solid var(--border);
          transition: color var(--t-fast), padding-left var(--t-fast);
        }
        .contact__big-link:first-child { border-top: 1px solid var(--border); }
        .contact__big-link:hover { color: var(--accent); padding-left: 12px; }
        .contact__big-link svg { opacity: 0.5; transition: transform var(--t-fast), opacity var(--t-fast); }
        .contact__big-link:hover svg { opacity: 1; transform: translate(2px, -2px); }

        .contact__details {
          display:grid; grid-template-columns: 1fr 1fr; gap: 24px;
          padding-top: 32px; border-top: 1px solid var(--border);
        }
        .contact__det-body { margin: 14px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }

        .contact__form {
          background: var(--bg-2);
          border: 1px solid var(--border);
          border-radius: 4px;
          padding: 32px;
          display: flex; flex-direction: column; gap: 22px;
        }
        .contact__form-head { padding-bottom: 8px; border-bottom: 1px solid var(--border); }
        .contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
        .contact__form-foot {
          display:flex; justify-content:space-between; align-items:center;
          padding-top: 16px; border-top: 1px solid var(--border); margin-top: 8px;
          flex-wrap: wrap; gap: 16px;
        }

        .field { display:flex; flex-direction:column; gap: 10px; }
        .field__label { color: var(--ink-3); }
        .field__input {
          background: transparent;
          border: 0;
          border-bottom: 1px solid var(--border-2);
          padding: 10px 0;
          color: var(--ink);
          font-family: var(--font-sans);
          font-size: 1rem;
          width: 100%;
          transition: border-color var(--t-fast);
        }
        .field__input::placeholder { color: var(--ink-4); }
        .field__input:focus { outline: none; border-bottom-color: var(--accent); }
        .field__input--ta { resize: vertical; min-height: 100px; line-height: 1.5; }

        .scope-grid { display:flex; flex-wrap:wrap; gap: 8px; }
        .scope-chip {
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.04em;
          text-transform: uppercase;
          color: var(--ink-2);
          padding: 8px 14px;
          border: 1px solid var(--border-2);
          border-radius: 999px;
          background: transparent;
          cursor: pointer;
          transition: var(--t-fast);
        }
        .scope-chip:hover { border-color: var(--ink-3); color: var(--ink); }
        .scope-chip.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

        .contact__error {
          font-size: 13.5px;
          color: #ff9a7c;
          padding: 12px 14px;
          border: 1px solid rgba(255,154,124,0.3);
          background: rgba(255,154,124,0.06);
          border-radius: 4px;
          line-height: 1.5;
        }

        .contact__form--sent { justify-content: flex-start; }
        .contact__sent {
          padding: 24px 0 8px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 16px;
          color: var(--accent);
        }
        .contact__sent-check { color: var(--accent); }
        .contact__sent-title {
          font-family: var(--font-display);
          font-weight: 500;
          font-size: clamp(1.6rem, 2.6vw, 2.2rem);
          letter-spacing: -0.025em;
          margin: 0;
          color: var(--ink);
        }
        .contact__sent-body {
          margin: 0 0 8px;
          color: var(--ink-2);
          font-size: 1rem;
          line-height: 1.55;
          max-width: 44ch;
        }

        @media (max-width: 900px) {
          .contact__layout { grid-template-columns: 1fr; gap: 56px; }
          .contact__row, .contact__details { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
};

const Field = ({ label, value, onChange, type="text", placeholder, required=false }) => (
  <div className="field">
    <label className="mono field__label">{label}</label>
    <input className="field__input" type={type} value={value} onChange={onChange} placeholder={placeholder} required={required} />
  </div>
);

/* ---------- FOOTER ---------- */

const Footer = () => {
  return (
    <footer className="ftr">
      <hr className="rule" />
      <div className="container container--wide">
        <div className="ftr__mega">
          <span className="ftr__mega-line">AR</span>
          <span className="ftr__mega-line ftr__mega-line--italic">Communications</span>
        </div>

        <hr className="rule" />

        <div className="ftr__grid">
          <div className="ftr__col">
            <ColumnLabel num="—">Pages</ColumnLabel>
            <a href="#services" className="ftr__link">Services</a>
            <a href="#work" className="ftr__link">Work</a>
            <a href="#about" className="ftr__link">About</a>
            <a href="#contact" className="ftr__link">Contact</a>
          </div>
          <div className="ftr__col">
            <ColumnLabel num="—">Contact</ColumnLabel>
            <a href="mailto:hello@arcomm.ca" className="ftr__link">hello@arcomm.ca</a>
            <a href="#contact" className="ftr__link">Project brief</a>
          </div>
        </div>

        <hr className="rule" />

        <div className="ftr__base">
          <span className="mono">© 2011 — 2026 AR Communications</span>
          <span className="mono ftr__base-c">Designed &amp; built on Gabriola Island, BC · territory of the Snuneymuxw</span>
          <span className="mono">v 4.2</span>
        </div>
      </div>

      <style>{`
        .ftr { padding-top: 0; padding-bottom: 32px; background: var(--bg); overflow: hidden; }
        .ftr__mega {
          padding: 64px 0;
          line-height: 0.9;
          overflow: hidden;
        }
        .ftr__mega-line {
          display:block;
          font-family: var(--font-display);
          font-weight: 500;
          font-size: clamp(3.5rem, 11.5vw, 11rem);
          letter-spacing: -0.05em;
          line-height: 0.9;
          white-space: nowrap;
        }
        .ftr__mega-line--italic {
          font-style: italic; font-weight: 400; color: var(--accent);
          text-align: right;
        }
        .ftr__grid {
          display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
          padding: 48px 0;
        }
        .ftr__col { display:flex; flex-direction:column; gap: 8px; }
        .ftr__col .col-label { margin-bottom: 12px; }
        .ftr__link {
          display:inline-flex; align-items:center; gap: 6px;
          font-size: 14.5px; padding: 4px 0;
          color: var(--ink);
          transition: color var(--t-fast), padding-left var(--t-fast);
        }
        .ftr__link:hover { color: var(--accent); padding-left: 4px; }

        .ftr__base {
          display:flex; justify-content:space-between; align-items:center;
          padding-top: 24px; color: var(--ink-3); flex-wrap:wrap; gap:8px;
        }
        .ftr__base-c { color: var(--ink-3); }

        @media (max-width: 900px) {
          .ftr__grid { grid-template-columns: repeat(2, 1fr); }
          .ftr__mega-line--italic { text-align: left; }
        }
      `}</style>
    </footer>
  );
};

Object.assign(window, { Work, About, Contact, Footer });
