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

/* ---- line icons (1.5px round stroke, matching the site set) ---- */
function RIcon({ k }) {
  const P = {
    dunes: <><path d="M2 17c3-3 5-3 7 0M13 17c3-3 5-3 7 0" /><path d="M2 21h20" /><circle cx="18" cy="6" r="2.4" /></>,
    leaf: <><path d="M5 19c0-8 5-13 14-13 0 9-5 14-14 13z" /><path d="M5 19c3.5-5 7-7.5 11-9" /></>,
    wave: <><path d="M2 9c2.5-2.6 5-2.6 7.5 0S14.5 11.6 17 9s5-2.6 5-2.6" /><path d="M2 15c2.5-2.6 5-2.6 7.5 0S14.5 17.6 17 15s5-2.6 5-2.6" /></>,
    mountain: <><path d="M3 20 10 7l3.5 6M13.5 13 16 9l5 11H3" /><path d="m9 13 2 2.4" /></>,
    olive: <><path d="M12 3v18" /><path d="M12 9c-3 0-5-2-5-5 3 0 5 2 5 5zM12 13c3 0 5-2 5-5-3 0-5 2-5 5z" /></>,
    sun: <><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M19 5l-1.5 1.5M6.5 17.5 5 19" /></>,
    shield: <><path d="M12 3l7 2.6v5.2c0 4.4-3 7.4-7 9.2-4-1.8-7-4.8-7-9.2V5.6L12 3z" /><path d="M9 12l2 2 4-4.5" /></>,
    bowl: <><path d="M3 11h18a9 9 0 0 1-18 0z" /><path d="M12 3c-1.5 1.5-1.5 3 0 4.5" /><path d="M8 4.5c-1 1-1 2 0 3" /></>,
    users: <><circle cx="9" cy="8" r="3" /><path d="M3.5 20a5.5 5.5 0 0 1 11 0" /><path d="M16 6a3 3 0 0 1 0 6M21 20a5.5 5.5 0 0 0-4-5.3" /></>,
    talk: <><path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l.9-5.4A8 8 0 1 1 21 12z" /></>,
    flame: <><path d="M12 3c3 4 5 6 5 9a5 5 0 0 1-10 0c0-1.5.6-2.7 1.5-3.7C9 10 10 11 10 12c0-2 1-3.5 2-6z" /></>,
    compass: <><circle cx="12" cy="12" r="9" /><path d="m15.5 8.5-2 5-5 2 2-5z" /></>,
  };
  return (
    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor"
      strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{P[k]}</svg>
  );
}

const TYPES = [
  { t: "Teams facing misalignment", d: "Founders and leadership pulling in different directions. Three days to get honest and re-align on what matters." },
  { t: "Leaders running on empty", d: "High performers quietly depleting. A reset that rebuilds capacity before it breaks — measured, not guessed." },
  { t: "Before a defining chapter", d: "A raise, a pivot, a scale-up. Step back with your team to decide with a clear head, not a tired one." },
];

const VENUES = [
  { id: "retreat-comporta", icon: "dunes", title: "Sublime Comporta", region: "Comporta · 1 hr from Lisbon",
    desc: "Cork forest and rice fields rolling to wild Atlantic dunes — barefoot luxury built for slowing down.", img: "pausa/img/venue-comporta-2.webp" },
  { id: "retreat-doma", icon: "leaf", title: "DOMA Portugal", region: "Sintra hills · 30 min from Lisbon",
    desc: "Our home sanctuary — a historic estate in pine forest, with steam, cold water and room to switch off.", img: "pausa/img/hero-estate.webp" },
  { id: "retreat-amor", icon: "olive", title: "Quinta do Amor", region: "Near Lisbon · countryside",
    desc: "An intimate quinta for small cohorts — gardens, long tables and fire-pit evenings under an Alentejo sunset.", img: "pausa/img/venue-amor.webp" },
  { id: "retreat-feelviana", icon: "wave", title: "Hotel FeelViana", region: "Viana do Castelo · near Porto",
    desc: "Pine forest meeting the ocean — surf, sport and sea air for teams that recover best in motion.", img: "pausa/img/venue-feelviana.webp" },
  { id: "retreat-geres", icon: "mountain", title: "Ikigai Gerês", region: "Peneda-Gerês · the north",
    desc: "Granite peaks, glacial lagoons and deep silence — the most immersive nature reset on the map.", img: "pausa/img/venue-geres.webp" },
  { id: "retreat-bohemia", icon: "sun", title: "Quinta Bohemia", region: "Aljezur · Algarve coast",
    desc: "Wild west-coast Algarve — clifftop trails, surf beaches and slow sun for a true unplugging.", img: "pausa/img/venue-bohemia.webp" },
];

const PRINCIPLES_REMOVED = true;

function RetreatShowcase({ onBook }) {
  const [active, setActive] = useState(0);
  const [isDesktop, setIsDesktop] = useState(true);

  useEffect(() => {
    const onResize = () => setIsDesktop(window.innerWidth >= 768);
    onResize();
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  const gridStyle = useMemo(() => {
    const tracks = VENUES.map((_, i) => (i === active ? "5fr" : "1fr")).join(" ");
    return isDesktop
      ? { gridTemplateColumns: tracks, gridTemplateRows: "1fr" }
      : { gridTemplateRows: tracks, gridTemplateColumns: "1fr" };
  }, [active, isDesktop]);

  return (
    <section className="retreats" id="retreats" aria-label="Leadership retreats">
      <div className="wrap">
        <div className="retreats-head">
          <span className="kicker reveal">Leadership retreats</span>
          <h2 className="h2 reveal">Not ready for the full year? <em>Start with a retreat.</em></h2>
          <p className="lede reveal" style={{ transitionDelay: "90ms" }}>
            If twelve months feels like a leap, experience Pausa first — from a single day to a full five.
          </p>
        </div>

        {/* venue expanding cards */}
        <span className="retreats-sub reveal">Six settings, near Lisbon, Porto and the Algarve</span>
        <ul className="exp-cards reveal" style={{ ...gridStyle, transitionDelay: "60ms" }}>
          {VENUES.map((r, i) => (
            <li
              key={r.id}
              className="exp-card"
              data-active={active === i}
              tabIndex={0}
              onMouseEnter={() => isDesktop && setActive(i)}
              onFocus={() => setActive(i)}
              onClick={() => setActive(i)}
            >
              <image-slot id={r.id} class="exp-media" fit="cover" shape="rect"
                {...(r.img ? { src: r.img } : {})}
                placeholder={r.region + " — drop a photo"}></image-slot>
              <span className="exp-veil" aria-hidden="true"></span>
              <span className="exp-vtitle">{r.region}</span>
              <div className="exp-body">
                <span className="exp-ico"><RIcon k={r.icon} /></span>
                <span className="exp-region">{r.region}</span>
                <p className="exp-desc">{r.desc}</p>
              </div>
            </li>
          ))}
        </ul>

        {/* separate CTA */}
        <div className="retreat-cta reveal">
          <div className="rc-left">
            <span className="rc-eyebrow">By application · small cohorts</span>
            <h3 className="rc-title">Design a retreat around your team.</h3>
            <p className="rc-lead">A tailor-made, nature-immersive reset in Portugal: digital detox, daily movement and the conversations that don't happen at conferences.</p>
            <ul className="rc-chips">
              <li>1–5 days</li>
              <li>Up to 20 leaders</li>
              <li>Nature-immersion</li>
              <li>Transportation provided</li>
              <li>Catering</li>
              <li>Portuguese authenticity</li>
            </ul>
          </div>
          <button type="button" className="rc-btn" onClick={() => onBook && onBook()}>
            Design your retreat <span aria-hidden="true">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { RetreatShowcase });