/* Danube Properties — Project Microsite */

const { useState: useStateM, useEffect: useEffectM, useRef: useRefM } = React;

function ProjectMicrosite({ project, onBack, onOpenLead, lang }) {
  const { AMENITIES, CONCEPTS, LANDMARKS } = window.DANUBE_DATA;
  const { LeadForm } = window.DanubeComponents;
  const [activeSection, setActiveSection] = useStateM("hero");
  const sections = ["hero", "plan", "location", "design", "residences", "gallery", "enquire"];

  useEffectM(() => {
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [project.slug]);

  useEffectM(() => {
    const onScroll = () => {
      let cur = "hero";
      for (const id of sections) {
        const el = document.getElementById("sec-" + id);
        if (el && el.getBoundingClientRect().top < 200) cur = id;
      }
      setActiveSection(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const scrollTo = (id) => {
    const el = document.getElementById("sec-" + id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 60;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  };

  const gallery = project.gallery && project.gallery.length ? project.gallery : [{ src: project.hero, caption: "Project" }];
  // ensure at least 5 gallery slots by reusing
  const g = [];
  for (let i = 0; i < 5; i++) g.push(gallery[i % gallery.length]);

  return (
    <div>
      {/* Hero */}
      <section id="sec-hero" className="microsite-hero" data-screen-label={"01 Hero — " + project.name}>
        <div className="microsite-hero-bg" style={{ backgroundImage: `url(${project.hero})` }}></div>
        <div className="microsite-hero-content">
          <div className="microsite-breadcrumb">
            <button onClick={onBack}>← Danube Properties</button>
            <span style={{ opacity: 0.4 }}>/</span>
            <span>Projects</span>
            <span style={{ opacity: 0.4 }}>/</span>
            <span style={{ color: "#fff" }}>{project.name}</span>
          </div>
          <h1 className="microsite-h1">
            {project.name.slice(0, project.name.length - 1)}<em>{project.name.slice(-1)}</em>
          </h1>
          {project.partner && (
            <div style={{ marginTop: 24, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.8)" }}>
              In collaboration with <span style={{ color: "#C9A24B" }}>{project.partner}</span>*
            </div>
          )}
          <p className="microsite-tagline">"{project.tagline}"</p>
          <div className="microsite-meta-row">
            <div className="microsite-meta-item">
              <div className="label">Community</div>
              <div className="value">{project.community}</div>
            </div>
            <div className="microsite-meta-item">
              <div className="label">Typology</div>
              <div className="value">{project.typology}</div>
            </div>
            <div className="microsite-meta-item">
              <div className="label">Status</div>
              <div className="value" style={{ color: project.status === "launching" ? "#FF4A51" : project.status === "selling" ? "#fff" : "#C9A24B" }}>
                {project.status === "launching" ? "Launching" : project.status === "selling" ? "Selling" : "Handed over"}*
              </div>
            </div>
            <div className="microsite-meta-item">
              <div className="label">Handover</div>
              <div className="value">{project.handover}</div>
            </div>
          </div>
          <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => scrollTo("enquire")}>Register interest →</button>
            <button className="btn btn-ghost-light" onClick={() => scrollTo("plan")}>The 1% plan</button>
          </div>
        </div>
      </section>

      {/* Sticky section tabs */}
      <div className="section-tabs">
        <div className="section-tabs-inner">
          {[
            ["hero", "Overview"],
            ["plan", "1% Plan"],
            ["location", "Location"],
            ["design", "Design & Amenities"],
            ["residences", "Residences"],
            ["gallery", "Gallery"],
            ["enquire", "Enquire"],
          ].map(([id, label]) => (
            <button
              key={id}
              className={"section-tab" + (activeSection === id ? " active" : "")}
              onClick={() => scrollTo(id)}
            >{label}</button>
          ))}
        </div>
      </div>

      {/* 1% Plan band */}
      <section id="sec-plan" className="plan-band" data-screen-label="02 1% Plan">
        <div className="shell">
          <div className="plan-band-inner">
            <div>
              <div className="eyebrow" style={{ color: "rgba(255,255,255,0.7)", marginBottom: 16 }}>
                <span className="diamond" style={{ background: "#fff", marginRight: 10 }}></span>
                The original 1% monthly plan
              </div>
              <h2 className="plan-headline">
                Own at <em>{project.name}</em><br />from 1<span style={{ fontStyle: "italic" }}>%</span> a month.
              </h2>
            </div>
            <div>
              <div className="plan-stats">
                <div>
                  <div className="plan-stat">1%</div>
                  <div className="plan-stat-label">Monthly</div>
                </div>
                <div>
                  <div className="plan-stat">0%</div>
                  <div className="plan-stat-label">Interest</div>
                </div>
                <div>
                  <div className="plan-stat">80</div>
                  <div className="plan-stat-label">Months*</div>
                </div>
              </div>
            </div>
            <div>
              <p style={{ fontSize: 15, lineHeight: 1.55, marginBottom: 24, opacity: 0.92 }}>
                Direct from the developer. No third-party financing. Exact split (booking · construction · handover · post-handover) confirmed at enquiry.
              </p>
              <button className="btn" style={{ background: "#fff", color: "var(--primary)" }} onClick={() => onOpenLead("interest", project.name)}>
                Ask about the {project.name} plan →
              </button>
            </div>
          </div>
          <div className="plan-foot">
            <div className="plan-foot-note">
              *Indicative. The 1% monthly plan with 0% interest and up to 80 months is a real published Danube scheme; exact terms, percentage split and unit price for {project.name} are confirmed on enquiry per RERA/DLD.
            </div>
            <div className="mono" style={{ opacity: 0.7, fontSize: 11, letterSpacing: "0.12em" }}>
              DLD DEV. NO. 1009*
            </div>
          </div>
        </div>
      </section>

      {/* Location */}
      <section id="sec-location" className="section-pad" data-screen-label="03 Location">
        <div className="shell">
          <div className="section-head">
            <div>
              <div className="eyebrow eyebrow-red">◆ 03 / Location</div>
              <h2 className="section-h2">
                <em>{project.community}</em>,<br />minutes from everywhere.
              </h2>
            </div>
            <p className="section-intro">
              {project.name} sits in {project.community}, with onward routes via Sheikh Zayed Road. Distances below are indicative — exact coordinates confirmed at enquiry.
            </p>
          </div>

          <div className="location">
            <div className="location-map">
              <div className="map-grid"></div>
              <div className="map-road" style={{ top: "30%", left: 0, right: 0, height: 3 }}></div>
              <div className="map-road" style={{ top: 0, bottom: 0, left: "65%", width: 3 }}></div>
              <div className="map-road" style={{ top: "70%", left: 0, right: 0, height: 2, opacity: 0.6 }}></div>
              <div className="map-pulse"></div>
              <div className="map-pin"></div>
              <div className="map-landmark" style={{ top: "22%", left: "20%" }}>Downtown</div>
              <div className="map-landmark" style={{ top: "78%", left: "70%" }}>Airport</div>
              <div className="map-landmark" style={{ top: "60%", left: "10%" }}>Marina</div>
              <div className="map-landmark" style={{ top: "44%", right: "8%", textAlign: "right" }}>Business Bay</div>
              <div style={{ position: "absolute", bottom: 20, left: 20, fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em", color: "var(--muted)" }}>
                MAP — INDICATIVE
              </div>
            </div>

            <div>
              <h3 className="display" style={{ fontSize: 36, marginBottom: 24 }}>
                Drive times <em>from {project.name}</em>
              </h3>
              <div className="landmark-list">
                {LANDMARKS.map((l, i) => (
                  <div key={i} className="landmark-item">
                    <div className="dist">{l.dist}</div>
                    <div>
                      <div className="lname">{l.name}</div>
                      <div className="ltype">{l.type}</div>
                    </div>
                    <div className="mono" style={{ fontSize: 10, color: "var(--border-strong)" }}>↗</div>
                  </div>
                ))}
              </div>
              <div className="mono" style={{ fontSize: 11, color: "var(--muted)", marginTop: 16, letterSpacing: "0.08em" }}>
                *Drive times indicative; subject to traffic & RERA-confirmed coordinates.
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Design & Amenities */}
      <section id="sec-design" className="bg-dark section-pad" data-screen-label="04 Design & Amenities">
        <div className="shell">
          <div className="section-head">
            <div>
              <div className="eyebrow" style={{ color: "rgba(255,255,255,0.6)" }}>◆ 04 / Design & Amenities</div>
              <h2 className="section-h2" style={{ color: "#fff" }}>
                Affordable luxury,<br /><em>fully amenitised.</em>
              </h2>
            </div>
            <p className="section-intro" style={{ color: "rgba(255,255,255,0.7)" }}>
              A confirmed amenity programme — designed around movement, restoration, and the slow pleasure of a building you can spend a whole day inside. Final amenity list per project.
            </p>
          </div>

          <div className="amenity-grid" style={{ background: "rgba(255,255,255,0.1)", border: "none" }}>
            {AMENITIES.map((a) => (
              <div key={a.num} className="amenity" style={{ background: "var(--secondary)", color: "#fff" }}>
                <div className="amenity-num">◆ {a.num}</div>
                <div className="amenity-name">{a.name}</div>
                <div className="amenity-desc" style={{ color: "rgba(255,255,255,0.6)" }}>{a.desc}</div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 48, display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "1px solid rgba(255,255,255,0.15)", paddingTop: 24, flexWrap: "wrap", gap: 16 }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "rgba(255,255,255,0.5)" }}>
              {project.name.toUpperCase()} · AMENITY PROGRAMME · INDICATIVE
            </div>
            <button className="btn btn-ghost-light btn-sm" onClick={() => onOpenLead("brochure", project.name)}>
              Download full amenity sheet
            </button>
          </div>
        </div>
      </section>

      {/* Residences */}
      <section id="sec-residences" className="section-pad" data-screen-label="05 Residences">
        <div className="shell">
          <div className="section-head">
            <div>
              <div className="eyebrow eyebrow-red">◆ 05 / Residences</div>
              <h2 className="section-h2">
                Concepts &<br /><em>residence types</em>.
              </h2>
            </div>
            <p className="section-intro">
              {project.units}. Exact sizes, layouts and prices are confirmed per unit on enquiry — never published. Choose a concept to receive plates and floor plans.
            </p>
          </div>

          <div className="concepts">
            {CONCEPTS.map((c) => (
              <div key={c.num} className="concept-row" onClick={() => onOpenLead("brochure", project.name)}>
                <div className="num">◆ {c.num}</div>
                <div className="name">{c.name}</div>
                <div className="desc">{c.desc}</div>
                <div className="meta">{c.meta}</div>
                <div className="cta">Plans →</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Gallery */}
      <section id="sec-gallery" className="section-pad-sm" data-screen-label="06 Gallery">
        <div className="shell">
          <div className="section-head">
            <div>
              <div className="eyebrow eyebrow-red">◆ 06 / Gallery</div>
              <h2 className="section-h2">
                Renders <em>& interiors</em>.
              </h2>
            </div>
            <p className="section-intro">
              Project renders sourced directly from the {project.name} portfolio page. Subjects + RERA/DLD status confirmed before publication.
            </p>
          </div>

          <div className="gallery">
            <div className="g-item g-1">
              <img src={g[0].src} alt={g[0].caption} />
              <div className="g-caption">◆ {g[0].caption}</div>
            </div>
            <div className="g-item g-2">
              <img src={g[1].src} alt={g[1].caption} />
              <div className="g-caption">◆ {g[1].caption}</div>
            </div>
            <div className="g-item g-3">
              <img src={g[2].src} alt={g[2].caption} />
              <div className="g-caption">◆ {g[2].caption}</div>
            </div>
            <div className="g-item g-4">
              <img src={g[3].src} alt={g[3].caption} />
              <div className="g-caption">◆ {g[3].caption}</div>
            </div>
            <div className="g-item g-5">
              <img src={g[4].src} alt={g[4].caption} />
              <div className="g-caption">◆ {g[4].caption}</div>
            </div>
            <div className="g-item g-6" style={{ background: "var(--secondary)", color: "#fff", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: 40 }}>
              <div className="eyebrow" style={{ color: "rgba(255,255,255,0.6)" }}>◆ Next step</div>
              <div>
                <div className="display" style={{ fontSize: 48, lineHeight: 1, marginBottom: 20, color: "#fff" }}>
                  Want the full <em>film</em> + brochure?
                </div>
                <button className="btn btn-primary" onClick={() => onOpenLead("brochure", project.name)}>
                  Send me the brochure
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Lead block */}
      <section id="sec-enquire" className="lead-block" data-screen-label="07 Enquire">
        <div className="shell">
          <div className="lead-grid">
            <div>
              <div className="eyebrow" style={{ color: "rgba(255,255,255,0.6)" }}>◆ 07 / Enquire</div>
              <h2 className="lead-h2">
                Own a residence at <em>{project.name}</em>.
              </h2>
              <p style={{ color: "rgba(255,255,255,0.7)", fontSize: 17, lineHeight: 1.55, maxWidth: "44ch" }}>
                Senior consultant will respond within 4 hours. We confirm RERA/DLD status, payment plan split, available residences, and arrange a private viewing — on-site or remote.
              </p>

              <div className="lead-pillars">
                <div className="lead-pillar">
                  <div className="num">01</div>
                  <div>
                    <div className="title">Direct from the developer</div>
                    <div className="desc">No intermediary commission, no third-party markup. {project.name} sales handled in-house.</div>
                  </div>
                </div>
                <div className="lead-pillar">
                  <div className="num">02</div>
                  <div>
                    <div className="title">The original 1% monthly plan</div>
                    <div className="desc">0% interest, up to 80 months*. Split confirmed per project on enquiry — never published.</div>
                  </div>
                </div>
                <div className="lead-pillar">
                  <div className="num">03</div>
                  <div>
                    <div className="title">Multilingual sales desk</div>
                    <div className="desc">EN · AR · RU · ZH · HI — across UAE, India, China, KSA, Bahrain, Oman, UK offices.</div>
                  </div>
                </div>
              </div>
            </div>

            <div>
              <LeadForm defaultProject={`${project.name} — ${project.community}`} />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.DanubeMicrosite = ProjectMicrosite;