// Home / landing page
const Home = ({ t, lang, setPage, setSelectedParcel }) => {
  const data = window.DAOOB_DATA;
  return (
    <div>
      {/* Hero */}
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="hero-eyebrow">{t.home.eyebrow}</div>
              <h1 className="t-display hero-h1">
                {t.home.hero_h1_a}<br/>
                <em>{t.home.hero_h1_b}</em>
              </h1>
              <p className="hero-sub">{t.home.hero_sub}</p>
              {t.home.hero_sub_2 && <p className="hero-sub hero-sub-2">{t.home.hero_sub_2}</p>}
              <div className="hero-cta">
                <button className="btn btn-primary btn-lg" onClick={() => setPage("map")}>
                  {t.home.cta_primary} <Icon name="arrow-right" size={16}/>
                </button>
                <button className="btn btn-ghost btn-lg" onClick={() => setPage("report")}>
                  {t.home.cta_secondary}
                </button>
              </div>
            </div>
            <div className="hero-visual">
              <image-slot
                id="hero-riyadh"
                placeholder={lang === "ar" ? "صورة\u200a—\u200aأفق الرياض ليلاً" : "Image — Riyadh skyline at dusk"}
                shape="rounded"
                radius="10"
                style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
              ></image-slot>

              {/* Gradient veil + AI live-analysis card */}
              <div className="hero-veil"/>
              <div className="hero-ai-card">
                <div className="hero-ai-h">
                  <span className="dot pulse"/>
                  <span className="lbl">{lang === "ar" ? "تحليل وكلاء دؤوب \u00b7 مباشر" : "Daoob AI agents \u00b7 live"}</span>
                </div>
                <div className="hero-ai-parcel">
                  <span className="ref">RYD-4421-OL</span>
                  <span className="dist">{lang === "ar" ? "العليا \u00b7 متعدد الاستخدام" : "Olaya \u00b7 Mixed-use"}</span>
                </div>
                <div className="hero-ai-kpis">
                  <div>
                    <div className="k">{lang === "ar" ? "تقييم" : "Score"}</div>
                    <div className="v">78<span className="u">/100</span></div>
                  </div>
                  <div>
                    <div className="k">{lang === "ar" ? "العائد" : "IRR"}</div>
                    <div className="v">14.8<span className="u">%</span></div>
                  </div>
                  <div>
                    <div className="k">{lang === "ar" ? "القيمة" : "Value"}</div>
                    <div className="v">638<span className="u">M</span></div>
                  </div>
                </div>
                <div className="hero-ai-line">
                  <span className="agent">{lang === "ar" ? "وكيل التقييم" : "Valuation Agent"}</span>
                  <span className="check"><Icon name="check" size={10} stroke={2.5}/></span>
                </div>
                <div className="hero-ai-line">
                  <span className="agent">{lang === "ar" ? "وكيل السوق" : "Market Agent"}</span>
                  <span className="check"><Icon name="check" size={10} stroke={2.5}/></span>
                </div>
                <div className="hero-ai-line">
                  <span className="agent">{lang === "ar" ? "وكيل معامل البناء" : "Building Coefficient Agent"}</span>
                  <span className="check working"><span className="spin"/></span>
                </div>
              </div>

              {/* Floating data chip */}
              <div className="hero-chip">
                <span className="hero-chip-k">{lang === "ar" ? "موصى به" : "Recommended"}</span>
                <span className="hero-chip-v">{lang === "ar" ? "متعدد \u00b7 فئة A" : "Class-A mixed-use"}</span>
              </div>
            </div>
          </div>

          <div className="hero-stats">
            {[1,2,3,4].map(n => (
              <div className="hero-stat" key={n}>
                <div className="val t-num">{t.home[`hero_stat_${n}_value`]}</div>
                <span className="lbl">{t.home[`hero_stat_${n}_label`]}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Intro / About — moved to bottom per request */}

      {/* How it works */}
      <section className="section" style={{ paddingTop: 48 }}>
        <div className="container">
          <div className="section-eyebrow">{t.home.how_eyebrow}</div>
          <h2 className="t-h1 section-h2">{t.home.how_h2}</h2>
          <div className="how-grid">
            {[1,2,3,4].map(n => (
              <div className="how-step" key={n}>
                <div className="n t-num">0{n}</div>
                <div className="t">{t.home[`step_${n}_t`]}</div>
                <div className="d">{t.home[`step_${n}_d`]}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Trust band */}

      {/* Services */}
      <section className="section">
        <div className="container">
          <div className="section-eyebrow">{t.home.services_eyebrow}</div>
          <h2 className="t-h1 section-h2">{t.home.services_h2}</h2>
          <p style={{ color: "var(--ink-500)", maxWidth: 640, marginTop: 16 }}>{t.home.services_sub}</p>
          <div className="services-grid">
            {t.services.list.map((s, i) => (
              <div className="service-cell" key={i}>
                <div className="num">SVC.{String(i+1).padStart(2,"0")}</div>
                <div className="t">{s.t}</div>
                <div className="d">{s.d}</div>
                <PriceCompare s={s} t={t}/>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Audience */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="section-eyebrow">{t.home.audience_eyebrow}</div>
          <h2 className="t-h1 section-h2">{t.home.audience_h2}</h2>
          <p style={{ color: "var(--ink-500)", maxWidth: 760, marginTop: 16, fontSize: 17, lineHeight: 1.6 }}>{t.home.audience_intro}</p>
          <div className="audience-grid">
            {[1,2,3].map(n => (
              <div className="audience-card" key={n}>
                <div className="num t-num">0{n}</div>
                <div className="t">{t.home[`aud_${n}_t`]}</div>
                <div className="d">{t.home[`aud_${n}_d`]}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA band */}
      <section className="cta-band">
        <div className="container">
          <div>
            <h2 className="t-h1" style={{ color: "var(--paper)" }}>{t.home.cta_band_h2}</h2>
            <p>{t.home.cta_band_sub}</p>
          </div>
          <button className="btn btn-gold btn-lg" onClick={() => setPage("map")}>
            {t.home.cta_band_btn} <Icon name="arrow-right" size={16}/>
          </button>
        </div>
      </section>

      {/* Intro / About — last section per request */}
      <section className="section intro-section">
        <div className="container">
          <div className="intro-grid">
            <div>
              <div className="section-eyebrow">{t.home.intro_eyebrow}</div>
              <h2 className="t-h1 section-h2" style={{ marginTop: 20 }}>{t.home.intro_h2}</h2>
              <p className="intro-lead">{t.home.intro_lead}</p>
            </div>
            <div className="intro-services-col">
              <p className="intro-bridge">{t.home.intro_bridge}</p>
              <ol className="intro-list">
                {t.home.intro_services.map((s, i) => (
                  <li key={i}>
                    <span className="num t-mono">{String(i + 1).padStart(2, "0")}</span>
                    <span className="lbl">{s}</span>
                  </li>
                ))}
              </ol>
              <p className="intro-outro">{t.home.intro_outro}</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

// Smaller, animated map preview for hero
const HeroMapPreview = ({ lang, t, onPick }) => {
  const data = window.DAOOB_DATA;
  // Reuse a tightly cropped slice of the map
  return (
    <div style={{ position: "absolute", inset: 0 }}>
      <RiyadhMap
        parcels={data.parcels}
        zoning={data.zoningTypes}
        districts={data.districts}
        selectedId="RYD-4421-OL"
        onSelect={onPick}
        basemap="street"
        showLabels={true}
        lang={lang}
      />
      {/* Overlay caption */}
      <div style={{
        position: "absolute", bottom: 16, insetInlineStart: 16,
        background: "rgba(6,53,34,0.85)", backdropFilter: "blur(8px)",
        color: "var(--paper)", padding: "10px 14px",
        borderRadius: 6, fontSize: 12,
        border: "1px solid rgba(232,214,168,0.25)",
      }}>
        <div style={{ color: "var(--gold-400)", fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em" }}>RYD-4421-OL · OLAYA</div>
        <div style={{ marginTop: 4, fontSize: 13 }}>{lang === "ar" ? "تم اختيار القطعة — انقر للمتابعة" : "Parcel selected — click to continue"}</div>
      </div>
    </div>
  );
};

Object.assign(window, { Home });