/* global React, useT */

/* Floor plan SVGs — schematic, not architectural. Each plan is a top-down
   layout: rooms, balcony, sea-facing edge marked with a wave glyph. */

const PLAN_COLORS = {
  wall: "#d8c9a3",
  fill: "rgba(216,201,163,0.04)",
  fillStrong: "rgba(216,201,163,0.10)",
  text: "#d8c9a3",
  textDim: "rgba(216,201,163,0.55)",
  sea: "#6da5b4",
};

function PlanFrame({ children, label }) {
  return (
    <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M20 0H0V20" stroke="rgba(216,201,163,0.04)" strokeWidth="0.5" fill="none" />
        </pattern>
        <pattern id="seaPattern" width="14" height="14" patternUnits="userSpaceOnUse">
          <path d="M0 7 Q3.5 2 7 7 T14 7" stroke="rgba(109,165,180,0.5)" strokeWidth="1" fill="none" />
        </pattern>
      </defs>
      <rect width="800" height="600" fill="url(#grid)" />
      {/* sea edge (top) */}
      <rect x="0" y="0" width="800" height="40" fill="url(#seaPattern)" opacity="0.6" />
      <text x="20" y="28" fill={PLAN_COLORS.sea} fontFamily="Inter" fontSize="10" letterSpacing="3">
        ADRIATIC · NORTH
      </text>
      {children}
      <text x="780" y="585" fill={PLAN_COLORS.textDim} fontFamily="Inter" fontSize="9" letterSpacing="2.5"
            textAnchor="end">
        {label} · NOT TO SCALE
      </text>
    </svg>
  );
}

function Room({ x, y, w, h, label, sub, fill = "fill", balcony = false }) {
  return (
    <g>
      <rect x={x} y={y} width={w} height={h}
            fill={fill === "fillStrong" ? PLAN_COLORS.fillStrong : PLAN_COLORS.fill}
            stroke={PLAN_COLORS.wall} strokeWidth="1.5" />
      {balcony && (
        <line x1={x} y1={y} x2={x + w} y2={y}
              stroke={PLAN_COLORS.sea} strokeWidth="2" strokeDasharray="4 4" />
      )}
      <text x={x + w / 2} y={y + h / 2 - 4}
            fill={PLAN_COLORS.text}
            fontFamily="Cormorant Garamond" fontStyle="italic"
            fontSize="18" textAnchor="middle">
        {label}
      </text>
      {sub && (
        <text x={x + w / 2} y={y + h / 2 + 14}
              fill={PLAN_COLORS.textDim}
              fontFamily="Inter" fontSize="9" letterSpacing="2"
              textAnchor="middle">{sub}</text>
      )}
    </g>
  );
}

/* 1BR — Studio Suite, sea-facing balcony */
function PlanStudio() {
  return (
    <PlanFrame label="A · Studio suite · 62 m²">
      <Room x={120} y={70}  w={420} h={170} label="Living + Kitchen" sub="LIVING / DINING" balcony />
      <Room x={540} y={70}  w={140} h={170} label="Suite" sub="BEDROOM" />
      <Room x={540} y={240} w={140} h={120} label="Bath" sub="EN-SUITE" />
      <Room x={120} y={240} w={200} h={120} label="Foyer" sub="ENTRY" />
      <Room x={320} y={240} w={220} h={120} label="Wardrobe" sub="DRESSING" />
      {/* balcony */}
      <rect x={120} y={40} width={560} height={26} fill={PLAN_COLORS.fillStrong} stroke={PLAN_COLORS.wall} strokeWidth="1.2" strokeDasharray="2 4" />
      <text x={400} y={58} fill={PLAN_COLORS.textDim} fontFamily="Inter" fontSize="9" letterSpacing="3" textAnchor="middle">SEA TERRACE · 18 m²</text>
    </PlanFrame>
  );
}

/* 2BR — Coast Residence */
function PlanTwoBed() {
  return (
    <PlanFrame label="B · Coast residence · 98 m²">
      <Room x={80}  y={70}  w={260} h={170} label="Living" sub="OPEN PLAN" balcony />
      <Room x={340} y={70}  w={200} h={170} label="Kitchen" sub="OPEN PLAN" balcony />
      <Room x={540} y={70}  w={180} h={170} label="Primary" sub="BEDROOM I" />
      <Room x={80}  y={240} w={180} h={140} label="Bath" sub="POWDER" />
      <Room x={260} y={240} w={220} h={140} label="Bedroom" sub="BEDROOM II" />
      <Room x={480} y={240} w={120} h={140} label="W/C" sub="EN-SUITE" />
      <Room x={600} y={240} w={120} h={140} label="Storage" sub="UTILITY" />
      <rect x={80} y={40} width={460} height={26} fill={PLAN_COLORS.fillStrong} stroke={PLAN_COLORS.wall} strokeWidth="1.2" strokeDasharray="2 4" />
      <text x={310} y={58} fill={PLAN_COLORS.textDim} fontFamily="Inter" fontSize="9" letterSpacing="3" textAnchor="middle">SEA TERRACE · 28 m²</text>
    </PlanFrame>
  );
}

/* 3BR — Marina Residence */
function PlanThreeBed() {
  return (
    <PlanFrame label="C · Marina residence · 142 m²">
      <Room x={60}  y={70}  w={240} h={200} label="Living" sub="GREAT ROOM" balcony fill="fillStrong" />
      <Room x={300} y={70}  w={180} h={200} label="Dining" sub="OPEN PLAN" balcony />
      <Room x={480} y={70}  w={260} h={200} label="Primary" sub="MASTER SUITE" balcony fill="fillStrong" />
      <Room x={60}  y={270} w={180} h={130} label="Bedroom" sub="BEDROOM II" />
      <Room x={240} y={270} w={140} h={130} label="Bath" sub="EN-SUITE" />
      <Room x={380} y={270} w={180} h={130} label="Bedroom" sub="BEDROOM III" />
      <Room x={560} y={270} w={180} h={130} label="Kitchen" sub="GALLEY" />
      <Room x={60}  y={400} w={680} h={70}  label="Foyer" sub="ENTRY · CLOAKS" />
      <rect x={60} y={40} width={680} height={26} fill={PLAN_COLORS.fillStrong} stroke={PLAN_COLORS.wall} strokeWidth="1.2" strokeDasharray="2 4" />
      <text x={400} y={58} fill={PLAN_COLORS.textDim} fontFamily="Inter" fontSize="9" letterSpacing="3" textAnchor="middle">SEA TERRACE · 42 m²</text>
    </PlanFrame>
  );
}

/* Penthouse */
function PlanPenthouse() {
  return (
    <PlanFrame label="D · Penthouse · 246 m²">
      <Room x={40}  y={70}  w={300} h={180} label="Great Room" sub="LIVING / DINING" balcony fill="fillStrong" />
      <Room x={340} y={70}  w={200} h={180} label="Library" sub="STUDY" />
      <Room x={540} y={70}  w={220} h={180} label="Primary" sub="MASTER SUITE" balcony fill="fillStrong" />
      <Room x={40}  y={250} w={240} h={140} label="Kitchen" sub="OPEN PLAN" />
      <Room x={280} y={250} w={140} h={140} label="Pantry" sub="SERVICE" />
      <Room x={420} y={250} w={170} h={140} label="Bedroom" sub="BEDROOM II" />
      <Room x={590} y={250} w={170} h={140} label="Bath" sub="MASTER BATH" />
      <Room x={40}  y={390} w={220} h={100} label="Bedroom" sub="BEDROOM III" />
      <Room x={260} y={390} w={170} h={100} label="Bath" sub="EN-SUITE" />
      <Room x={430} y={390} w={330} h={100} label="Private Pool Deck" sub="ROOFTOP" balcony fill="fillStrong" />
      <rect x={40} y={40} width={720} height={26} fill={PLAN_COLORS.fillStrong} stroke={PLAN_COLORS.wall} strokeWidth="1.2" strokeDasharray="2 4" />
      <text x={400} y={58} fill={PLAN_COLORS.textDim} fontFamily="Inter" fontSize="9" letterSpacing="3" textAnchor="middle">WRAP TERRACE · 72 m²</text>
    </PlanFrame>
  );
}

/* Residence data: only id (translation key prefix), italic numeral, plan,
   price, and per-typology spec values. All visible labels are looked up
   via t() at render time so AL switching translates the whole panel. */
const RESIDENCES = [
  {
    id: "studio", italic: "I", plan: PlanStudio, price: "€200,000",
    interior: "62 m²", terrace: "18 m²", bedrooms: "1", bathrooms: "1",
    orientationKey: "spec.orient.studio", floors: "2 — 7",
  },
  {
    id: "coast", italic: "II", plan: PlanTwoBed, price: "€385,000",
    interior: "98 m²", terrace: "28 m²", bedrooms: "2", bathrooms: "2",
    orientationKey: "spec.orient.coast", floors: "3 — 9",
  },
  {
    id: "marina", italic: "III", plan: PlanThreeBed, price: "€640,000",
    interior: "142 m²", terrace: "42 m²", bedrooms: "3", bathrooms: "3",
    orientationKey: "spec.orient.marina", floors: "5 — 11",
  },
  {
    id: "ph", italic: "IV", plan: PlanPenthouse, price: "€1,250,000",
    interior: "246 m²", terrace: "72 m²", bedroomsKey: "spec.ph.bedrooms", bathrooms: "3.5",
    orientationKey: "spec.orient.ph", floorsKey: "spec.ph.floor",
  },
];

function ResidencesSection() {
  const t = useT();
  const [active, setActive] = React.useState("coast");
  const r = RESIDENCES.find((x) => x.id === active);
  const Plan = r.plan;

  const specs = [
    [t("spec.interior"),    r.interior],
    [t("spec.terrace"),     r.terrace],
    [t("spec.bedrooms"),    r.bedroomsKey ? t(r.bedroomsKey) : r.bedrooms],
    [t("spec.bathrooms"),   r.bathrooms],
    [t("spec.orientation"), t(r.orientationKey)],
    [t("spec.floors"),      r.floorsKey ? t(r.floorsKey) : r.floors],
  ];

  return (
    <section id="residences" className="section">
      <div className="container">
        <div className="section__head reveal reveal--slow">
          <div>
            <div className="eyebrow">{t("res.eyebrow")}</div>
            <h2 className="section__title">{t("res.title_1")}<em>{t("res.title_em")}</em>{t("res.title_2")}</h2>
          </div>
          <p className="section__lede">{t("res.lede")}</p>
        </div>

        <div className="res">
          <nav className="res__nav reveal" aria-label={t("res.aria")}>
            {RESIDENCES.map((x) => (
              <button key={x.id}
                      onClick={() => setActive(x.id)}
                      className={x.id === active ? "active" : ""}>
                <span className="left-col">
                  <span className="name"><em>{x.italic}.</em> {t(`res.${x.id}.name`)}</span>
                  <span className="meta">{t(`res.${x.id}.code`)} · {t(`res.${x.id}.count`)}</span>
                </span>
                <span className="arrow">→</span>
              </button>
            ))}
          </nav>

          <div className="res__plan reveal reveal--image" style={{ "--reveal-delay": "0.1s" }}>
            <Plan key={r.id} />
            <div className="res__compass">{t("res.compass")}</div>
            <div className="res__plan-fade" />
          </div>

          <div className="res__detail reveal" style={{ "--reveal-delay": "0.2s" }}>
            <div>
              <div className="price-label">{t("res.pricing_from")}</div>
              <div className="price">{r.price}</div>
            </div>
            <h3><em>{r.italic}.</em> {t(`res.${r.id}.name`)}</h3>
            <p className="desc">{t(`res.${r.id}.desc`)}</p>
            <div className="spec-list">
              {specs.map(([k, v]) => (
                <div className="row" key={k}>
                  <span className="k">{k}</span>
                  <span className="v">{v}</span>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 14, marginTop: 12 }}>
              <a href="#reserve" className="btn btn--primary btn--sm">{t("res.cta_reserve")} <span className="arrow">→</span></a>
              <a href="#" className="btn btn--ghost btn--sm">{t("res.cta_pdf")}</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ResidencesSection, RESIDENCES });