/* global React */

/* ============ ARCHITECTURE ============ */
function ArchitectureSection() {
  return (
    <section id="architecture" className="section section--alt">
      <div className="container">
        <div className="section__head reveal reveal--slow">
          <div>
            <div className="eyebrow">01 · Architecture</div>
            <h2 className="section__title">Twelve floors, <em>one</em> shoreline.</h2>
          </div>
          <p className="section__lede">
            A measured, contemporary tower set back from the promenade — limestone, bronze, and glass calibrated
            to the Adriatic light. Designed by Studio Marchetti (Milan) with local heritage architect E. Hoxha.
          </p>
        </div>

        <div className="arch__grid">
          <div className="arch__tile reveal reveal--image">
            <img src="assets/facade.png"
                 alt="Adriatik Residences facade render" loading="lazy" />
            <div className="arch__caption">
              <span>Adriatik Residences · West facade</span>
              <span>2029</span>
            </div>
          </div>
          <div className="arch__tile reveal reveal--image" style={{ "--reveal-delay": "0.1s" }}>
            <img src="assets/interior.png"
                 alt="Lobby render" loading="lazy" />
            <div className="arch__caption">
              <span>Adriatik Lobby</span>
              <span>2029</span>
            </div>
          </div>
          <div className="arch__tile reveal reveal--image" style={{ "--reveal-delay": "0.2s" }}>
            <img src="assets/pool-deck.png"
                 alt="Pool deck at dusk" loading="lazy" />
            <div className="arch__caption">
              <span>West Facade</span>
              <span>2029</span>
            </div>
          </div>
          <div className="arch__tile reveal reveal--image" style={{ "--reveal-delay": "0.3s" }}>
            <img src="assets/back.png"
                 alt="Adriatik Residences back facade" loading="lazy" />
            <div className="arch__caption">
              <span>East Facade</span>
              <span>2029</span>
            </div>
          </div>
        </div>

        <div className="arch__notes">
          {[
            ["i.",   "Materials",      "Travertine cladding, bronze framework, low-iron glass. A palette drawn from the limestone cliffs of the Albanian coast."],
            ["ii.",  "Orientation",    "Every residence faces the Adriatic. Continuous balconies act as a brise-soleil, reducing solar load by 38%."],
            ["iii.", "Set-back",       "Twelve metres above the promenade, set fifty back from the high tide line — a quiet vantage above the public beach."],
            ["iv.",  "Sustainability", "EU Taxonomy aligned. Sea-water cooling loop, photovoltaic roof array, rainwater reclamation throughout common areas."],
          ].map(([n, h, p], i) => (
            <div className="arch__note reveal" key={h} style={{ "--reveal-delay": `${i * 0.08}s` }}>
              <div className="num">{n}</div>
              <h4>{h}</h4>
              <p>{p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ AMENITIES ============ */
const AMENITIES = [
  { n: "i.",   tag: "Wellness",     h: "Spa & Hammam",         p: "1,400 m² subterranean spa with seawater pool, hammam, six treatment rooms, and a dedicated longevity suite operated by the Adriatik team." },
  { n: "ii.",  tag: "Dining",       h: "Two restaurants",      p: "A coastal Mediterranean restaurant on the lobby level and a chef-led tasting room on twelve, both open to residents and hotel guests." },
  { n: "iii.", tag: "Beach",        h: "Private beach club",   p: "Two hundred metres of dedicated shoreline with cabanas, daybeds, and a beach bar — reserved for residents and Premier guests." },
  { n: "iv.",  tag: "Fitness",      h: "Pool & fitness deck",  p: "An infinity-edge lap pool on level three, full gym, Pilates and yoga studios, and a 600 m² rooftop pool deck for residents." },
  { n: "v.",   tag: "Concierge",    h: "Hotel concierge",      p: "Twenty-four-hour concierge, in-residence dining, housekeeping, and valet — at standard hotel rates, optional by request." },
  { n: "vi.",  tag: "Family",       h: "Marina & kids' club",  p: "Walk-on access to the Durrës marina (twelve berths reserved), a kids' club, and a private cinema room on the lower ground floor." },
];

function AmenitiesSection() {
  return (
    <section id="amenities" className="section">
      <div className="container">
        <div className="section__head reveal reveal--slow">
          <div>
            <div className="eyebrow">03 · Amenities</div>
            <h2 className="section__title">A hotel, <em>at home.</em></h2>
          </div>
          <p className="section__lede">
            Every Adriatik residence is serviced by the hotel below, operated under the Best Western Premier Collection.
            Owners may opt in to the rental programme when not in residence.
          </p>
        </div>

        <div className="amen-grid">
          {AMENITIES.map((a, i) => (
            <div className="amen-card reveal" key={a.h} style={{ "--reveal-delay": `${i * 0.07}s` }}>
              <div className="num">{a.n}</div>
              <div className="tag">{a.tag}</div>
              <h4>{a.h}</h4>
              <p>{a.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ INVESTMENT ============ */
function InvestmentSection() {
  return (
    <section id="investment" className="section section--warm">
      <div className="container">
        <div className="section__head reveal reveal--slow">
          <div>
            <div className="eyebrow">04 · Investment</div>
            <h2 className="section__title" style={{ color: 'var(--warm-fg)' }}>The <em>numbers</em> behind the address.</h2>
          </div>
          <p className="section__lede">
            Albania is the fastest-growing tourism market in the Mediterranean. Residences in the Adriatik
            programme are projected to deliver hotel-grade returns under a managed-rental structure.
          </p>
        </div>

        <div className="invest">
          <div className="roi-card reveal">
            <div className="roi-row">
              <span className="k">Starting price</span>
              <span className="v">€200,000<span className="dim"> +</span></span>
            </div>
            <div className="roi-row">
              <span className="k">Projected gross yield</span>
              <span className="v"><em>8.0%</em></span>
            </div>
            <div className="roi-row">
              <span className="k">Capital appreciation (2026—29)</span>
              <span className="v">~12% <span className="dim">/ yr</span></span>
            </div>
            <div className="roi-row">
              <span className="k">Hotel occupancy (region · 2025)</span>
              <span className="v">74%</span>
            </div>
            <div className="roi-row">
              <span className="k">Property tax</span>
              <span className="v">0.05% <span className="dim">flat</span></span>
            </div>

            <div className="schedule">
              <h5>Payment schedule</h5>
              <div className="bar">
                <div style={{ width: '20%' }} />
                <div style={{ width: '30%' }} />
                <div style={{ width: '30%' }} />
                <div style={{ width: '20%' }} />
              </div>
              <div className="legend">
                <div><div className="leg-k">Reservation</div><div className="leg-v">20%</div></div>
                <div><div className="leg-k">Structure</div><div className="leg-v">30%</div></div>
                <div><div className="leg-k">Facade</div><div className="leg-v">30%</div></div>
                <div><div className="leg-k">Handover</div><div className="leg-v">20%</div></div>
              </div>
            </div>
          </div>

          <div className="invest__why reveal" style={{ "--reveal-delay": "0.12s" }}>
            <div className="eyebrow" style={{ color: '#9a6a3a' }}>Why Albania, why now</div>
            <h2>Mediterranean coast at <em>one third</em> the price.</h2>
            <p className="lede">
              The Albanian Riviera is recording the highest year-on-year tourism growth in Europe — yet
              coastal real-estate trades at roughly a third of comparable Italian, Croatian or Greek shorelines.
              Adriatik Residences captures that arbitrage at the top end of the market.
            </p>
            <div className="invest__bullets">
              {[
                ["i.",   "Tourism, compounding",     "11.7M international arrivals in 2024 — up 56% over 2019. Durrës is the country's largest coastal city."],
                ["ii.",  "EU candidacy on track",    "Accession negotiations opened October 2024. Property values typically re-rate 30–60% on accession."],
                ["iii.", "Operator-managed yield",   "The Best Western Premier Collection programme runs your residence as a hotel suite when you're away."],
                ["iv.",  "Owner-friendly structure", "No restrictions on foreign ownership. No capital gains tax on primary residences after 36 months."],
              ].map(([ix, h, p], i) => (
                <div className="invest__bullet reveal" key={h} style={{ "--reveal-delay": `${0.18 + i * 0.08}s` }}>
                  <div className="ix">{ix}</div>
                  <div>
                    <h5>{h}</h5>
                    <p>{p}</p>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 32, display: 'flex', gap: 14 }}>
              <a href="#reserve" className="btn btn--primary btn--sm" style={{ background: '#9a6a3a', borderColor: '#9a6a3a', color: '#f7f1e3' }}>
                Request prospectus <span className="arrow">→</span>
              </a>
              <a href="#" className="btn btn--ghost btn--sm">Schedule a call</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ LOCATION ============ */
const PINS = [
  { x: 320, y: 380, ix: "i.",   h: "Adriatik Residences",      desc: "Plazhi i Currilave, the protected northern beach", dist: "—",       distLabel: "On site" },
  { x: 240, y: 320, ix: "ii.",  h: "Durrës Marina",            desc: "Berths reserved for residents",                     dist: "0.4",     distLabel: "km · walk" },
  { x: 410, y: 220, ix: "iii.", h: "Old Town & Amphitheatre",   desc: "2nd century Roman amphitheatre",                    dist: "1.6",     distLabel: "km" },
  { x: 540, y: 320, ix: "iv.",  h: "Durrës Train Station",     desc: "Direct to Tirana, 38 min",                          dist: "2.2",     distLabel: "km" },
  { x: 620, y: 460, ix: "v.",   h: "Tirana Int'l Airport (TIA)",desc: "Direct flights to 60+ EU cities",                  dist: "39",      distLabel: "km · 35 min" },
  { x: 760, y: 200, ix: "vi.",  h: "Tirana centre",            desc: "Capital city",                                       dist: "37",      distLabel: "km" },
];

function LocationSection() {
  return (
    <section id="location" className="section section--alt">
      <div className="container">
        <div className="section__head reveal reveal--slow">
          <div>
            <div className="eyebrow">05 · Location</div>
            <h2 className="section__title">Durrës. <em>Forty</em> minutes from Europe.</h2>
          </div>
          <p className="section__lede">
            Plazhi i Currilave — the quiet, cliff-protected northern beach of Durrës — sits forty kilometres
            from Tirana International, with direct flights to sixty European cities daily.
          </p>
        </div>

        <div className="loc">
          <div className="loc__map reveal reveal--image">
            <svg viewBox="0 0 900 600" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <pattern id="seaP" width="14" height="14" patternUnits="userSpaceOnUse">
                  <path d="M0 7 Q3.5 2 7 7 T14 7" stroke="rgba(109,165,180,0.35)" strokeWidth="1" fill="none" />
                </pattern>
                <pattern id="landP" width="20" height="20" patternUnits="userSpaceOnUse">
                  <circle cx="2" cy="2" r="0.6" fill="rgba(216,201,163,0.18)" />
                </pattern>
              </defs>
              {/* sea */}
              <rect x="0" y="0" width="900" height="600" fill="url(#seaP)" />
              {/* land mass — schematic shoreline */}
              <path d="M 0 600 L 0 460 Q 80 440 150 420 Q 230 400 280 360 Q 340 320 380 280 Q 430 240 480 250 Q 540 270 580 300 Q 640 340 720 380 Q 800 420 900 410 L 900 600 Z"
                    fill="url(#landP)" stroke="rgba(216,201,163,0.45)" strokeWidth="1.2" />
              {/* coastline highlight near site */}
              <path d="M 240 360 Q 290 340 340 330"
                    stroke="#d8c9a3" strokeWidth="2" fill="none" />
              {/* compass */}
              <g transform="translate(820,80)">
                <circle r="22" fill="none" stroke="rgba(216,201,163,0.45)" strokeWidth="1" />
                <path d="M 0 -18 L 4 0 L 0 18 L -4 0 Z" fill="#d8c9a3" />
                <text y="-26" fontFamily="Inter" fontSize="9" letterSpacing="3"
                      fill="#d8c9a3" textAnchor="middle">N</text>
              </g>
              {/* scale */}
              <g transform="translate(40,540)">
                <line x1="0" y1="0" x2="80" y2="0" stroke="rgba(236,229,210,0.5)" strokeWidth="1" />
                <line x1="0" y1="-3" x2="0" y2="3" stroke="rgba(236,229,210,0.5)" strokeWidth="1" />
                <line x1="40" y1="-3" x2="40" y2="3" stroke="rgba(236,229,210,0.5)" strokeWidth="1" />
                <line x1="80" y1="-3" x2="80" y2="3" stroke="rgba(236,229,210,0.5)" strokeWidth="1" />
                <text y="18" fontFamily="Inter" fontSize="9" letterSpacing="2"
                      fill="rgba(236,229,210,0.6)">0 — 5km</text>
              </g>
              {/* sea label */}
              <text x="100" y="160" fontFamily="Cormorant Garamond" fontStyle="italic"
                    fontSize="34" fill="rgba(109,165,180,0.7)">Adriatic</text>
              <text x="600" y="540" fontFamily="Cormorant Garamond" fontStyle="italic"
                    fontSize="22" fill="rgba(216,201,163,0.45)">Albania</text>
              {/* pins */}
              {PINS.map((p) => (
                <g key={p.h} transform={`translate(${p.x},${p.y})`}>
                  {p.ix === "i." && (
                    <circle r="22" fill="none" stroke="#d8c9a3" strokeWidth="1" opacity="0.5">
                      <animate attributeName="r" from="10" to="28" dur="2.4s" repeatCount="indefinite" />
                      <animate attributeName="opacity" from="0.6" to="0" dur="2.4s" repeatCount="indefinite" />
                    </circle>
                  )}
                  <circle r={p.ix === "i." ? 7 : 4} fill={p.ix === "i." ? "#d8c9a3" : "rgba(236,229,210,0.7)"} />
                  <text x="12" y="4" fontFamily="Inter" fontSize="10" letterSpacing="2"
                        fill={p.ix === "i." ? "#d8c9a3" : "rgba(236,229,210,0.85)"}>
                    {p.h.toUpperCase()}
                  </text>
                </g>
              ))}
            </svg>
          </div>

          <div className="loc__points">
            {PINS.map((p, i) => (
              <div className="p reveal" key={p.h} style={{ "--reveal-delay": `${0.15 + i * 0.06}s` }}>
                <div className="ix">{p.ix}</div>
                <div>
                  <h5>{p.h}</h5>
                  <div className="desc">{p.desc}</div>
                </div>
                <div className="dist">{p.dist}<span>{p.distLabel}</span></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ HERITAGE ============ */
function HeritageSection() {
  return (
    <section id="heritage" className="section">
      <div className="container">
        <div className="heritage">
          <div className="heritage__media reveal reveal--image">
            <img src="assets/heritage-1962.png"
                 alt="Adriatik Hotel · 1962" loading="lazy" />
            <div className="stamp">Est. 1957 · Durrës</div>
          </div>
          <div className="heritage__copy reveal" style={{ "--reveal-delay": "0.15s" }}>
            <div className="eyebrow">06 · Heritage</div>
            <h2>Three generations on the <em>same</em> shore.</h2>
            <p>
              The Adriatik opened in 1957 as Albania's first seaside hotel. For nearly seventy years it has
              been the address that diplomats, writers and travellers have asked for by name — quietly modernised
              every decade, never relocated.
            </p>
            <p>
              The Residences are the next chapter. The same family stewardship. The same shoreline.
              Now, available to own.
            </p>
            <div className="heritage__sig">
              — The Hoxha family
              <div className="role">Owners, third generation</div>
            </div>
          </div>
        </div>

        <div className="partner-strip">
          <div className="reveal">
            <div className="label">Operating partner</div>
            <h6>Best Western Premier Collection</h6>
            <p>Global hospitality network. 4,000+ properties across 80 countries; the Premier Collection is reserved for distinctive, locally-anchored hotels.</p>
          </div>
          <div className="v" />
          <div className="reveal" style={{ "--reveal-delay": "0.1s" }}>
            <div className="label">Architecture</div>
            <h6>Studio Marchetti, Milan</h6>
            <p>Coastal residential specialists with completed work along the Ligurian and Amalfi coasts.</p>
          </div>
          <div className="v" />
          <div className="reveal" style={{ "--reveal-delay": "0.2s" }}>
            <div className="label">Family stewardship</div>
            <h6>The Hoxha family</h6>
            <p>Owner-operators since 1957, third generation. Continuously held, never franchised.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ RESERVE ============ */
function ReserveSection() {
  const [sent, setSent] = React.useState(false);
  return (
    <section id="reserve" className="section section--alt">
      <div className="container">
        <div className="reserve">
          <div className="reveal reveal--slow">
            <div className="eyebrow">07 · Reserve</div>
            <h2>Begin a private <em>conversation.</em></h2>
            <p>
              A senior member of the Adriatik sales team will respond personally within one business day —
              with the full prospectus, current availability, and a private viewing of the show residence in Tirana.
            </p>
            <p style={{ color: 'var(--fg-faint)', fontSize: 12, marginTop: 28, lineHeight: 1.7 }}>
              A €5,000 reservation deposit secures a unit; refundable for 14 days. Reservations are processed
              in the order received. Sales: <em>sales@adriatikresidences.al</em> · +355 52 230 600.
            </p>
          </div>

          {!sent ? (
            <form className="reveal" style={{ "--reveal-delay": "0.18s" }} onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
              <div className="row">
                <label>First name<input required type="text" defaultValue="" /></label>
                <label>Last name<input required type="text" defaultValue="" /></label>
              </div>
              <div className="row">
                <label>Email<input required type="email" /></label>
                <label>Phone<input type="tel" /></label>
              </div>
              <div className="row">
                <label>Country of residence
                  <select defaultValue="">
                    <option value="">Select…</option>
                    <option>United Kingdom</option><option>Italy</option><option>Germany</option>
                    <option>Switzerland</option><option>United States</option><option>Albania</option>
                    <option>Other</option>
                  </select>
                </label>
                <label>Residence interest
                  <select defaultValue="">
                    <option value="">Select…</option>
                    <option>Studio Suite · €200k+</option>
                    <option>Coast Residence · €385k+</option>
                    <option>Marina Residence · €640k+</option>
                    <option>Penthouse · €1.25M+</option>
                    <option>Multiple / advise me</option>
                  </select>
                </label>
              </div>
              <label>Message
                <textarea placeholder="Anything you'd like our team to know" />
              </label>
              <div className="submit">
                <button type="submit" className="btn btn--primary">
                  Request prospectus <span className="arrow">→</span>
                </button>
                <span className="privacy">We respect your privacy. No third-party sharing.</span>
              </div>
            </form>
          ) : (
            <div style={{ padding: '40px 0', borderTop: '1px solid var(--line)' }}>
              <div className="eyebrow" style={{ color: 'var(--accent)' }}>Received</div>
              <h3 className="serif" style={{ fontSize: 36, lineHeight: 1.1, margin: '20px 0 14px' }}>
                Thank you. <em>We'll be in touch.</em>
              </h3>
              <p style={{ color: 'var(--fg-dim)', fontSize: 14, lineHeight: 1.7 }}>
                A senior member of our sales team will reach out within one business day with the full prospectus and current availability.
              </p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ============ FOOTER ============ */
function Footer() {
  return (
    <footer className="footer">
      <div className="footer__top">
        <div className="footer__brand">
          <img src="assets/adriatik-logo.png" alt="Adriatik Hotel" className="logo-light" />
          <p>Adriatik Residences. A development by the Hoxha family, operated under the Best Western Premier Collection. Plazhi i Currilave, Durrës, Albania.</p>
        </div>
        <div className="footer__col">
          <h6>Discover</h6>
          <a href="#architecture">Architecture</a>
          <a href="#residences">Residences</a>
          <a href="#amenities">Amenities</a>
          <a href="#location">Location</a>
        </div>
        <div className="footer__col">
          <h6>Invest</h6>
          <a href="#investment">Investment case</a>
          <a href="#">Prospectus (PDF)</a>
          <a href="#">Floor plans</a>
          <a href="#">Payment schedule</a>
        </div>
        <div className="footer__col">
          <h6>Sales</h6>
          <a href="#reserve">Reserve a residence</a>
          <a href="mailto:sales@adriatikresidences.al">sales@adriatikresidences.al</a>
          <a href="tel:+35552230600">+355 52 230 600</a>
          <a href="#">Show residence · Tirana</a>
        </div>
        <div className="footer__col">
          <h6>The hotel</h6>
          <a href="#">Adriatik Hotel</a>
          <a href="#">Heritage · 1957</a>
          <a href="#">Press</a>
          <a href="#">Privacy</a>
        </div>
      </div>
      <div className="footer__bottom">
        <span>© 2026 Adriatik Residences SHPK · Durrës, Albania</span>
        <div className="links">
          <a href="#">EN</a><a href="#">SQ</a><a href="#">IT</a>
          <a href="#">Imprint</a>
          <a href="#">Cookies</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  ArchitectureSection, AmenitiesSection, InvestmentSection,
  LocationSection, HeritageSection, ReserveSection, Footer,
});