/* Danube Properties — Main App: Home + Routing */

const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA } = React;

function HomeView({ onOpenProject, onOpenLead, lang, tweaks }) {
  const { PROJECTS, COMMUNITIES, LANDMARKS } = window.DANUBE_DATA;
  const [filter, setFilter] = useStateA("All");
  const [heroIdx, setHeroIdx] = useStateA(0);

  const FEATURED = useMemoA(() => [
    PROJECTS.find((p) => p.slug === "bayz-101"),
    PROJECTS.find((p) => p.slug === "viewz"),
    PROJECTS.find((p) => p.slug === "aspirz"),
    PROJECTS.find((p) => p.slug === "oceanz"),
  ].filter(Boolean), []);

  useEffectA(() => {
    if (!tweaks.heroAutoplay) return;
    const t = setInterval(() => setHeroIdx((i) => (i + 1) % FEATURED.length), 5500);
    return () => clearInterval(t);
  }, [FEATURED.length, tweaks.heroAutoplay]);

  const filteredProjects = useMemoA(() => {
    if (filter === "All") return PROJECTS;
    return PROJECTS.filter((p) => p.community.includes(filter));
  }, [filter, PROJECTS]);

  const heroProject = FEATURED[heroIdx];

  return (
    <div>
      {/* HERO */}
      <section id="home-hero" className="hero" data-screen-label="01 Hero">
        {FEATURED.map((p, i) => (
          <div
            key={p.slug}
            className="hero-bg"
            style={{
              backgroundImage: `url(${p.hero})`,
              opacity: i === heroIdx ? 1 : 0,
              position: "absolute", inset: 0,
            }}
          />
        ))}
        <div className="hero-content">
          <div className="hero-eyebrow-row">
            <span className="diamond"></span>
            <span>Danube Properties</span>
            <span className="dot"></span>
            <span>Dubai · Off-plan · Direct from the developer</span>
          </div>
          <h1 className="hero-h1">
            Own your home<br />
            in Dubai — <em>from 1%</em><br />
            a month.
          </h1>
          <p className="hero-sub">
            Affordable-luxury residences across Dubai, sold direct from the developer on the original 1% monthly payment plan — 0% interest, up to 80 months*. Twelve live launches, one consultant, four hours to a response.
          </p>
          <div className="hero-cta-row">
            <button className="btn btn-primary" onClick={() => onOpenLead("interest")}>Register your interest →</button>
            <button className="btn btn-ghost-light" onClick={() => document.getElementById("projects").scrollIntoView({ behavior: "smooth" })}>
              See the launches
            </button>
          </div>
        </div>

        <div className="hero-meta">
          <div className="hero-meta-label">Now showing</div>
          <div className="hero-meta-value">{heroProject.name}</div>
          <div style={{ fontSize: 13, color: "rgba(255,255,255,0.7)", marginTop: 4 }}>
            {heroProject.community}
          </div>
          <div className="hero-meta-counter">
            <span className="diamond" style={{ width: 6, height: 6, marginRight: 8 }}></span>
            {String(heroIdx + 1).padStart(2, "0")} / {String(FEATURED.length).padStart(2, "0")}
          </div>
          <div style={{ display: "flex", gap: 6, marginTop: 12, justifyContent: "flex-end" }}>
            {FEATURED.map((p, i) => (
              <button
                key={p.slug}
                onClick={() => setHeroIdx(i)}
                aria-label={p.name}
                style={{
                  width: 24, height: 2, border: "none", padding: 0,
                  background: i === heroIdx ? "var(--primary)" : "rgba(255,255,255,0.3)",
                  cursor: "pointer", transition: "all 200ms",
                }}
              />
            ))}
          </div>
          <button
            className="btn btn-ghost-light btn-sm"
            style={{ marginTop: 16 }}
            onClick={() => onOpenProject(heroProject)}
          >Open microsite →</button>
        </div>

        <div className="scroll-cue">
          <span>Scroll</span>
          <span className="line"></span>
        </div>
      </section>

      {/* PARTNER BAND */}
      <window.DanubeComponents.PartnerBand />

      {/* 1% PLAN BAND */}
      <section id="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.8)", marginBottom: 16 }}>
                <span className="diamond" style={{ background: "#fff", marginRight: 10 }}></span>
                The original 1% monthly plan
              </div>
              <h2 className="plan-headline">
                One percent<br /><em>a month.</em>
              </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 }}>
                We pioneered the scheme that changed Dubai off-plan: a monthly payment so small the price feels like rent. Direct from the developer, no third-party financing — split and unit price confirmed per project.
              </p>
              <button className="btn" style={{ background: "#fff", color: "var(--primary)" }} onClick={() => onOpenLead("interest")}>
                Ask about your project →
              </button>
            </div>
          </div>
          <div className="plan-foot">
            <div className="plan-foot-note">
              *The 1% monthly payment plan with 0% interest and up to 80 months is a real published Danube scheme; exact terms, percentage split and unit price are confirmed per project on enquiry.
            </div>
            <div className="mono" style={{ opacity: 0.85, fontSize: 11, letterSpacing: "0.12em" }}>
              DLD DEV. NO. 1009*
            </div>
          </div>
        </div>
      </section>

      {/* PROJECTS GRID */}
      <section id="projects" className="section-pad" data-screen-label="03 Projects">
        <div className="shell">
          <div className="section-head">
            <div>
              <div className="eyebrow eyebrow-red">◆ 03 / Live launches</div>
              <h2 className="section-h2">
                Thirteen residences,<br /><em>one developer.</em>
              </h2>
            </div>
            <div>
              <p className="section-intro" style={{ marginBottom: 20 }}>
                Across Business Bay, JLT, Maritime City, Sports City and emerging communities — each on the 1% monthly plan, each with RERA/DLD-confirmable status.
              </p>
              <div className="chips">
                {COMMUNITIES.map((c) => (
                  <button
                    key={c}
                    className={"chip" + (filter === c ? " active-red" : "")}
                    onClick={() => setFilter(c)}
                  >{c}</button>
                ))}
              </div>
            </div>
          </div>

          <div className="projects-grid">
            {filteredProjects.map((p, i) => {
              // First two cards in featured rows are larger
              const isFeat = i % 7 === 0;
              return (
                <div
                  key={p.slug}
                  className={"project-card" + (isFeat ? " feat" : "")}
                  style={{
                    gridColumn: isFeat ? "span 8" : "span 4",
                  }}
                  onClick={() => onOpenProject(p)}
                >
                  <div className="project-img-wrap">
                    <img src={p.hero} alt={p.name} className="project-img" />
                    {p.partner && (
                      <div className="project-partner-badge">◆ {p.partner}*</div>
                    )}
                  </div>
                  <div className="project-info">
                    <div>
                      <div className="project-name">
                        {p.name.slice(0, -1)}<em>{p.name.slice(-1)}</em>
                      </div>
                      <div className="project-community">{p.community}</div>
                    </div>
                    <div className={"project-status " + (p.status === "launching" ? "status-launching" : p.status === "selling" ? "status-selling" : "status-handed")}>
                      {p.status === "launching" ? "Launching" : p.status === "selling" ? "Selling" : "Handed*"}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

          {filteredProjects.length === 0 && (
            <div style={{ textAlign: "center", padding: 80, color: "var(--muted)" }}>
              No launches in {filter} this quarter. <button className="btn-link" onClick={() => setFilter("All")}>See all projects</button>
            </div>
          )}

          <div style={{ marginTop: 56, textAlign: "center" }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--muted)" }}>
              *RERA / DLD-confirmable per project · 34+ launches in the wider portfolio · list non-exhaustive
            </div>
          </div>
        </div>
      </section>

      {/* CINEMATIC BREAK — verified partners */}
      <section className="bg-dark section-pad-sm" data-screen-label="04 Partners">
        <div className="shell">
          <div className="section-head" style={{ marginBottom: 40 }}>
            <div>
              <div className="eyebrow" style={{ color: "rgba(255,255,255,0.6)" }}>◆ 04 / Verified collaborations</div>
              <h2 className="section-h2" style={{ color: "#fff" }}>
                Branded <em>residences,</em><br />verified partners.
              </h2>
            </div>
            <p className="section-intro" style={{ color: "rgba(255,255,255,0.7)" }}>
              Two confirmed branded-residence partnerships. Logo marks shown only with confirmed usage rights.
            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }} className="partners-grid">
            {[
              { project: "Viewz", community: "JLT", partner: "Aston Martin Interiors", verified: true, img: "media/project-viewz-skyvilla-living.webp" },
              { project: "Fashionz", community: "JVT", partner: "FashionTV", verified: true, img: "media/project-fashionz-rooftop-lounge.webp" },
            ].map((c) => (
              <div key={c.project} style={{ position: "relative", aspectRatio: "16/10", overflow: "hidden", cursor: "pointer" }}
                onClick={() => onOpenProject(PROJECTS.find((p) => p.name === c.project))}>
                <img src={c.img} alt={c.project} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85))" }}></div>
                <div style={{ position: "absolute", bottom: 32, left: 32, right: 32, color: "#fff" }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.7)", marginBottom: 8 }}>
                    ◆ Verified partnership
                  </div>
                  <div className="display" style={{ fontSize: 48, lineHeight: 1, marginBottom: 6, color: "#fff" }}>
                    {c.project.slice(0, -1)}<em>{c.project.slice(-1)}</em>
                  </div>
                  <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 20, color: "#C9A24B" }}>
                    × {c.partner}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* LEGACY / ABOUT */}
      <section id="about" className="section-pad" data-screen-label="05 About">
        <div className="shell">
          <div className="legacy">
            <div className="legacy-text">
              <div className="eyebrow eyebrow-red">◆ 05 / Legacy</div>
              <p className="legacy-pull">
                <em>Two stories,</em><br />
                one family —<br />
                kept distinct.
              </p>
              <div className="legacy-body">
                <p>
                  <strong style={{ color: "var(--text)" }}>Danube Group</strong> was founded in 1993 by <strong style={{ color: "var(--text)" }}>Rizwan Sajan</strong> as a building-materials trading business — a story of supply, logistics and the city's growth.
                </p>
                <p>
                  <strong style={{ color: "var(--text)" }}>Danube Properties</strong>, the Group's real-estate arm, was registered in <strong>June 2014</strong> and has since pioneered the 1% monthly payment plan that reshaped Dubai off-plan buying. Managing Director: <strong style={{ color: "var(--text)" }}>Adel Sajan</strong>.
                </p>
                <p style={{ fontSize: 13, color: "var(--muted)", marginTop: 16 }}>
                  The two businesses share a founder and a name. We keep them, and their numbers, distinct.
                </p>
              </div>

              <div className="legacy-timeline">
                <div className="legacy-year">
                  <div className="year">1993</div>
                  <div className="label">Group founded</div>
                  <div className="body">Danube Group begins as a building-materials trading business.</div>
                </div>
                <div className="legacy-year">
                  <div className="year">2014</div>
                  <div className="label">Properties launched</div>
                  <div className="body">Danube Properties registered as a Dubai developer (June 2014).</div>
                </div>
                <div className="legacy-year">
                  <div className="year">1%</div>
                  <div className="label">The plan</div>
                  <div className="body">The original 1% monthly · 0% interest · up to 80 months scheme.</div>
                </div>
                <div className="legacy-year">
                  <div className="year">34+</div>
                  <div className="label">Launches</div>
                  <div className="body">Cumulative launches across the developer's portfolio*.</div>
                </div>
              </div>
            </div>

            <div>
              <div className="legacy-img">
                <img src="media/project-bayz-101-sky-view.webp" alt="Dubai skyline residence" />
                <div className="legacy-img-caption">◆ Bayz 101 — Business Bay</div>
              </div>
              <div style={{ marginTop: 16, fontSize: 12, color: "var(--muted)", fontFamily: "var(--font-mono)", letterSpacing: "0.08em" }}>
                *Awards / scale figures attributed and confirmed at enquiry. No invented numbers.
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PROOF OF PATTERN BAND */}
      <section className="section-pad-sm" style={{ background: "var(--bg)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
        <div className="shell">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }} className="metric-grid">
            {[
              { v: "2014", l: "Developer registered (Properties)" },
              { v: "1%", l: "Monthly plan — pioneered" },
              { v: "80mo", l: "Up to · 0% interest*" },
              { v: "4hr", l: "Sales-consultant response*" },
            ].map((m, i) => (
              <div key={i} style={{ borderRight: i < 3 ? "1px solid var(--border)" : "none", padding: "24px 32px" }}>
                <div className="display" style={{ fontSize: 56, color: "var(--primary)", lineHeight: 1 }}>
                  {m.v}
                </div>
                <div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", marginTop: 8 }}>
                  {m.l}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CONTACT / FINAL LEAD */}
      <section id="contact" className="lead-block" data-screen-label="06 Contact">
        <div className="shell">
          <div className="lead-grid">
            <div>
              <div className="eyebrow" style={{ color: "rgba(255,255,255,0.6)" }}>◆ 06 / Talk to us</div>
              <h2 className="lead-h2">
                Find <em>your home</em><br />in Dubai.
              </h2>
              <p style={{ color: "rgba(255,255,255,0.7)", fontSize: 17, lineHeight: 1.55, maxWidth: "46ch", marginBottom: 40 }}>
                One enquiry. A senior consultant matches you to a Danube launch — on the 1% plan, direct from the developer, in your language.
              </p>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
                <div>
                  <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 8 }}>◆ Toll-free</div>
                  <div className="display" style={{ fontSize: 32, color: "#fff" }}>+971 800 5757</div>
                  <div style={{ fontSize: 12, color: "rgba(255,255,255,0.5)", marginTop: 4 }}>UAE · WhatsApp · 24/7</div>
                </div>
                <div>
                  <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 8 }}>◆ Email</div>
                  <div className="display" style={{ fontSize: 22, color: "#fff" }}>enquiry@<br />danubeproperties.ae</div>
                </div>
                <div>
                  <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 8 }}>◆ HQ</div>
                  <div style={{ color: "#fff", fontSize: 15, lineHeight: 1.5 }}>
                    Opp. Times Square Mall<br />Al Manara St, Sheikh Zayed Rd<br />P.O. Box 113806, Dubai
                  </div>
                </div>
                <div>
                  <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 8 }}>◆ Offices</div>
                  <div style={{ color: "rgba(255,255,255,0.85)", fontSize: 13, lineHeight: 1.7 }}>
                    Abu Dhabi · Muscat · Riyadh<br />
                    Bahrain · Foshan · London<br />
                    Mumbai · Delhi · Bengaluru
                  </div>
                </div>
              </div>

              <div style={{ marginTop: 40, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.15)", fontSize: 12, color: "rgba(255,255,255,0.5)" }}>
                ◆ Exact suite, landline and hours confirmed on enquiry — we don't publish what we can't verify.
              </div>
            </div>

            <div>
              <window.DanubeComponents.LeadForm />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ─── Footer ─────────────────────────── */
function Footer({ onNav }) {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="display">
              Danube<br /><em>Properties</em>
            </div>
            <p className="footer-tagline">
              Affordable-luxury Dubai residences. The original 1% monthly payment plan, direct from the developer.
            </p>
          </div>
          <div>
            <h4>◆ Projects</h4>
            <ul>
              {window.DANUBE_DATA.PROJECTS.slice(0, 6).map((p) => (
                <li key={p.slug}><a onClick={() => onNav("project", p.slug)}>{p.name}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h4>◆ Company</h4>
            <ul>
              <li><a onClick={() => onNav("home", "about")}>Legacy</a></li>
              <li><a>Newsroom</a></li>
              <li><a>Brokers</a></li>
              <li><a>Careers</a></li>
            </ul>
          </div>
          <div>
            <h4>◆ Contact</h4>
            <ul>
              <li><a href="tel:+97180005757">+971 800 5757</a></li>
              <li><a href="mailto:enquiry@danubeproperties.ae">enquiry@…</a></li>
              <li><a href="https://api.whatsapp.com/send?phone=9718005757" target="_blank" rel="noreferrer">WhatsApp</a></li>
              <li><a>Sales gallery</a></li>
            </ul>
          </div>
          <div>
            <h4>◆ Languages</h4>
            <ul>
              <li><a>English</a></li>
              <li><a>العربية</a></li>
              <li><a>Русский</a></li>
              <li><a>中文</a></li>
              <li><a>हिन्दी</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Danube Properties · DLD Dev. No. 1009*</span>
          <span>RERA / Trakheesi-confirmable per project · Prices on enquiry</span>
        </div>
      </div>
    </footer>
  );
}

/* ─── Tweaks Panel ─────────────────────────── */
function TweaksPanel({ tweaks, setTweaks, open, onClose }) {
  if (!open) return null;
  const reds = [
    { val: "#ED1C24", label: "Danube" },
    { val: "#C81E2E", label: "Deep" },
    { val: "#E63946", label: "Coral" },
    { val: "#A4161A", label: "Crimson" },
  ];
  return (
    <div className="tweaks">
      <button className="tweaks-close" onClick={onClose}>×</button>
      <h5>◆ Tweaks</h5>

      <div style={{ marginBottom: 14 }}>
        <label style={{ display: "block", marginBottom: 8 }}>Brand red</label>
        <div className="swatches">
          {reds.map((r) => (
            <div
              key={r.val}
              className={"swatch" + (tweaks.brandRed === r.val ? " active" : "")}
              style={{ background: r.val }}
              onClick={() => setTweaks({ ...tweaks, brandRed: r.val })}
              title={r.label}
            />
          ))}
        </div>
      </div>

      <div className="row">
        <label>Hero autoplay</label>
        <button
          className={"toggle" + (tweaks.heroAutoplay ? " active" : "")}
          onClick={() => setTweaks({ ...tweaks, heroAutoplay: !tweaks.heroAutoplay })}
        >{tweaks.heroAutoplay ? "On" : "Off"}</button>
      </div>

      <div className="row">
        <label>Display type</label>
        <div style={{ display: "flex", gap: 4 }}>
          {["Cormorant", "Instrument", "Canela"].map((f) => (
            <button
              key={f}
              className={"toggle" + (tweaks.displayFont === f ? " active" : "")}
              onClick={() => setTweaks({ ...tweaks, displayFont: f })}
              style={{ padding: "4px 8px" }}
            >{f.slice(0, 4)}</button>
          ))}
        </div>
      </div>

      <div className="row">
        <label>Plan band</label>
        <button
          className={"toggle" + (tweaks.planBandStyle === "red" ? " active" : "")}
          onClick={() => setTweaks({ ...tweaks, planBandStyle: tweaks.planBandStyle === "red" ? "dark" : "red" })}
        >{tweaks.planBandStyle === "red" ? "Red" : "Dark"}</button>
      </div>

      <div className="row">
        <label>Density</label>
        <div style={{ display: "flex", gap: 4 }}>
          {["Roomy", "Tight"].map((d) => (
            <button
              key={d}
              className={"toggle" + (tweaks.density === d ? " active" : "")}
              onClick={() => setTweaks({ ...tweaks, density: d })}
              style={{ padding: "4px 8px" }}
            >{d}</button>
          ))}
        </div>
      </div>

      <div style={{ fontSize: 10, color: "rgba(255,255,255,0.4)", marginTop: 12, fontFamily: "var(--font-mono)", letterSpacing: "0.08em" }}>
        ◆ PROTOTYPE · DANUBE PROPERTIES
      </div>
    </div>
  );
}

/* ─── ROOT APP ─────────────────────────── */
function App() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "brandRed": "#ED1C24",
    "heroAutoplay": true,
    "displayFont": "Cormorant",
    "planBandStyle": "red",
    "density": "Roomy"
  }/*EDITMODE-END*/;

  const [tweaks, setTweaks] = useStateA(TWEAK_DEFAULTS);
  const [tweaksOpen, setTweaksOpen] = useStateA(false);
  const [view, setView] = useStateA("home"); // home | project
  const [currentProject, setCurrentProject] = useStateA(null);
  const [leadOpen, setLeadOpen] = useStateA(false);
  const [leadDefaults, setLeadDefaults] = useStateA({ tab: "interest", project: "Any launch" });
  const [lang, setLang] = useStateA("EN");

  // Apply tweaks → CSS vars
  useEffectA(() => {
    document.documentElement.style.setProperty("--primary", tweaks.brandRed);
    // tweak font
    const fontMap = {
      "Cormorant": '"Cormorant Garamond", "Cormorant", serif',
      "Instrument": '"Instrument Serif", "Cormorant Garamond", serif',
      "Canela": '"Canela", "Cormorant Garamond", serif',
    };
    document.documentElement.style.setProperty("--font-display", fontMap[tweaks.displayFont] || fontMap.Cormorant);
  }, [tweaks.brandRed, tweaks.displayFont]);

  // Edit-mode protocol
  useEffectA(() => {
    const handle = (e) => {
      if (e.data?.type === "__activate_edit_mode") setTweaksOpen(true);
      if (e.data?.type === "__deactivate_edit_mode") setTweaksOpen(false);
    };
    window.addEventListener("message", handle);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handle);
  }, []);

  const persistTweak = (next) => {
    setTweaks(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: next }, "*");
  };

  const openProject = (p) => {
    setCurrentProject(p);
    setView("project");
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  const goHome = (target) => {
    setView("home");
    if (target) {
      setTimeout(() => {
        const el = document.getElementById(target);
        if (el) el.scrollIntoView({ behavior: "smooth" });
      }, 80);
    } else {
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
  };

  const onNav = (v, target) => {
    if (v === "home") goHome(target);
    else if (v === "project") {
      const p = window.DANUBE_DATA.PROJECTS.find((x) => x.slug === target);
      if (p) openProject(p);
    }
  };

  const openLead = (tab = "interest", project = "Any launch") => {
    setLeadDefaults({ tab, project });
    setLeadOpen(true);
  };

  const { Navbar, WhatsAppFAB, Modal, LeadForm } = window.DanubeComponents;
  const ProjectMicrosite = window.DanubeMicrosite;

  return (
    <div className={lang === "AR" ? "rtl" : ""}>
      <Navbar
        onNav={onNav}
        onCta={() => openLead("interest")}
        currentView={view}
        lang={lang}
        setLang={setLang}
      />

      {view === "home" && (
        <HomeView
          onOpenProject={openProject}
          onOpenLead={openLead}
          lang={lang}
          tweaks={tweaks}
        />
      )}

      {view === "project" && currentProject && (
        <ProjectMicrosite
          project={currentProject}
          onBack={goHome}
          onOpenLead={openLead}
          lang={lang}
        />
      )}

      <Footer onNav={onNav} />

      <WhatsAppFAB />

      <TweaksPanel
        tweaks={tweaks}
        setTweaks={persistTweak}
        open={tweaksOpen}
        onClose={() => {
          setTweaksOpen(false);
          window.parent.postMessage({ type: "__edit_mode_dismissed" }, "*");
        }}
      />

      {leadOpen && (
        <Modal onClose={() => setLeadOpen(false)}>
          <LeadForm defaultProject={leadDefaults.project} defaultTab={leadDefaults.tab} />
        </Modal>
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);