/* global React */

function Area() {
  const cities = [
    { id: "nakagawa", name: "那珂川市", tag: "本社", dur: "即日", highlight: true },
    { id: "fukuoka", name: "福岡市", tag: "全区", dur: "即日" },
    { id: "kasuga", name: "春日市", dur: "即日" },
    { id: "onojo", name: "大野城市", dur: "即日" },
    { id: "chikushino", name: "筑紫野市", dur: "即日" },
    { id: "dazaifu", name: "太宰府市", dur: "即日" },
    { id: "kitakyushu", name: "北九州市", dur: "翌日" },
    { id: "kurume", name: "久留米市", dur: "翌日" },
    { id: "iizuka", name: "飯塚市", dur: "翌日" },
    { id: "omuta", name: "大牟田市", dur: "翌日" },
    { id: "munakata", name: "宗像市", dur: "翌日" },
    { id: "itoshima", name: "糸島市", dur: "翌日" },
    { id: "other", name: "その他 福岡県内", dur: "要相談" },
  ];

  return (
    <section className="section section--surface" id="area">
      <div className="container">
        <div className="section-head">
          <div><div className="idx">05 / 09 &nbsp; AREA</div></div>
          <div>
            <h2>福岡県全域、<br />那珂川市を拠点に。</h2>
            <p className="lede">
              本社のある那珂川市・福岡市近郊は即日対応が可能です。<br />
              県内遠方も通常翌日には伺います。離島・隣県は別途ご相談ください。
            </p>
          </div>
        </div>

        <div className="area-grid">
          <div className="area-map">
            {/* Stylized Fukuoka prefecture map */}
            <svg viewBox="0 0 520 380" className="fukuoka-svg" aria-label="福岡県 対応エリア図">
              <defs>
                <pattern id="hatch" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
                  <line x1="0" y1="0" x2="0" y2="6" stroke="currentColor" strokeOpacity="0.14" strokeWidth="1" />
                </pattern>
              </defs>
              {/* Prefecture outline (stylized) */}
              <path
                d="M60 130 L95 95 L145 75 L200 70 L255 85 L305 70 L360 85 L420 110 L465 155 L480 210 L455 260 L410 295 L355 310 L300 305 L245 320 L195 315 L145 295 L100 260 L70 215 Z"
                fill="url(#hatch)" stroke="currentColor" strokeWidth="1.2" strokeOpacity="0.7"
              />
              {/* Interior hairlines */}
              <path d="M60 130 L480 210" stroke="currentColor" strokeWidth="0.5" strokeOpacity="0.2" strokeDasharray="2 3" />
              <path d="M95 95 L455 260" stroke="currentColor" strokeWidth="0.5" strokeOpacity="0.2" strokeDasharray="2 3" />

              {/* Cities */}
              {[
                { x: 175, y: 215, r: 14, name: "那珂川市", k: "HQ", big: true },
                { x: 180, y: 175, r: 10, name: "福岡市" },
                { x: 195, y: 205, r: 5, name: "春日市" },
                { x: 210, y: 220, r: 5, name: "大野城市" },
                { x: 225, y: 240, r: 5, name: "太宰府市" },
                { x: 245, y: 260, r: 5, name: "筑紫野市" },
                { x: 290, y: 130, r: 7, name: "宗像市" },
                { x: 370, y: 125, r: 9, name: "北九州市" },
                { x: 110, y: 200, r: 6, name: "糸島市" },
                { x: 310, y: 220, r: 6, name: "飯塚市" },
                { x: 280, y: 280, r: 7, name: "久留米市" },
                { x: 240, y: 310, r: 6, name: "大牟田市" },
              ].map((c, i) => (
                <g key={i}>
                  <circle cx={c.x} cy={c.y} r={c.r}
                    fill={c.big ? "var(--color-accent)" : "transparent"}
                    stroke="currentColor" strokeWidth={c.big ? 0 : 1.4} strokeOpacity="0.85" />
                  {c.big && <circle cx={c.x} cy={c.y} r={c.r+6} fill="none" stroke="var(--color-accent)" strokeOpacity="0.4" />}
                  {c.big && <circle cx={c.x} cy={c.y} r={c.r+14} fill="none" stroke="var(--color-accent)" strokeOpacity="0.2" />}
                  <text x={c.x + c.r + 6} y={c.y + 4}
                    fontFamily="var(--font-mono)" fontSize="10" fill="currentColor" fillOpacity="0.85">
                    {c.name}{c.k ? ` · ${c.k}` : ""}
                  </text>
                </g>
              ))}
              {/* Compass */}
              <g transform="translate(455,45)">
                <text fontFamily="var(--font-mono)" fontSize="9" fill="currentColor" fillOpacity="0.5">N</text>
                <line x1="5" y1="4" x2="5" y2="28" stroke="currentColor" strokeOpacity="0.5" />
              </g>
              {/* Scale */}
              <g transform="translate(60,350)" fontFamily="var(--font-mono)" fontSize="9" fill="currentColor" fillOpacity="0.5">
                <line x1="0" y1="0" x2="60" y2="0" stroke="currentColor" strokeOpacity="0.5" />
                <text x="0" y="14">0</text>
                <text x="55" y="14">30km</text>
              </g>
              <text x="60" y="30" fontFamily="var(--font-mono)" fontSize="9" fill="currentColor" fillOpacity="0.5">
                FUKUOKA PREFECTURE · COVERAGE MAP
              </text>
            </svg>
          </div>

          <div className="area-list">
            <div className="area-list-head mono">
              <span>市町村</span><span>対応</span>
            </div>
            {cities.map((c) => (
              <div key={c.id} className={`area-list-row ${c.highlight ? "is-hq" : ""}`}>
                <div className="area-city">
                  {c.name}
                  {c.tag && <span className="area-tag mono">{c.tag}</span>}
                </div>
                <div className="area-dur mono">{c.dur}</div>
              </div>
            ))}
            <div className="area-list-foot">
              <span className="eyebrow">NOTE</span>
              <p>その他 福岡県内全域、佐賀・熊本の県境部も対応可能です。離島・遠方は別途ご相談ください。</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Area = Area;