// ===== Vehicle (車両紹介) =====
const Vehicle = () => (
  <section id="vehicle" style={{
    padding: "140px 32px",
    background: "var(--paper-warm)",
    position: "relative", overflow: "hidden"
  }}>
    {/* big background kanji */}
    <div className="mincho" aria-hidden style={{
      position: "absolute", left: -40, bottom: 40,
      fontSize: 280, color: "rgba(20,37,74,0.05)",
      fontWeight: 700, lineHeight: 1, pointerEvents: "none",
      writingMode: "vertical-rl"
    }}>車両</div>

    <div style={{ maxWidth: 1200, margin: "0 auto", position: "relative" }}>
      <div style={{ textAlign: "center", marginBottom: 56 }}>
        <span style={{ fontSize: 11, letterSpacing: "0.4em", color: "var(--accent)" }}>— VEHICLE</span>
        <h2 className="mincho" style={{
          margin: "8px 0 0", fontSize: "clamp(28px, 3.6vw, 44px)", fontWeight: 700,
          letterSpacing: "0.04em", color: "var(--ink)"
        }}>使用車両のご紹介</h2>
      </div>

      <div className="vehicle-grid" style={{
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, alignItems: "stretch"
      }}>
        {/* Main: exterior with model name */}
        <div style={{
          background: "#fff",
          border: "1px solid var(--hairline)",
          padding: 32, position: "relative",
          display: "flex", flexDirection: "column"
        }}>
          {/* model badge */}
          <div style={{
            display: "flex", alignItems: "baseline", gap: 12,
            marginBottom: 20, paddingBottom: 20,
            borderBottom: "1px solid var(--hairline)"
          }}>
            <div className="mincho" style={{
              fontSize: 30, fontWeight: 700, color: "var(--navy)",
              letterSpacing: "0.04em"
            }}>日産 セレナ</div>
            <div style={{
              fontSize: 11, letterSpacing: "0.25em", color: "var(--muted)"
            }}>NISSAN SERENA</div>
          </div>

          {/* exterior photo placeholder */}
          <VehiclePhotoSlot
            label="車両外観"
            hint="日産セレナ（KANNA CARE TAXI ロゴ入り）"
            src="assets/vehicle-exterior.jpg"
            aspect="16/10"
          />

          {/* capacity */}
          <div style={{
            marginTop: 24,
            background: "var(--paper-deep)",
            padding: "20px 24px",
            display: "grid", gridTemplateColumns: "auto 1fr", gap: 20, alignItems: "center"
          }}>
            <div>
              <div style={{
                fontSize: 10, letterSpacing: "0.25em", color: "var(--muted)", marginBottom: 4
              }}>CAPACITY</div>
              <div className="mincho" style={{
                fontSize: 13, color: "var(--ink)", fontWeight: 600, letterSpacing: "0.04em"
              }}>乗車定員</div>
            </div>
            <div style={{
              display: "flex", alignItems: "baseline", gap: 8,
              borderLeft: "1px solid var(--hairline)", paddingLeft: 20
            }}>
              <span className="mincho" style={{
                fontSize: 44, fontWeight: 700, lineHeight: 1, color: "var(--navy)"
              }}>5</span>
              <span className="mincho" style={{
                fontSize: 16, color: "var(--ink)"
              }}>名</span>
              <span style={{
                fontSize: 11, color: "var(--muted)", marginLeft: 6
              }}>（内ドライバー1人）</span>
            </div>
          </div>

          {/* seating patterns */}
          <div style={{ marginTop: 16 }}>
            <SeatPattern label="車イス1台 ＋ 3名 ＋ ドライバー" wheelchair/>
            <SeatPattern label="4名 ＋ ドライバー"/>
          </div>
        </div>

        {/* Side: wheelchair access */}
        <div style={{
          background: "var(--navy)",
          color: "#fff",
          padding: 32, position: "relative",
          display: "flex", flexDirection: "column"
        }}>
          <div style={{
            fontSize: 11, letterSpacing: "0.3em", color: "var(--accent-soft)",
            marginBottom: 8
          }}>— ACCESSIBILITY</div>
          <h3 className="mincho" style={{
            margin: "0 0 4px", fontSize: 24, fontWeight: 600, letterSpacing: "0.04em"
          }}>車椅子のままご乗車</h3>
          <div style={{
            fontSize: 12, color: "rgba(255,255,255,0.6)", marginBottom: 24, letterSpacing: "0.1em"
          }}>WHEELCHAIR ACCESS</div>

          {/* interior photo placeholder */}
          <VehiclePhotoSlot
            label="車椅子乗車スペース"
            hint="スライドドア＋車椅子"
            src="assets/vehicle-interior.jpg"
            aspect="16/10"
            dark
          />

          <div style={{
            marginTop: 20, fontSize: 13, lineHeight: 1.9,
            color: "rgba(255,255,255,0.85)"
          }}>
            広いスライドドアと専用スロープで、<br/>
            車椅子のままスムーズにご乗車いただけます。<br/>
            ご乗降の介助も承りますので、<br/>
            ご家族の付き添いがなくても安心です。
          </div>
        </div>
      </div>
    </div>
  </section>
);

const SeatPattern = ({ label, wheelchair }) => (
  <div style={{
    display: "flex", alignItems: "center", gap: 12,
    padding: "12px 4px",
    fontSize: 14, color: "var(--ink)"
  }}>
    <span style={{
      width: 22, height: 22, borderRadius: 999,
      background: wheelchair ? "var(--accent)" : "var(--navy)",
      color: "#fff", display: "inline-flex",
      alignItems: "center", justifyContent: "center",
      fontSize: 11, fontWeight: 700
    }}>{wheelchair ? "♿" : "●"}</span>
    <span className="mincho" style={{ letterSpacing: "0.04em" }}>{label}</span>
  </div>
);

// Photo placeholder slot — shows image if present, otherwise visible placeholder
const VehiclePhotoSlot = ({ label, hint, src, aspect = "16/10", dark = false }) => {
  const [errored, setErrored] = React.useState(false);
  const placeholderBg = dark ? "rgba(255,255,255,0.06)" : "var(--paper-deep)";
  const placeholderBorder = dark ? "1px dashed rgba(255,255,255,0.25)" : "1px dashed rgba(20,37,74,0.2)";
  const placeholderColor = dark ? "rgba(255,255,255,0.55)" : "var(--muted)";
  const placeholderAccent = dark ? "rgba(255,255,255,0.3)" : "rgba(20,37,74,0.25)";
  return (
    <div style={{
      position: "relative",
      aspectRatio: aspect,
      background: placeholderBg,
      border: errored ? placeholderBorder : "none",
      overflow: "hidden",
      flex: 1, minHeight: 200,
      display: "flex", alignItems: "center", justifyContent: "center"
    }}>
      {!errored ? (
        <img
          src={src}
          alt={label}
          onError={() => setErrored(true)}
          style={{
            position: "absolute", inset: 0,
            width: "100%", height: "100%",
            objectFit: "cover"
          }}
        />
      ) : (
        <div style={{
          textAlign: "center", padding: 24,
          display: "flex", flexDirection: "column", alignItems: "center", gap: 12
        }}>
          {/* simple camera icon */}
          <svg width="44" height="44" viewBox="0 0 24 24" fill="none"
               stroke={placeholderAccent} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
            <path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/>
            <circle cx="12" cy="13" r="4"/>
          </svg>
          <div className="mincho" style={{
            fontSize: 13, fontWeight: 600, color: placeholderColor, letterSpacing: "0.06em"
          }}>{label}</div>
          <div style={{
            fontSize: 11, color: placeholderColor, lineHeight: 1.7, opacity: 0.8,
            letterSpacing: "0.05em"
          }}>{hint}<br/>(画像準備中)</div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { Vehicle });