// sections.jsx — chapter sections for Marsa Cove off-plan microsite.
// Loaded after data.js and components.jsx.

const { useState, useMemo, useEffect, useRef } = React;

// helper: render mixed string/{ it: "italic" } token arrays
window.renderTokens = function renderTokens(toks) {
  if (typeof toks === "string") return toks;
  if (!Array.isArray(toks)) return null;
  return toks.map((t, i) => {
    if (typeof t === "string") return <React.Fragment key={i}>{t}</React.Fragment>;
    if (t && typeof t === "object" && t.it) return <em className="it" key={i}>{t.it}</em>;
    return null;
  });
};

// ─── Overview (pillars) ─────────────────────────────────────────────
window.Overview = function Overview({ L }) {
  return (
    <section id="project" className="shell">
      <div className="overview-grid">
        <div className="lede-block fade-up">
          <div className="chapter-num num"><span className="bar"></span>{L.pillars.eyebrow}</div>
          <h2>{renderTokens(L.pillars.title)}</h2>
          <p className="lede muted" style={{ marginTop: "1rem" }}>
            An honest off-plan template — built for the way D&B's investor team actually
            briefs clients on a new Dubai launch. No fabricated prices, specs sourced
            only when the developer confirms them.
          </p>
        </div>
        <div className="pillars">
          {window.PILLARS.map((p, i) => (
            <div className="pillar fade-up" key={i} style={{ transitionDelay: `${i * 80}ms` }}>
              <div className="num">{p.num}</div>
              <div>
                <h4>{renderTokens(p.title)}</h4>
                <p>{p.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── Bridge (dark editorial quote) ─────────────────────────────────
window.Bridge = function Bridge({ L }) {
  return (
    <section className="bridge fade-up">
      <div className="shell">
        <div className="chapter-num num on-dark" style={{ color: "rgba(251,250,246,0.55)" }}>
          <span className="bar"></span>{L.bridge.eyebrow}
        </div>
        <div style={{ marginTop: "1.5rem", display: "grid", gridTemplateColumns: "1fr", gap: "0" }}>
          <p className="quote">{renderTokens(L.bridge.quote)}</p>
        </div>
        <div className="meta">
          <dl><dt>Status</dt><dd>{window.PROJECT.status}</dd></dl>
          <dl><dt>Location</dt><dd>{window.PROJECT.area}</dd></dl>
          <dl><dt>Completion</dt><dd>{window.PROJECT.completion}</dd></dl>
          <dl><dt>Payment plan</dt><dd>{window.PROJECT.paymentPlan}</dd></dl>
          <dl><dt>Handled by</dt><dd>D&B Properties</dd></dl>
        </div>
      </div>
    </section>
  );
};

// ─── Design / Architecture ─────────────────────────────────────────
window.Design = function Design({ L }) {
  return (
    <section className="shell fade-up">
      <div className="design-grid">
        <div
          className="img"
          style={{ backgroundImage: "url(media/area-dubai-marina.webp)" }}
          role="img"
          aria-label="Indicative waterfront residential render"
        />
        <div className="copy">
          <div className="chapter-num num" style={{ marginBottom: "1rem" }}>
            <span className="bar"></span>{L.design.eyebrow}
          </div>
          <h3>{renderTokens(L.design.title)}</h3>
          <p className="first">{L.design.p1}</p>
          <p>{L.design.p2}</p>
          <div className="design-stats">
            <div className="s"><div className="l">Floors</div><div className="v">G + 24</div></div>
            <div className="s"><div className="l">Frontage</div><div className="v">180 m</div></div>
            <div className="s"><div className="l">Aspect</div><div className="v">Sea-facing</div></div>
            <div className="s"><div className="l">Material</div><div className="v">Travertine · Bronze</div></div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── Residences ────────────────────────────────────────────────────
window.Residences = function Residences({ L }) {
  const [active, setActive] = useState(window.RESIDENCES[1].ref);
  return (
    <section id="residences" className="shell" style={{ background: "var(--paper)" }}>
      <div className="section-head fade-up">
        <div>
          <div className="chapter-num num" style={{ marginBottom: "1.25rem" }}>
            <span className="bar"></span>{L.residences.eyebrow}
          </div>
          <h2 className="section-title">{renderTokens(L.residences.title)}</h2>
        </div>
        <p className="lede muted">{L.residences.note}</p>
      </div>
      <div className="res-grid">
        {window.RESIDENCES.map((r, i) => (
          <article
            key={r.ref}
            className={`res-card fade-up ${active === r.ref ? "is-active" : ""}`}
            style={{ transitionDelay: `${i * 60}ms` }}
            onClick={() => setActive(r.ref)}
          >
            <div className="res-card__media">
              {r.img ? (
                <div className="ph" style={{ backgroundImage: `url(${r.img})` }} />
              ) : (
                <div className="ph placeholder">{r.placeholder || "Render pending"}</div>
              )}
              <span className="chip">{r.chip}</span>
            </div>
            <div className="res-card__body">
              <h3 className="res-card__title">{renderTokens(r.title)}</h3>
              <div className="res-card__specs">
                <div className="s"><div className="l">Beds</div><div className="v">{r.beds}</div></div>
                <div className="s"><div className="l">Baths</div><div className="v">{r.bath}</div></div>
                <div className="s"><div className="l">{r.sizeUnit}</div><div className="v">{r.size}</div></div>
              </div>
              <div className="res-card__price">
                <span className="poa">Price on Application</span>
                <span className="ask">{r.aspect}</span>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
};

// ─── Amenities ─────────────────────────────────────────────────────
window.Amenities = function Amenities({ L }) {
  return (
    <section id="amenities" className="shell">
      <div className="section-head fade-up">
        <div>
          <div className="chapter-num num" style={{ marginBottom: "1.25rem" }}>
            <span className="bar"></span>{L.amenities.eyebrow}
          </div>
          <h2 className="section-title">{renderTokens(L.amenities.title)}</h2>
        </div>
        <p className="lede muted">{L.amenities.note}</p>
      </div>
      <div className="amen-grid">
        {window.AMENITIES.map((a, i) => (
          <div
            key={i}
            className={`amen ${a.size} fade-up`}
            style={{
              transitionDelay: `${i * 40}ms`,
              ...(a.bg ? { backgroundImage: `url(${a.bg})` } : {}),
            }}
          >
            <div className="num">{a.num}</div>
            <div>
              <div className="name">{renderTokens(a.name)}</div>
              <div className="desc">{a.desc}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

// ─── Location (list + schematic map) ──────────────────────────────
window.Location = function Location({ L }) {
  // Schematic positions (% relative to map shell)
  const pins = [
    { x: 24, y: 64, label: "Sheikh Zayed Rd" },
    { x: 60, y: 38, label: "Palm Jumeirah" },
    { x: 76, y: 48, label: "Dubai Marina" },
    { x: 14, y: 30, label: "DWC Airport" },
    { x: 84, y: 16, label: "Downtown" },
    { x: 92, y: 64, label: "DXB" },
    { x: 32, y: 22, label: "Expo City" },
  ];
  return (
    <section id="location" className="shell">
      <div className="section-head fade-up">
        <div>
          <div className="chapter-num num" style={{ marginBottom: "1.25rem" }}>
            <span className="bar"></span>{L.location.eyebrow}
          </div>
          <h2 className="section-title">{renderTokens(L.location.title)}</h2>
        </div>
        <p className="lede muted">{L.location.note}</p>
      </div>
      <div className="loc-grid">
        <div className="map-shell fade-up">
          <div className="legend">Marsa Cove · Schematic</div>
          <div className="compass">N ↑</div>
          {/* coastline suggestion */}
          <svg viewBox="0 0 400 300" preserveAspectRatio="none" aria-hidden="true">
            <defs>
              <linearGradient id="seaG" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="rgba(184,147,92,0.06)" />
                <stop offset="100%" stopColor="rgba(184,147,92,0.0)" />
              </linearGradient>
            </defs>
            <path
              d="M0,150 C40,140 80,170 130,160 C180,150 220,180 260,170 C300,160 340,190 400,180"
              fill="none" stroke="rgba(251,250,246,0.18)" strokeWidth="1"
            />
            <path
              d="M0,210 C50,200 90,230 140,220 C190,210 230,240 280,230 C320,222 360,250 400,240 L400,300 L0,300 Z"
              fill="url(#seaG)"
            />
            {/* connector lines from project to key pins */}
            {pins.slice(0, 4).map((p, i) => (
              <line
                key={i}
                x1="50%" y1="50%"
                x2={`${p.x}%`} y2={`${p.y}%`}
                stroke="rgba(184,147,92,0.18)"
                strokeWidth="0.6"
                strokeDasharray="3 4"
                vectorEffect="non-scaling-stroke"
              />
            ))}
          </svg>
          <div className="pin you" style={{ left: "50%", top: "50%" }}></div>
          <div className="pin-label" style={{ left: "50%", top: "50%", marginTop: "30px", color: "var(--gold)" }}>
            Marsa Cove
          </div>
          {pins.map((p, i) => (
            <React.Fragment key={i}>
              <div className="pin" style={{ left: `${p.x}%`, top: `${p.y}%` }}></div>
              <div className="pin-label" style={{ left: `${p.x}%`, top: `${p.y}%` }}>{p.label}</div>
            </React.Fragment>
          ))}
        </div>
        <div className="loc-list fade-up">
          {window.LOCATION.map((row) => (
            <div className="loc-row" key={row.num}>
              <div className="num">{row.num}</div>
              <div className="name">
                {row.name}
                <span className="sub">{row.sub}</span>
              </div>
              <div className="dur">{row.dur}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── Gallery ───────────────────────────────────────────────────────
window.Gallery = function Gallery({ L }) {
  const [tab, setTab] = useState("exteriors");
  const tabs = [
    { id: "exteriors", label: "Exteriors" },
    { id: "interiors", label: "Interiors" },
    { id: "location", label: "Context" },
  ];
  const items = window.GALLERY[tab];
  return (
    <section id="gallery" className="shell" style={{ background: "var(--paper)" }}>
      <div className="section-head fade-up">
        <div>
          <div className="chapter-num num" style={{ marginBottom: "1.25rem" }}>
            <span className="bar"></span>{L.gallery.eyebrow}
          </div>
          <h2 className="section-title">{renderTokens(L.gallery.title)}</h2>
        </div>
        <p className="lede muted">{L.gallery.note}</p>
      </div>
      <div className="gal-tabs fade-up">
        {tabs.map((t) => (
          <button
            key={t.id}
            className={tab === t.id ? "is-active" : ""}
            onClick={() => setTab(t.id)}
          >
            {t.label}
            <span className="count">{String(window.GALLERY[t.id].length).padStart(2, "0")}</span>
          </button>
        ))}
      </div>
      <div className="gal-grid fade-up">
        {items.map((tile, i) => (
          <div
            key={i}
            className={`gal-tile ${tile.w === 4 ? "wide" : ""} ${tile.h === 2 ? "tall" : ""}`}
            style={{ gridColumn: tile.w === 4 ? "span 4" : tile.w === 2 ? "span 2" : "span 2" }}
          >
            <img src={tile.src} alt={tile.cap} loading="lazy" />
            <div className="caption">{tile.cap}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

// ─── Trust strip ───────────────────────────────────────────────────
window.Trust = function Trust({ L }) {
  return (
    <section className="shell" style={{ paddingBlock: "calc(var(--pad-y) * 0.6)" }}>
      <div className="section-head fade-up" style={{ marginBottom: "2rem" }}>
        <div>
          <div className="chapter-num num" style={{ marginBottom: "1rem" }}>
            <span className="bar"></span>{L.trust.eyebrow}
          </div>
          <h2 className="section-title" style={{ fontSize: "clamp(2rem, 3.6vw, 3rem)" }}>
            {renderTokens(L.trust.title)}
          </h2>
        </div>
      </div>
      <div className="trust fade-up">
        {window.TRUST.map((t, i) => (
          <div className="trust__cell" key={i}>
            <div className="label">{t.label}</div>
            <div className="val">{renderTokens(t.val)}</div>
            <div className="src">{t.src}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

// ─── Agent card ────────────────────────────────────────────────────
window.AgentCard = function AgentCard({ L }) {
  const a = window.AGENT;
  return (
    <section className="shell">
      <div className="agent fade-up">
        <div
          className="agent__portrait"
          style={{ backgroundImage: `url(${a.img})` }}
          role="img"
          aria-label={`Portrait of ${a.name}`}
        ></div>
        <div>
          <div className="chapter-num num" style={{ color: "rgba(251,250,246,0.55)", marginBottom: "1.25rem" }}>
            <span className="bar"></span>{L.agent.eyebrow}
          </div>
          <h3 className="agent__name">{a.name}</h3>
          <div className="agent__role">{a.role}</div>
          <p className="agent__quote">"{a.quote}"</p>
          <div className="agent__meta">{a.brn} · Multilingual: EN / AR</div>
        </div>
        <div className="agent__cta">
          <a className="btn btn--gold" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("open-register")); }}>
            Register Interest <span className="arr">→</span>
          </a>
          <a className="btn btn--ghost on-dark">
            <span style={{ width: 14, height: 14, background: "var(--gold)", borderRadius: "50%", display: "inline-block" }}></span>
            WhatsApp Thomas
          </a>
        </div>
      </div>
    </section>
  );
};