/* global React */
const { useState, useEffect, useRef } = React;

/* ==========================================================
   Icons (tiny, hand-drawn SVG, monoline)
   ========================================================== */
const Icon = {
  phone: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A15 15 0 0 1 3 6a2 2 0 0 1 2-2z" strokeLinejoin="round" />
    </svg>
  ),
  arrow: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  pin: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <path d="M12 22s-7-7.5-7-13a7 7 0 1 1 14 0c0 5.5-7 13-7 13z" strokeLinejoin="round" />
      <circle cx="12" cy="9" r="2.5" />
    </svg>
  ),
  check: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <path d="M5 12.5l4.5 4.5L19 7" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  house: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <path d="M3 11l9-8 9 8M5 10v10h14V10" strokeLinejoin="round" strokeLinecap="round" />
    </svg>
  ),
  doc: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <path d="M6 3h9l4 4v14H6z M15 3v4h4 M9 12h7 M9 16h7" strokeLinejoin="round" />
    </svg>
  ),
};

/* ==========================================================
   Brand wordmark
   ========================================================== */
function HouseMark({ width = 26, height = 24, style }) {
  return (
    <svg width={width} height={height} viewBox="0 0 40 36" fill="none"
         xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style={style}>
      {/* roof + body */}
      <path d="M6 17 L20 4 L34 17 L34 32 L6 32 Z"
            stroke="currentColor" strokeWidth="2"
            strokeLinejoin="round" strokeLinecap="round" />
      {/* door */}
      <path d="M17 32 L17 22 L23 22 L23 32"
            stroke="currentColor" strokeWidth="2"
            strokeLinejoin="round" />
      {/* chimney */}
      <rect x="26" y="7" width="3" height="6" fill="currentColor" />
    </svg>
  );
}

function Wordmark({ size = "nav" }) {
  if (size === "footer") {
    return <div className="footer__wordmark">Master Appraisers</div>;
  }
  return (
    <div className="nav__brand" style={{ alignItems: "center", gap: 12 }}>
      <HouseMark width={30} height={28} style={{ color: "var(--clay)", flexShrink: 0 }} />
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 1, gap: 4 }}>
        <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 20, color: "var(--ink)", letterSpacing: "-0.005em" }}>
          Master
        </span>
        <span style={{
          display: "block",
          width: "100%",
          height: 1,
          background: "color-mix(in oklab, var(--ink) 25%, transparent)"
        }} />
        <span style={{
          fontFamily: "var(--sans)",
          textTransform: "uppercase",
          fontSize: 9.5,
          letterSpacing: "0.22em",
          fontWeight: 600,
          color: "var(--ink-2)"
        }}>
          Appraisers
        </span>
      </div>
    </div>
  );
}

/* ==========================================================
   Top nav
   ========================================================== */
function Nav({ page, setPage }) {
  const links = [
    ["home", "Home"],
    ["about", "About"],
    ["services", "Services"],
    ["contact", "Contact"],
  ];
  return (
    <nav className="nav">
      <div className="nav__inner">
        <div onClick={() => setPage("home")}>
          <Wordmark />
        </div>
        <div className="nav__links">
          {links.map(([k, label]) => (
            <a
              key={k}
              className={page === k ? "is-active" : ""}
              onClick={(e) => { e.preventDefault(); setPage(k); window.scrollTo({ top: 0, behavior: "instant" }); }}
              href={"#" + k}
            >
              {label}
            </a>
          ))}
        </div>
        <div className="nav__phone">
          <Icon.phone width="16" height="16" style={{ color: "var(--clay)" }} />
          <a className="nav__phone-num" href="tel:7178438100">(717) 843&#8209;8100</a>
          <button className="btn btn--primary" onClick={() => setPage("contact")}>
            Order an Appraisal
          </button>
        </div>
      </div>
    </nav>
  );
}

/* ==========================================================
   Footer
   ========================================================== */
function Footer({ setPage }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__top">
          <div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 22, color: "var(--cream)", display: "flex", alignItems: "center", gap: 12 }}>
              <HouseMark width={28} height={26} style={{ color: "var(--clay-2, var(--clay))", flexShrink: 0 }} />
              <span><em>Master</em> <span style={{ letterSpacing: "0.06em", textTransform: "uppercase", fontSize: 14, fontFamily: "var(--sans)" }}>Appraisers</span></span>
            </div>
            <p className="footer__brand-text">
              Independent residential appraisals serving lenders across York County, Pennsylvania since 2005.
            </p>
          </div>
          <div>
            <h4 className="footer__col-title">Visit</h4>
            <ul className="footer__list">
              <li>Waterford Professional Center</li>
              <li>York, PA 17402</li>
            </ul>
          </div>
          <div>
            <h4 className="footer__col-title">Contact</h4>
            <ul className="footer__list">
              <li><a href="tel:7178438100">(717) 843-8100</a></li>
              <li><a href="mailto:value@amaster.com">value@amaster.com</a></li>
              <li>Mon–Fri · 8a–6p</li>
            </ul>
          </div>
          <div>
            <h4 className="footer__col-title">Site</h4>
            <ul className="footer__list">
              <li><a onClick={(e) => { e.preventDefault(); setPage("home"); }} href="#home">Home</a></li>
              <li><a onClick={(e) => { e.preventDefault(); setPage("about"); }} href="#about">About</a></li>
              <li><a onClick={(e) => { e.preventDefault(); setPage("services"); }} href="#services">Services</a></li>
              <li><a onClick={(e) => { e.preventDefault(); setPage("contact"); }} href="#contact">Order</a></li>
            </ul>
          </div>
        </div>

        <div className="footer__wordmark">Master&nbsp;Appraisers</div>

        <div className="footer__bottom">
          <span>© 2026 Master Appraisers, LLC</span>
          <span>USPAP Compliant · Fannie Mae / Freddie Mac Approved</span>
        </div>
      </div>
    </footer>
  );
}

/* ==========================================================
   Reusable section header
   ========================================================== */
function SecHead({ eyebrow, title, intro }) {
  return (
    <div className="sec-head">
      <div>
        <span className="eyebrow">{eyebrow}</span>
        <h2 className="display sec-head__title">{title}</h2>
      </div>
      <p className="lede sec-head__intro">{intro}</p>
    </div>
  );
}

/* ==========================================================
   Hand-illustrated York County map (inline SVG, monoline)
   ========================================================== */
function YorkCountyMap() {
  return (
    <svg viewBox="0 0 500 400" style={{ width: "100%", height: "100%", display: "block" }}>
      <defs>
        <pattern id="hatch" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="6" stroke="var(--hairline)" strokeWidth="1" />
        </pattern>
      </defs>
      {/* Approximate York County outline */}
      <path
        d="M 60 80 L 180 60 L 270 70 L 360 90 L 430 130 L 450 220 L 430 300 L 380 340 L 280 350 L 180 340 L 90 320 L 60 240 L 50 160 Z"
        fill="url(#hatch)"
        stroke="var(--forest)"
        strokeWidth="1.5"
      />
      {/* Susquehanna river */}
      <path
        d="M 430 130 Q 440 200 460 280 Q 470 340 450 380"
        fill="none"
        stroke="var(--moss)"
        strokeWidth="2"
        opacity="0.5"
      />
      {/* Towns as dots */}
      {[
        { x: 230, y: 200, label: "York", size: 7 },
        { x: 130, y: 240, label: "Hanover", size: 5 },
        { x: 250, y: 250, label: "Dallastown", size: 4 },
        { x: 290, y: 180, label: "Wrightsville", size: 4 },
        { x: 170, y: 160, label: "Dover", size: 4 },
        { x: 300, y: 290, label: "Red Lion", size: 4 },
        { x: 200, y: 310, label: "Glen Rock", size: 4 },
        { x: 350, y: 240, label: "Stewartstown", size: 4 },
        { x: 90, y: 180, label: "Spring Grove", size: 4 },
      ].map((t, i) => (
        <g key={i}>
          <circle cx={t.x} cy={t.y} r={t.size} fill="var(--clay)" stroke="var(--paper)" strokeWidth="1.5" />
          <text
            x={t.x + t.size + 5}
            y={t.y + 4}
            fontFamily="var(--serif)"
            fontSize={t.size > 5 ? 15 : 12}
            fill="var(--ink)"
          >
            {t.label}
          </text>
        </g>
      ))}
      {/* Compass */}
      <g transform="translate(420, 60)">
        <circle r="14" fill="none" stroke="var(--ink-2)" strokeWidth="1" />
        <path d="M 0 -10 L 3 0 L 0 10 L -3 0 Z" fill="var(--ink)" />
        <text y="-18" fontSize="9" textAnchor="middle" fontFamily="var(--sans)" fill="var(--ink-2)" letterSpacing="1">N</text>
      </g>
      {/* Decorative label */}
      <text x="60" y="50" fontFamily="var(--serif)" fontStyle="italic" fontSize="14" fill="var(--stone)">
        York County, Pennsylvania
      </text>
    </svg>
  );
}

/* Expose to other babel scripts */
Object.assign(window, { Icon, Wordmark, Nav, Footer, SecHead, YorkCountyMap });