// Villa Mesochori — "Getting here": step-by-step directions with photos and the exact pin.
const ghNS = window.VillaMesochoriDesignSystem_9e1a21;
const { Button: GhButton, LucideIcon: GhIcon } = ghNS;

function GhMap({ lat, lng, steps }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!window.L || !ref.current) return;
    const map = L.map(ref.current, { scrollWheelZoom: false });
    L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map);
    const pts = [];
    (steps || []).forEach((s, i) => {
      if (!s.lat || !s.lng) return;
      L.marker([s.lat, s.lng], {
        icon: L.divIcon({
          className: "",
          html: `<div style="width:24px;height:24px;border-radius:50%;background:#4E7A5A;color:#FAF6EF;border:2px solid #FAF6EF;display:flex;align-items:center;justify-content:center;font:700 12px Karla,sans-serif;box-shadow:0 1px 4px rgba(34,29,24,0.35)">${i + 1}</div>`,
          iconSize: [24, 24], iconAnchor: [12, 12],
        }),
      }).addTo(map).bindPopup(`<b>${i + 1}. ${s.title}</b><br>${s.body || ""}`);
      pts.push([s.lat, s.lng]);
    });
    L.circleMarker([lat, lng], { radius: 10, color: "#FAF6EF", weight: 2, fillColor: "#C05E37", fillOpacity: 1 })
      .addTo(map).bindPopup("<b>Villa Mesochori</b><br>The house").openPopup();
    pts.push([lat, lng]);
    if (pts.length > 1) {
      L.polyline(pts, { color: "#C05E37", weight: 3, opacity: 0.55, dashArray: "6 8" }).addTo(map);
      map.fitBounds(L.latLngBounds(pts).pad(0.25));
    } else {
      map.setView([lat, lng], 15);
    }
    return () => map.remove();
  }, [lat, lng]);
  return <div ref={ref} style={{ height: 360, borderRadius: "var(--radius-lg)", border: "1px solid var(--border-soft)", overflow: "hidden", zIndex: 0 }}></div>;
}

function GhStepPhoto({ src, n }) {
  const [failed, setFailed] = React.useState(false);
  if (!src || failed) {
    return (
      <div style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8, background: "var(--surface-sunken)", color: "var(--text-muted)" }}>
        <GhIcon name="camera" size={22} />
        <span style={{ font: "var(--type-small)" }}>Photo of step {n} — coming soon</span>
      </div>
    );
  }
  return <img src={src} alt={`Step ${n}`} loading="lazy" onError={() => setFailed(true)} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", background: "var(--surface-sunken)" }} />;
}

function GettingHere() {
  const c = window.VMContent.get();
  const steps = c.arriveSteps || [];
  const mapsUrl = `https://www.google.com/maps/search/?api=1&query=${c.houseLat},${c.houseLng}`;
  return (
    <div data-screen-label="Getting here" style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "56px var(--container-pad) 0" }}>
      <span style={{ font: "var(--type-eyebrow)", letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: "var(--accent)" }}>Getting here</span>
      <h1 style={{ font: "var(--type-h1)", margin: "10px 0 12px" }}>{c.arriveTitle}</h1>
      <p style={{ font: "var(--type-body-lg)", color: "var(--text-body)", maxWidth: 620, margin: "0 0 24px" }}>{c.arriveIntro}</p>

      <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap", marginBottom: 40 }}>
        <GhButton size="lg" onClick={() => window.open(mapsUrl, "_blank")}>Open in Google Maps</GhButton>
        <span style={{ font: "var(--type-small)", color: "var(--text-muted)", display: "inline-flex", alignItems: "center", gap: 6 }}>
          <GhIcon name="map-pin" size={15} /> {c.arriveAddress}
        </span>
      </div>

      {/* Step-by-step photo trail */}
      <div className="vm-stagger" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24, marginBottom: 56 }}>
        {steps.map((s, i) => (
          <div key={i} style={{ background: "var(--surface-card)", border: "1px solid var(--border-soft)", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-card)" }}>
            <div style={{ height: 240 }}><GhStepPhoto src={s.img} n={i + 1} /></div>
            <div style={{ padding: "18px 22px 22px", display: "flex", gap: 14, alignItems: "flex-start" }}>
              <span style={{ width: 30, height: 30, borderRadius: "50%", flexShrink: 0, display: "inline-flex", alignItems: "center", justifyContent: "center", background: "var(--accent)", color: "var(--text-on-accent, #FFFDF9)", font: "700 14px var(--font-body)" }}>{i + 1}</span>
              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                <h3 style={{ font: "var(--type-h4)", margin: 0 }}>{s.title}</h3>
                <p style={{ font: "var(--type-body)", color: "var(--text-body)", margin: 0 }}>{s.body}</p>
              </div>
            </div>
          </div>
        ))}
      </div>

      <span style={{ font: "var(--type-eyebrow)", letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: "var(--secondary)" }}>The exact spot</span>
      <h2 style={{ font: "var(--type-h2)", margin: "10px 0 20px" }}>Right here</h2>
      <GhMap lat={c.houseLat} lng={c.houseLng} steps={steps} />
      <p style={{ font: "var(--type-small)", color: "var(--text-muted)", margin: "12px 0 0" }}>
        The green numbers are the turns from the cards above; the terracotta dot is the house.
      </p>
      <p style={{ font: "var(--type-hand)", fontSize: 22, color: "var(--limewash-600)", margin: "18px 0 0", transform: "rotate(-1.2deg)" }}>
        Kalos irthate — welcome. — Maria &amp; the family
      </p>
    </div>
  );
}

window.VMGettingHere = GettingHere;