/* global React, useT, LangContext */

/* ============ ARCHITECTURE ============ */
function ArchitectureSection() {
  const t = useT();
  return (
    <section id="architecture" className="section section--alt">
      <div className="container">
        <div className="section__head reveal reveal--slow">
          <div>
            <div className="eyebrow">{t("arch.eyebrow")}</div>
            <h2 className="section__title">{t("arch.title_1")}<em>{t("arch.title_em")}</em>{t("arch.title_2")}</h2>
          </div>
          <p className="section__lede">{t("arch.lede")}</p>
        </div>

        <div className="arch__grid">
          <div className="arch__tile reveal reveal--image">
            <img src="assets/facade.png"
                 alt="Adriatik Residences west facade — luxury beachfront tower in Durrës, Albania" loading="lazy" />
            <div className="arch__caption">
              <span>{t("arch.cap.facade_loc")}</span>
              <span>{t("arch.cap.year")}</span>
            </div>
          </div>
          <div className="arch__tile reveal reveal--image" style={{ "--reveal-delay": "0.1s" }}>
            <img src="assets/interior.png"
                 alt="Adriatik Residences lobby render — branded residences interior, Durrës" loading="lazy" />
            <div className="arch__caption">
              <span>{t("arch.cap.lobby_loc")}</span>
              <span>{t("arch.cap.year")}</span>
            </div>
          </div>
          <div className="arch__tile reveal reveal--image" style={{ "--reveal-delay": "0.2s" }}>
            <img src="assets/pool-deck.png"
                 alt="Adriatik Residences pool deck at dusk — Albanian Riviera beachfront residences" loading="lazy" />
            <div className="arch__caption">
              <span>{t("arch.cap.west_loc")}</span>
              <span>{t("arch.cap.year")}</span>
            </div>
          </div>
          <div className="arch__tile reveal reveal--image" style={{ "--reveal-delay": "0.3s" }}>
            <img src="assets/back.png"
                 alt="Adriatik Residences east facade — sea-facing balconies overlooking the Adriatic" loading="lazy" />
            <div className="arch__caption">
              <span>{t("arch.cap.east_loc")}</span>
              <span>{t("arch.cap.year")}</span>
            </div>
          </div>
        </div>

        <div className="arch__notes">
          {[
            ["i.",   t("arch.note1.h"), t("arch.note1.p")],
            ["ii.",  t("arch.note2.h"), t("arch.note2.p")],
            ["iii.", t("arch.note3.h"), t("arch.note3.p")],
            ["iv.",  t("arch.note4.h"), t("arch.note4.p")],
          ].map(([n, h, p], i) => (
            <div className="arch__note reveal" key={n} style={{ "--reveal-delay": `${i * 0.08}s` }}>
              <div className="num">{n}</div>
              <h4>{h}</h4>
              <p>{p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ AMENITIES ============ */
const AMENITY_NUMERALS = ["i.", "ii.", "iii.", "iv.", "v.", "vi."];

function AmenitiesSection() {
  const t = useT();
  return (
    <section id="amenities" className="section">
      <div className="container">
        <div className="section__head reveal reveal--slow">
          <div>
            <div className="eyebrow">{t("amen.eyebrow")}</div>
            <h2 className="section__title">{t("amen.title_1")}<em>{t("amen.title_em")}</em></h2>
          </div>
          <p className="section__lede">{t("amen.lede")}</p>
        </div>

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

/* ============ INVESTMENT ============ */
function InvestmentSection() {
  const t = useT();
  return (
    <section id="investment" className="section section--warm">
      <div className="container">
        <div className="section__head reveal reveal--slow">
          <div>
            <div className="eyebrow">{t("inv.eyebrow")}</div>
            <h2 className="section__title" style={{ color: 'var(--warm-fg)' }}>{t("inv.title_1")}<em>{t("inv.title_em")}</em>{t("inv.title_2")}</h2>
          </div>
          <p className="section__lede">{t("inv.lede")}</p>
        </div>

        <div className="invest">
          <div className="roi-card reveal">
            <div className="roi-row">
              <span className="k">{t("inv.roi.starting")}</span>
              <span className="v">{t("inv.roi.starting_v")}<span className="dim"> {t("inv.roi.starting_v2")}</span></span>
            </div>
            <div className="roi-row">
              <span className="k">{t("inv.roi.yield")}</span>
              <span className="v"><em>8.0%</em></span>
            </div>
            <div className="roi-row">
              <span className="k">{t("inv.roi.appreciation")}</span>
              <span className="v">{t("inv.roi.appreciation_v")} <span className="dim">{t("inv.roi.appreciation_per")}</span></span>
            </div>
            <div className="roi-row">
              <span className="k">{t("inv.roi.occupancy")}</span>
              <span className="v">{t("inv.roi.occupancy_v")}</span>
            </div>
            <div className="roi-row">
              <span className="k">{t("inv.roi.tax")}</span>
              <span className="v">{t("inv.roi.tax_v")} <span className="dim">{t("inv.roi.tax_v_suffix")}</span></span>
            </div>

            <div className="schedule">
              <h5>{t("inv.schedule.h")}</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">{t("inv.schedule.reservation")}</div><div className="leg-v">20%</div></div>
                <div><div className="leg-k">{t("inv.schedule.structure")}</div><div className="leg-v">30%</div></div>
                <div><div className="leg-k">{t("inv.schedule.facade")}</div><div className="leg-v">30%</div></div>
                <div><div className="leg-k">{t("inv.schedule.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' }}>{t("inv.why.eyebrow")}</div>
            <h2>{t("inv.why.title_1")}<em>{t("inv.why.title_em")}</em>{t("inv.why.title_2")}</h2>
            <p className="lede">{t("inv.why.lede")}</p>
            <div className="invest__bullets">
              {[
                ["i.",   t("inv.bullet1.h"), t("inv.bullet1.p")],
                ["ii.",  t("inv.bullet2.h"), t("inv.bullet2.p")],
                ["iii.", t("inv.bullet3.h"), t("inv.bullet3.p")],
                ["iv.",  t("inv.bullet4.h"), t("inv.bullet4.p")],
              ].map(([ix, h, p], i) => (
                <div className="invest__bullet reveal" key={ix} 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' }}>
                {t("inv.cta_prospectus")} <span className="arrow">→</span>
              </a>
              <a href="#" className="btn btn--ghost btn--sm">{t("inv.cta_call")}</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ LOCATION ============ */
/* PINS hold position + non-translatable distance value; labels via t() */
const PINS = [
  { id: 1, x: 320, y: 380, ix: "i.",   dist: "—"   },
  { id: 2, x: 240, y: 320, ix: "ii.",  dist: "0.4" },
  { id: 3, x: 410, y: 220, ix: "iii.", dist: "1.6" },
  { id: 4, x: 540, y: 320, ix: "iv.",  dist: "2.2" },
  { id: 5, x: 620, y: 460, ix: "v.",   dist: "39"  },
  { id: 6, x: 760, y: 200, ix: "vi.",  dist: "37"  },
];

function LocationSection() {
  const t = useT();
  return (
    <section id="location" className="section section--alt">
      <div className="container">
        <div className="section__head reveal reveal--slow">
          <div>
            <div className="eyebrow">{t("loc.eyebrow")}</div>
            <h2 className="section__title">{t("loc.title_1")}<em>{t("loc.title_em")}</em>{t("loc.title_2")}</h2>
          </div>
          <p className="section__lede">{t("loc.lede")}</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">{t("loc.svg.north")}</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)">{t("loc.svg.scale")}</text>
              </g>
              {/* sea label */}
              <text x="100" y="160" fontFamily="Cormorant Garamond" fontStyle="italic"
                    fontSize="34" fill="rgba(109,165,180,0.7)">{t("loc.svg.adriatic")}</text>
              <text x="600" y="540" fontFamily="Cormorant Garamond" fontStyle="italic"
                    fontSize="22" fill="rgba(216,201,163,0.45)">{t("loc.svg.albania")}</text>
              {/* pins */}
              {PINS.map((p) => (
                <g key={p.id} 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)"}>
                    {t(`loc.pin${p.id}.h`).toUpperCase()}
                  </text>
                </g>
              ))}
            </svg>
          </div>

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

/* ============ HERITAGE ============ */
function HeritageSection() {
  const t = useT();
  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 in Durrës, Albania — archive photograph 1962" loading="lazy" />
            <div className="stamp">{t("her.stamp")}</div>
          </div>
          <div className="heritage__copy reveal" style={{ "--reveal-delay": "0.15s" }}>
            <div className="eyebrow">{t("her.eyebrow")}</div>
            <h2>{t("her.title_1")}<em>{t("her.title_em")}</em>{t("her.title_2")}</h2>
            <p>{t("her.body1")}</p>
            <p>{t("her.body2")}</p>
            <p>{t("her.body3")}</p>
            <div className="heritage__sig">
              {t("her.sig")}
              <div className="role">{t("her.sig_role")}</div>
            </div>
          </div>
        </div>

        <div className="partner-strip">
          <div className="reveal">
            <div className="label">{t("her.partner1.label")}</div>
            <h6>{t("her.partner1.h")}</h6>
            <p>{t("her.partner1.p")}</p>
          </div>
          <div className="v" />
          <div className="reveal" style={{ "--reveal-delay": "0.1s" }}>
            <div className="label">{t("her.partner2.label")}</div>
            <h6>{t("her.partner2.h")}</h6>
            <p>{t("her.partner2.p")}</p>
          </div>
          <div className="v" />
          <div className="reveal" style={{ "--reveal-delay": "0.2s" }}>
            <div className="label">{t("her.partner3.label")}</div>
            <h6>{t("her.partner3.h")}</h6>
            <p>{t("her.partner3.p")}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ RESERVE ============ */
function ReserveSection() {
  const t = useT();
  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">{t("rsv.eyebrow")}</div>
            <h2>{t("rsv.title_1")}<em>{t("rsv.title_em")}</em></h2>
            <p>{t("rsv.body")}</p>
            <p style={{ color: 'var(--fg-faint)', fontSize: 12, marginTop: 28, lineHeight: 1.7 }}>
              {t("rsv.privacy_note")}<em>sales@adriatikresidences.al</em>{t("rsv.privacy_phone")}
            </p>
          </div>

          {!sent ? (
            <form className="reveal" style={{ "--reveal-delay": "0.18s" }} onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
              <div className="row">
                <label>{t("form.first")}<input required type="text" defaultValue="" /></label>
                <label>{t("form.last")}<input required type="text" defaultValue="" /></label>
              </div>
              <div className="row">
                <label>{t("form.email")}<input required type="email" /></label>
                <label>{t("form.phone")}<input type="tel" /></label>
              </div>
              <div className="row">
                <label>{t("form.country")}
                  <select defaultValue="">
                    <option value="">{t("form.country_select")}</option>
                    <option>{t("form.country.uk")}</option>
                    <option>{t("form.country.it")}</option>
                    <option>{t("form.country.de")}</option>
                    <option>{t("form.country.ch")}</option>
                    <option>{t("form.country.us")}</option>
                    <option>{t("form.country.al")}</option>
                    <option>{t("form.country.other")}</option>
                  </select>
                </label>
                <label>{t("form.interest")}
                  <select defaultValue="">
                    <option value="">{t("form.country_select")}</option>
                    <option>{t("form.interest.studio")}</option>
                    <option>{t("form.interest.coast")}</option>
                    <option>{t("form.interest.marina")}</option>
                    <option>{t("form.interest.ph")}</option>
                    <option>{t("form.interest.multi")}</option>
                  </select>
                </label>
              </div>
              <label>{t("form.message")}
                <textarea placeholder={t("form.message_placeholder")} />
              </label>
              <div className="submit">
                <button type="submit" className="btn btn--primary">
                  {t("form.submit")} <span className="arrow">→</span>
                </button>
                <span className="privacy">{t("form.privacy")}</span>
              </div>
            </form>
          ) : (
            <div style={{ padding: '40px 0', borderTop: '1px solid var(--line)' }}>
              <div className="eyebrow" style={{ color: 'var(--accent)' }}>{t("rsv.success.eyebrow")}</div>
              <h3 className="serif" style={{ fontSize: 36, lineHeight: 1.1, margin: '20px 0 14px' }}>
                {t("rsv.success.title_1")}<em>{t("rsv.success.title_em")}</em>
              </h3>
              <p style={{ color: 'var(--fg-dim)', fontSize: 14, lineHeight: 1.7 }}>
                {t("rsv.success.body")}
              </p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ============ FOOTER ============ */
function Footer() {
  const t = useT();
  const { lang, setLang } = React.useContext(LangContext);
  return (
    <footer className="footer">
      <div className="footer__top">
        <div className="footer__brand">
          <img src="assets/adriatik-logo.png" alt="Adriatik Residences — luxury branded residences in Durrës, Albania" className="logo-light" />
          <p>{t("ftr.brand_text")}</p>
        </div>
        <div className="footer__col">
          <h6>{t("ftr.col1.h")}</h6>
          <a href="#architecture">{t("nav.architecture")}</a>
          <a href="#residences">{t("nav.residences")}</a>
          <a href="#amenities">{t("nav.amenities")}</a>
          <a href="#location">{t("nav.location")}</a>
        </div>
        <div className="footer__col">
          <h6>{t("ftr.col2.h")}</h6>
          <a href="#investment">{t("ftr.invest.case")}</a>
          <a href="#">{t("ftr.invest.prospectus")}</a>
          <a href="#">{t("ftr.invest.plans")}</a>
          <a href="#">{t("ftr.invest.schedule")}</a>
        </div>
        <div className="footer__col">
          <h6>{t("ftr.col3.h")}</h6>
          <a href="#reserve">{t("ftr.sales.reserve")}</a>
          <a href="mailto:sales@adriatikresidences.al">sales@adriatikresidences.al</a>
          <a href="tel:+35552230600">+355 52 230 600</a>
          <a href="#">{t("ftr.sales.show_residence")}</a>
        </div>
        <div className="footer__col">
          <h6>{t("ftr.col4.h")}</h6>
          <a href="#">{t("ftr.hotel.adriatik")}</a>
          <a href="#">{t("ftr.hotel.heritage")}</a>
          <a href="#">{t("ftr.hotel.press")}</a>
          <a href="#">{t("ftr.hotel.privacy")}</a>
        </div>
      </div>
      <div className="footer__bottom">
        <span>{t("ftr.copyright")}</span>
        <div className="links">
          {["EN", "AL", "IT"].map((l) => (
            <a key={l} href="#" onClick={(e) => { e.preventDefault(); setLang(l); }}
               style={{ opacity: lang === l ? 1 : 0.55 }}>{l}</a>
          ))}
          <a href="#">{t("ftr.imprint")}</a>
          <a href="#">{t("ftr.cookies")}</a>
        </div>
      </div>
    </footer>
  );
}

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