/* global React */

/* 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 = "PLAN" }) {
  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>
  );
}

const RESIDENCES = [
  {
    id: "studio", name: "Studio Suite", italic: "I", code: "Type A",
    plan: PlanStudio,
    price: "€200,000",
    desc: "An efficient single-bedroom layout with a sea-facing terrace and full hotel servicing — designed as a buy-to-let entry point into the Adriatik portfolio.",
    specs: [
      ["Interior",   "62 m²"],
      ["Terrace",    "18 m²"],
      ["Bedrooms",   "1"],
      ["Bathrooms",  "1"],
      ["Orientation","North · Adriatic"],
      ["Floors",     "2 — 7"],
    ],
    count: "32 residences",
  },
  {
    id: "two", name: "Coast Residence", italic: "II", code: "Type B",
    plan: PlanTwoBed,
    price: "€385,000",
    desc: "Two-bedroom corner residence with an open kitchen and a continuous sea-facing terrace running the full living edge.",
    specs: [
      ["Interior",   "98 m²"],
      ["Terrace",    "28 m²"],
      ["Bedrooms",   "2"],
      ["Bathrooms",  "2"],
      ["Orientation","North-West · Adriatic"],
      ["Floors",     "3 — 9"],
    ],
    count: "44 residences",
  },
  {
    id: "three", name: "Marina Residence", italic: "III", code: "Type C",
    plan: PlanThreeBed,
    price: "€640,000",
    desc: "Three-bedroom family residence overlooking both the Adriatic and the Durrës marina — primary suite with private terrace, separate guest wing.",
    specs: [
      ["Interior",   "142 m²"],
      ["Terrace",    "42 m²"],
      ["Bedrooms",   "3"],
      ["Bathrooms",  "3"],
      ["Orientation","Dual aspect"],
      ["Floors",     "5 — 11"],
    ],
    count: "20 residences",
  },
  {
    id: "ph", name: "Penthouse", italic: "IV", code: "Type D",
    plan: PlanPenthouse,
    price: "€1,250,000",
    desc: "Top-floor residence with private rooftop pool, library, and a 72m² wrap-around terrace facing the Adriatic and the old marina.",
    specs: [
      ["Interior",   "246 m²"],
      ["Terrace",    "72 m²"],
      ["Bedrooms",   "3 + study"],
      ["Bathrooms",  "3.5"],
      ["Orientation","Triple aspect"],
      ["Floors",     "Level 12"],
    ],
    count: "4 residences",
  },
];

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

  return (
    <section id="residences" className="section">
      <div className="container">
        <div className="section__head reveal reveal--slow">
          <div>
            <div className="eyebrow">02 · Residences</div>
            <h2 className="section__title">One hundred private homes, <em>four</em> typologies.</h2>
          </div>
          <p className="section__lede">
            Every residence is sea-facing, with continuous terraces and the full hotel service of the
            Adriatik below. Configurations from a 62 m² studio suite to a 246 m² penthouse with private rooftop pool.
          </p>
        </div>

        <div className="res">
          <nav className="res__nav reveal" aria-label="Residence types">
            {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> {x.name}</span>
                  <span className="meta">{x.code} · {x.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">N ↑ ADRIATIC</div>
            <div className="res__plan-fade" />
          </div>

          <div className="res__detail reveal" style={{ "--reveal-delay": "0.2s" }}>
            <div>
              <div className="price-label">Pricing from</div>
              <div className="price">{r.price}</div>
            </div>
            <h3><em>{r.italic}.</em> {r.name}</h3>
            <p className="desc">{r.desc}</p>
            <div className="spec-list">
              {r.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">Reserve <span className="arrow">→</span></a>
              <a href="#" className="btn btn--ghost btn--sm">Download PDF</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

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