// PonteREI — property detail (rich, with all sections; conditional based on data presence)

function Lightbox({ images, startIdx, onClose }) {
  const [i, setI] = useState(startIdx);
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      else if (e.key === "ArrowRight") setI((c) => (c + 1) % images.length);
      else if (e.key === "ArrowLeft") setI((c) => (c - 1 + images.length) % images.length);
    };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [images.length, onClose]);
  return (
    <div className="lightbox" onClick={onClose}>
      <img className="lightbox-img" src={images[i]} alt="" onClick={(e) => e.stopPropagation()} />
      <button className="lightbox-close" onClick={onClose}><Icon.Close /></button>
      <button className="lightbox-arrow left" onClick={(e) => { e.stopPropagation(); setI((c) => (c - 1 + images.length) % images.length); }}><Icon.ChevronLeft /></button>
      <button className="lightbox-arrow right" onClick={(e) => { e.stopPropagation(); setI((c) => (c + 1) % images.length); }}><Icon.ChevronRight /></button>
      <div className="lightbox-counter">{i + 1} / {images.length}</div>
    </div>
  );
}

function Gallery({ images }) {
  const [open, setOpen] = useState(null);
  const { locale } = useLocale();
  return (
    <>
      <div className="gallery">
        <div className="gallery-img main" style={{ backgroundImage: `url(${images[0]})` }} onClick={() => setOpen(0)} />
        {images.slice(1, 5).map((src, i) => (
          <div key={i} className="gallery-img" style={{ backgroundImage: `url(${src})` }} onClick={() => setOpen(i + 1)} />
        ))}
        <button className="gallery-show-all" onClick={() => setOpen(0)}>
          <Icon.Camera /> {t("common.showAll", locale)} ({images.length})
        </button>
      </div>
      {open !== null && <Lightbox images={images} startIdx={open} onClose={() => setOpen(null)} />}
    </>
  );
}

function QuickFacts({ p }) {
  const { locale } = useLocale();
  const s = p.specs;
  const f = p.financials;
  return (
    <div className="quick-facts">
      <div className="quick-facts-stats">
        <div className="qf-stat"><strong>{formatBRL(f.shareUnitPrice)}</strong><span>{t("card.fromShare", locale).replace("A partir de", t("card.fromShare", locale))} / {t("card.badgeShares", locale)}</span></div>
        <div className="qf-stat"><strong>{formatBRL(f.totalPrice, { compact: true })}</strong><span>{t("card.wholePrice", locale)}</span></div>
        <div className="qf-stat" style={{ color: "var(--success)" }}><strong style={{ color: "var(--success)" }}>{formatPctLocalized(f.projectedAnnualYield, locale)}</strong><span>{t("card.yield", locale)}</span></div>
        <div className="qf-stat"><strong>{s.bedrooms}<span style={{ fontSize: 12, fontFamily: "var(--font-body)", marginLeft: 4 }}>·</span> {s.bathrooms}<span style={{ fontSize: 12, fontFamily: "var(--font-body)", marginLeft: 4 }}>· {s.areaSqm} m²</span></strong><span>{t("detail.bedrooms", locale)} · {t("detail.bathrooms", locale)} · {locale === "pt" ? "área" : "area"}</span></div>
      </div>
    </div>
  );
}

function InvestPanel({ p, onInterest }) {
  const { locale } = useLocale();
  const f = p.financials;
  const [tab, setTab] = useState(p.primaryModality === "inteiro" ? "whole" : "shares");
  const [shares, setShares] = useState(10);

  const total = shares * f.shareUnitPrice;
  const ownership = (shares / f.totalShares) * 100;
  const monthlyEst = (f.netMonthlyIncome * (shares / f.totalShares));
  const annualEst = monthlyEst * 12;

  const supportsBoth = p.modality.length === 2;

  return (
    <aside className="invest-panel">
      <div className="invest-panel-header">
        <h3>{t("detail.investPanelTitle", locale)}</h3>
        <p>{t("detail.investPanelSub", locale)}</p>
      </div>

      {supportsBoth && (
        <div className="invest-tabs">
          <button className={`invest-tab ${tab === "shares" ? "active" : ""}`} onClick={() => setTab("shares")}>{t("detail.tabShares", locale)}</button>
          <button className={`invest-tab ${tab === "whole" ? "active" : ""}`} onClick={() => setTab("whole")}>{t("detail.tabWhole", locale)}</button>
        </div>
      )}

      {tab === "shares" ? (
        <>
          <div className="slider-wrap">
            <div className="slider-label">
              <span>{t("detail.sharesQty", locale)}</span>
              <span className="serif">{shares}</span>
            </div>
            <input type="range" min="1" max="500" value={shares} onChange={(e) => setShares(+e.target.value)} className="slider-input" />
            <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>1 — 500 {t("card.badgeShares", locale).toLowerCase()}</div>
          </div>
          <div className="calc-row"><span className="calc-label">{t("detail.sharePrice", locale)}</span><span className="calc-value">{formatBRL(f.shareUnitPrice)}</span></div>
          <div className="calc-row"><span className="calc-label">{t("detail.totalInvest", locale)}</span><span className="calc-value">{formatBRL(total)}</span></div>
          <div className="calc-row"><span className="calc-label">{t("detail.ownership", locale)}</span><span className="calc-value">{ownership.toFixed(2).replace(".", ",")}%</span></div>
          <div className="calc-row"><span className="calc-label">{t("detail.monthlyEst", locale)}</span><span className="calc-value accent">{formatBRL(monthlyEst, { maxDecimals: 0 })}</span></div>
          <div className="calc-row"><span className="calc-label">{t("detail.annualEst", locale)}</span><span className="calc-value accent">{formatBRL(annualEst, { maxDecimals: 0 })}</span></div>
          <button className="btn btn-primary btn-lg mt-16" style={{ width: "100%" }} onClick={onInterest}>
            {t("detail.interestCta", locale)} <Icon.ArrowRight />
          </button>
        </>
      ) : (
        <>
          <div className="calc-row"><span className="calc-label">{t("detail.wholePriceLabel", locale)}</span><span className="calc-value">{formatBRL(f.totalPrice, { compact: true })}</span></div>
          <div className="calc-row"><span className="calc-label">{t("detail.monthlyEst", locale)}</span><span className="calc-value">{formatBRL(f.projectedMonthlyRent, { maxDecimals: 0 })}</span></div>
          <div className="calc-row"><span className="calc-label">{t("detail.capRate", locale)}</span><span className="calc-value accent">{formatPctLocalized(f.projectedAnnualYield, locale)}</span></div>
          <div className="calc-row"><span className="calc-label">{t("detail.appreciation", locale)}</span><span className="calc-value">{formatPctLocalized(f.projectedAnnualAppreciation, locale)}</span></div>
          <div className="calc-row"><span className="calc-label">{t("detail.totalReturn", locale)}</span><span className="calc-value accent">{formatPctLocalized(f.projectedTotalReturn, locale)}</span></div>
          <div style={{ marginTop: 18, padding: 16, background: "var(--bg-alt)", borderRadius: "var(--r-md)" }}>
            <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 10 }}>{t("detail.wholeIncludes", locale)}</div>
            <ul style={{ margin: 0, paddingLeft: 18, fontSize: 13, lineHeight: 1.6, color: "var(--text-muted)" }}>
              {[1,2,3,4].map((n) => <li key={n}>{t(`detail.incl${n}`, locale)}</li>)}
            </ul>
          </div>
          <button className="btn btn-primary btn-lg mt-16" style={{ width: "100%" }} onClick={onInterest}>
            {t("detail.requestProposal", locale)}
          </button>
        </>
      )}
    </aside>
  );
}

function AccordionItem({ title, defaultOpen = false, children }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div className={`accordion-item ${open ? "open" : ""}`}>
      <button className="accordion-trigger" onClick={() => setOpen(!open)} aria-expanded={open}>
        <h3>{title}</h3>
        <span className="accordion-icon"><Icon.ChevronDown /></span>
      </button>
      <div className="accordion-content"><div className="accordion-inner">{children}</div></div>
    </div>
  );
}

function FactRow({ k, v }) { return <div className="fact-row"><div className="fact-key">{k}</div><div className="fact-val">{v}</div></div>; }

function FactsAccordion({ p }) {
  const { locale } = useLocale();
  const s = p.specs;
  const inter = p.interior;
  const ext = p.exterior;
  const con = p.construction;
  const util = p.utilities;
  const yes = t("detail.yes", locale), no = t("detail.no", locale);

  const list = (arr) => arr ? arr.map((x) => localized(x, locale)).join(" · ") : "—";
  const factsList = (arr) => <div className="fact-list">{(arr || []).map((x, i) => <span key={i}>{localized(x, locale)}</span>)}</div>;

  return (
    <div className="accordion">
      {(p.rooms || inter) && (
        <AccordionItem title={t("detail.interior", locale)} defaultOpen>
          {p.rooms && (
            <div>
              <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 10 }}>{t("detail.rooms", locale)}</div>
              {p.rooms.map((r, i) => (
                <FactRow key={i}
                  k={localized(r.name, locale)}
                  v={`${t("detail.level", locale)}: ${r.level} · ${t("detail.dimensions", locale)}: ${r.dimensions} ft · ${r.areaSqft} ft²`} />
              ))}
            </div>
          )}
          {inter && (
            <div>
              <FactRow k={t("detail.heating", locale)} v={list(inter.heating)} />
              <FactRow k={t("detail.cooling", locale)} v={list(inter.cooling)} />
              <FactRow k={t("detail.appliances", locale)} v={factsList(inter.appliances)} />
              <FactRow k={t("detail.laundry", locale)} v={factsList(inter.laundry)} />
              <FactRow k={t("detail.flooring", locale)} v={list(inter.flooring)} />
              {inter.features && <FactRow k={t("detail.features", locale)} v={list(inter.features)} />}
              <FactRow k={t("detail.basement", locale)} v={inter.hasBasement ? yes : no} />
              <FactRow k={t("detail.fireplace", locale)} v={inter.hasFireplace ? yes : no} />
              <FactRow k={t("detail.livableArea", locale)} v={`${formatNum(s.areaSqft, locale)} ft² (${s.areaSqm} m²)`} />
            </div>
          )}
        </AccordionItem>
      )}

      {(s.parkingSpaces || ext) && (
        <AccordionItem title={t("detail.property", locale)}>
          {s.parkingSpaces != null && <FactRow k={t("detail.parkingFeat", locale)} v={`${s.parkingSpaces} · ${localized(s.parkingFeatures, locale) || ""}`} />}
          {s.levels && <FactRow k={t("detail.levels", locale)} v={s.levels} />}
          {ext && (
            <>
              <FactRow k={t("detail.pool", locale)} v={ext.pool ? yes : no} />
              <FactRow k={t("detail.fencing", locale)} v={localized(ext.fencing, locale)} />
              <FactRow k={t("detail.lotSize", locale)} v={`${s.lotAcres} acres / ${formatNum(s.lotSqm, locale)} m²`} />
              <FactRow k={t("detail.lotFeatures", locale)} v={factsList(ext.lotFeatures)} />
              <FactRow k={t("detail.additionalStructures", locale)} v={list(ext.additionalStructures)} />
            </>
          )}
          {p.address.parcelNumber && <FactRow k={t("detail.parcelNumber", locale)} v={p.address.parcelNumber} />}
        </AccordionItem>
      )}

      {con && (
        <AccordionItem title={t("detail.construction", locale)}>
          <FactRow k={t("detail.homeType", locale)} v={localized(s.type, locale)} />
          <FactRow k={t("detail.architecturalStyle", locale)} v={localized(s.architecturalStyle, locale)} />
          <FactRow k={t("detail.foundation", locale)} v={localized(con.foundation, locale)} />
          <FactRow k={t("detail.roof", locale)} v={localized(con.roof, locale)} />
          <FactRow k={t("detail.yearBuilt", locale)} v={s.yearBuilt} />
        </AccordionItem>
      )}

      {util && (
        <AccordionItem title={t("detail.utilities", locale)}>
          <FactRow k={t("detail.sewer", locale)} v={localized(util.sewer, locale)} />
          <FactRow k={t("detail.water", locale)} v={localized(util.water, locale)} />
          <FactRow k={t("detail.cable", locale)} v={list(util.available)} />
          {p.address.subdivision && <FactRow k={t("detail.subdivision", locale)} v={p.address.subdivision} />}
          <FactRow k={t("detail.hoa", locale)} v={p.hoa?.hasHOA ? formatUSD(p.hoa.monthlyFee) + "/mo" : t("detail.noHoa", locale)} />
        </AccordionItem>
      )}
    </div>
  );
}

function PriceHistoryTable({ p }) {
  const { locale } = useLocale();
  if (!p.priceHistory) return null;
  const rate = (locale === "pt" && p.financials.totalPrice && p.financialsUSD?.purchasePrice) ? p.financials.totalPrice / p.financialsUSD.purchasePrice : 5;
  return (
    <div className="table-wrap">
      <table className="data-table">
        <thead>
          <tr>
            <th>{t("detail.date", locale)}</th>
            <th>{t("detail.event", locale)}</th>
            <th>{t("detail.price", locale)}</th>
            <th>{t("detail.pricePerSqft", locale)}</th>
            <th>{t("detail.taxChange", locale)}</th>
            <th>{locale === "pt" ? "Fonte" : "Source"}</th>
          </tr>
        </thead>
        <tbody>
          {p.priceHistory.map((r, i) => {
            const priceShow = locale === "pt" ? formatBRL(r.priceUSD * rate, { compact: true }) : formatUSD(r.priceUSD);
            return (
              <tr key={i}>
                <td>{formatDate(r.date, locale)}</td>
                <td>{localized(r.event, locale)} {r.isCurrent && <span className="badge badge-success" style={{ marginLeft: 6 }}>{t("detail.current", locale)}</span>}</td>
                <td><strong>{priceShow}</strong></td>
                <td>{r.pricePerSqft ? `${formatUSD(r.pricePerSqft)}/sqft` : "—"}</td>
                <td className={r.pctChange == null ? "pct-neutral" : r.pctChange > 0 ? "pct-up" : "pct-down"}>{r.pctChange != null ? (r.pctChange > 0 ? "+" : "") + r.pctChange.toFixed(1) + "%" : "—"}</td>
                <td className="muted" style={{ fontSize: 12 }}>{r.source}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

function TaxHistoryTable({ p }) {
  const { locale } = useLocale();
  if (!p.taxHistory) return null;
  const rate = (locale === "pt" && p.financials.totalPrice && p.financialsUSD?.purchasePrice) ? p.financials.totalPrice / p.financialsUSD.purchasePrice : 5;
  return (
    <div className="table-wrap">
      <table className="data-table">
        <thead>
          <tr>
            <th>{t("detail.taxYear", locale)}</th>
            <th>{t("detail.propertyTaxes", locale)}</th>
            <th>{t("detail.taxChange", locale)}</th>
            <th>{t("detail.assessedValue", locale)}</th>
            <th>{t("detail.assessmentChange", locale)}</th>
          </tr>
        </thead>
        <tbody>
          {p.taxHistory.map((r) => (
            <tr key={r.year}>
              <td><strong>{r.year}</strong></td>
              <td>{locale === "pt" ? formatBRL(r.propertyTax * rate) : formatUSD(r.propertyTax)}</td>
              <td className={r.taxChangePct === 0 ? "pct-neutral" : r.taxChangePct > 0 ? "pct-up" : "pct-down"}>{r.taxChangePct === 0 ? "—" : (r.taxChangePct > 0 ? "+" : "") + r.taxChangePct.toFixed(1) + "%"}</td>
              <td>{locale === "pt" ? formatBRL(r.assessedValue * rate, { compact: true }) : formatUSD(r.assessedValue)}</td>
              <td className={r.assessmentChangePct === 0 ? "pct-neutral" : r.assessmentChangePct > 0 ? "pct-up" : "pct-down"}>{r.assessmentChangePct === 0 ? "—" : (r.assessmentChangePct > 0 ? "+" : "") + r.assessmentChangePct.toFixed(1) + "%"}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function MortgageDonut({ p }) {
  const { locale } = useLocale();
  if (!p.financialsUSD?.mortgageBreakdown) return null;
  const m = p.financialsUSD.mortgageBreakdown;
  const total = m.principalAndInterest + m.propertyTaxes + m.homeInsurance;
  const slices = [
    { label: t("detail.principalInterest", locale), value: m.principalAndInterest, color: "#1F3D2E" },
    { label: t("detail.propertyTaxes", locale), value: m.propertyTaxes, color: "#E85D3A" },
    { label: t("detail.homeInsurance", locale), value: m.homeInsurance, color: "#C28E2E" },
  ];
  // donut math
  const cx = 80, cy = 80, r = 60, sw = 24;
  let cum = 0;
  const arcs = slices.map((s, i) => {
    const frac = s.value / total;
    const start = cum * 2 * Math.PI - Math.PI / 2;
    const end = (cum + frac) * 2 * Math.PI - Math.PI / 2;
    cum += frac;
    const x1 = cx + r * Math.cos(start);
    const y1 = cy + r * Math.sin(start);
    const x2 = cx + r * Math.cos(end);
    const y2 = cy + r * Math.sin(end);
    const large = frac > 0.5 ? 1 : 0;
    return <path key={i} d={`M ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2}`} stroke={s.color} strokeWidth={sw} fill="none" />;
  });

  return (
    <div className="donut-wrap">
      <svg width="160" height="160" viewBox="0 0 160 160" className="donut-svg">
        {arcs}
        <text x="80" y="76" textAnchor="middle" fontSize="11" fill="var(--text-muted)" letterSpacing="0.04em">TOTAL</text>
        <text x="80" y="98" textAnchor="middle" fontSize="22" fontFamily="var(--font-display)" fill="var(--text)">{formatUSD(total)}</text>
      </svg>
      <div className="donut-legend">
        {slices.map((s, i) => (
          <div className="donut-legend-item" key={i}>
            <span className="donut-legend-dot" style={{ background: s.color }} />
            <span className="donut-legend-text">{s.label}</span>
            <span className="donut-legend-value">{formatUSD(s.value)}</span>
          </div>
        ))}
        <div style={{ paddingTop: 14, fontSize: 12, color: "var(--text-muted)" }}>
          {locale === "pt"
            ? `Assume entrada de ${formatUSD(m.downPayment)} (${Math.round(m.downPayment / p.financialsUSD.purchasePrice * 100)}%), score ${m.creditScoreAssumption}.`
            : `Assumes ${formatUSD(m.downPayment)} down (${Math.round(m.downPayment / p.financialsUSD.purchasePrice * 100)}%), credit score ${m.creditScoreAssumption}.`}
        </div>
      </div>
    </div>
  );
}

function SchoolsBlock({ p }) {
  const { locale } = useLocale();
  if (!p.schools) return null;
  return (
    <div>
      {p.schools.map((s, i) => {
        const cls = s.greatSchoolsRating >= 7 ? "high" : s.greatSchoolsRating >= 4 ? "med" : "low";
        return (
          <div className="school-card" key={i}>
            <div className={`school-rating ${cls}`}>{s.greatSchoolsRating}<sup>/10</sup></div>
            <div className="school-info">
              <div className="school-name">{s.name}</div>
              <div className="school-meta">{localized(s.level, locale)} · {t("detail.schoolsGrades", locale)} {s.grades} · {s.distanceMi} mi</div>
            </div>
          </div>
        );
      })}
      <div className="muted" style={{ fontSize: 12, marginTop: 8 }}>
        {locale === "pt" ? "Notas via GreatSchools.org · Distrito: " : "Ratings via GreatSchools.org · District: "}{p.address.schoolDistrict || "—"}
      </div>
    </div>
  );
}

function ClimateBlock({ p }) {
  const { locale } = useLocale();
  if (!p.climate) return null;
  return (
    <div className="climate-card">
      <div className="climate-icon"><Icon.Droplet /></div>
      <div>
        <div className="climate-zone serif">{p.climate.floodZone}</div>
        <div className="climate-text">{localized(p.climate.floodRisk, locale)} · {locale === "pt" ? "FEMA" : "FEMA"}</div>
      </div>
    </div>
  );
}

function ScoresBlock({ p }) {
  const { locale } = useLocale();
  if (!p.walkability) return null;
  const w = p.walkability;
  const colorFor = (n) => n >= 70 ? "var(--success)" : n >= 50 ? "var(--warning)" : "var(--text-soft)";
  return (
    <div className="score-row">
      <div className="score-card">
        <div className="score-circle" style={{ background: "var(--primary-soft)", color: colorFor(w.walkScore) }}>{w.walkScore}</div>
        <div className="score-info"><span>{t("detail.walkScore", locale)}</span><strong>{localized(w.walkLabel, locale)}</strong></div>
      </div>
      <div className="score-card">
        <div className="score-circle" style={{ background: "var(--accent-soft)", color: colorFor(w.bikeScore) }}>{w.bikeScore}</div>
        <div className="score-info"><span>{t("detail.bikeScore", locale)}</span><strong>{localized(w.bikeLabel, locale)}</strong></div>
      </div>
    </div>
  );
}

function LocationBlock({ p }) {
  const { locale } = useLocale();
  return (
    <div>
      <div className="location-map">
        <svg width="100%" height="100%" viewBox="0 0 600 340" style={{ display: "block" }}>
          <rect width="600" height="340" fill="var(--bg-alt)" />
          <g stroke="var(--border-strong)" strokeWidth="1" fill="none">
            <line x1="0" y1="120" x2="600" y2="120" />
            <line x1="0" y1="220" x2="600" y2="220" />
            <line x1="200" y1="0" x2="200" y2="340" />
            <line x1="380" y1="0" x2="380" y2="340" />
            <path d="M 0 180 Q 150 160 300 180 T 600 200" stroke="var(--accent)" strokeWidth="2" opacity="0.5" />
          </g>
          <g fill="var(--text-muted)" fontSize="10">
            <text x="100" y="60">{p.address.neighborhood}</text>
            <text x="430" y="280">{p.address.city}</text>
          </g>
        </svg>
        <div className="location-pin">
          <Icon.MapPin width="32" height="32" stroke="var(--accent)" fill="var(--accent-soft)" />
        </div>
      </div>
      <div style={{ marginTop: 14, fontSize: 14 }}>
        <strong>{p.address.street}</strong><br/>
        <span className="muted">{p.address.neighborhood}, {p.address.city}{p.address.state ? `, ${p.address.state}` : ""} {p.address.zip || ""} · {localized(p.address.country, locale)}</span>
      </div>
      <div className="poi-list">
        {(locale === "pt" ? [
          { ic: <Icon.Tree />, txt: "Benbrook Lake — 2,1 mi" },
          { ic: <Icon.School />, txt: "Benbrook Elementary — 0,3 mi · GreatSchools 9/10" },
          { ic: <Icon.Building />, txt: "Centro Fort Worth — 12 mi" },
        ] : [
          { ic: <Icon.Tree />, txt: "Benbrook Lake — 2.1 mi" },
          { ic: <Icon.School />, txt: "Benbrook Elementary — 0.3 mi · GreatSchools 9/10" },
          { ic: <Icon.Building />, txt: "Downtown Fort Worth — 12 mi" },
        ]).map((it, i) => (
          <div className="poi-item" key={i}>
            <span className="ic">{it.ic}</span>{it.txt}
          </div>
        ))}
      </div>
    </div>
  );
}

function ComparablesBlock({ p }) {
  const { locale } = useLocale();
  if (!p.comparables) return null;
  return (
    <div className="comp-row">
      {p.comparables.slice(0, 6).map((c, i) => (
        <div className="comp-card" key={i}>
          <div className="comp-price">{locale === "pt" ? formatBRL(c.priceUSD * 5, { compact: true }) : formatUSD(c.priceUSD)}</div>
          <div className="comp-addr">{c.address}</div>
          <div className="comp-meta">{c.city} · {c.beds}bd · {c.baths}ba · {c.sqft} ft²</div>
          <div className="muted" style={{ fontSize: 11, marginTop: 6 }}>{c.status === "Off Market" ? t("detail.offMarket", locale) : t("detail.forSale", locale)}</div>
        </div>
      ))}
    </div>
  );
}

function SimilarHomesBlock({ p }) {
  const { locale } = useLocale();
  if (!p.similarHomes) return null;
  return (
    <div className="comp-row">
      {p.similarHomes.map((c, i) => (
        <div className="comp-card" key={i}>
          <span className="badge badge-success" style={{ marginBottom: 8 }}>{t("detail.forSale", locale)}</span>
          <div className="comp-price">{locale === "pt" ? formatBRL(c.priceUSD * 5, { compact: true }) : formatUSD(c.priceUSD)}</div>
          <div className="comp-addr">{c.address}</div>
          <div className="comp-meta">{c.city} · {c.beds}bd · {c.baths}ba · {c.sqft} ft²</div>
          {c.mlsId && <div className="muted" style={{ fontSize: 11, marginTop: 6 }}>MLS #{c.mlsId}</div>}
        </div>
      ))}
    </div>
  );
}

function PropertyDetailPage({ slug }) {
  const { locale } = useLocale();
  const { navigate } = useRouter();
  useReveal();
  const p = window.PROPERTIES.find((x) => x.slug === slug);
  const [longExpanded, setLongExpanded] = useState(false);
  const [interestOpen, setInterestOpen] = useState(false);

  if (!p) {
    return (
      <div className="container section text-center">
        <h1 className="serif">{locale === "pt" ? "Imóvel não encontrado" : "Property not found"}</h1>
        <button className="btn btn-primary mt-16" onClick={() => navigate("/properties")}>{t("common.backToList", locale)}</button>
      </div>
    );
  }
  const f = p.financials;
  const fUSD = p.financialsUSD;
  const meta = p.listingMeta;

  return (
    <div className="page-enter container detail-container" style={{ paddingBottom: 80 }}>
      <div className="breadcrumbs">
        <a href="#/" onClick={(e) => { e.preventDefault(); navigate("/"); }}>Home</a>
        {" · "}
        <a href="#/properties" onClick={(e) => { e.preventDefault(); navigate("/properties"); }}>{t("nav.properties", locale)}</a>
        {" · "}
        {localized(p.title, locale)}
      </div>

      {/* Title row */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 24, marginBottom: 18, flexWrap: "wrap" }}>
        <div>
          <h1 className="serif" style={{ fontSize: "clamp(32px, 4vw, 48px)", letterSpacing: "-0.02em", margin: "8px 0 8px", lineHeight: 1.1 }}>
            {localized(p.title, locale)}
          </h1>
          <p className="muted" style={{ margin: 0, fontSize: 15 }}>
            <Icon.MapPin /> {p.address.street}, {p.address.city}{p.address.state ? `, ${p.address.state}` : ""} {p.address.zip || ""} · {localized(p.address.country, locale)}
          </p>
          {meta && (
            <div className="flex gap-12 flex-wrap" style={{ marginTop: 10 }}>
              {meta.isFannieMaeHomePath && <span className="badge badge-warning" title={t("detail.homePathTooltip", locale)}>★ {t("detail.fannieMaeBadge", locale)}</span>}
              {meta.soldAsIs && <span className="badge badge-neutral">{t("detail.soldAsIsBadge", locale)}</span>}
              {p.modality.length === 2 && <span className="badge badge-primary">{t("card.badgeBoth", locale)}</span>}
              {p.isJustAdded && <span className="badge badge-accent">{t("card.badgeJustAdded", locale)}</span>}
            </div>
          )}
        </div>
        <div className="flex gap-8">
          <button className="btn btn-ghost btn-sm"><Icon.Heart /> {locale === "pt" ? "Salvar" : "Save"}</button>
          <button className="btn btn-ghost btn-sm">{locale === "pt" ? "Compartilhar" : "Share"}</button>
        </div>
      </div>

      <Gallery images={p.images} />

      <QuickFacts p={p} />

      <div className="detail-grid">
        <div>
          {/* What's Special */}
          {p.whatsSpecial && (
            <section className="section-block">
              <h2>{t("detail.whatsSpecial", locale)}</h2>
              <div className="whats-special">
                {p.whatsSpecial.map((w, i) => <span className="ws-chip" key={i}>{localized(w, locale)}</span>)}
              </div>
              <div className={`long-desc ${longExpanded ? "" : "truncated"}`} style={{ background: "var(--bg)" }}>
                {localized(p.longDescription, locale)}
              </div>
              <button className="btn btn-ghost btn-sm mt-16" onClick={() => setLongExpanded((x) => !x)}>
                {longExpanded ? t("common.readLess", locale) : t("common.readMore", locale)}
              </button>
            </section>
          )}

          {/* Facts & Features */}
          <section className="section-block">
            <h2>{t("detail.facts", locale)}</h2>
            <FactsAccordion p={p} />
          </section>

          {/* Tax + Price History */}
          {(p.taxHistory || p.priceHistory) && (
            <section className="section-block">
              {p.priceHistory && (
                <>
                  <h2>{t("detail.priceHistory", locale)}</h2>
                  <PriceHistoryTable p={p} />
                </>
              )}
              {p.taxHistory && (
                <div style={{ marginTop: 36 }}>
                  <h2 style={{ marginBottom: 24 }}>{t("detail.taxHistory", locale)}</h2>
                  <TaxHistoryTable p={p} />
                </div>
              )}
            </section>
          )}

          {/* Mortgage Donut + Rent Zestimate */}
          {fUSD?.mortgageBreakdown && (
            <section className="section-block">
              <h2>{t("detail.mortgageBreakdown", locale)}</h2>
              <div style={{ marginBottom: 8, fontSize: 14, color: "var(--text-muted)" }}>
                {locale === "pt"
                  ? `Estimativa para uso pessoal (não-investidor) com base em preço de ${formatUSD(fUSD.purchasePrice)}.`
                  : `Estimate for personal use (non-investor), based on a ${formatUSD(fUSD.purchasePrice)} purchase price.`}
              </div>
              <MortgageDonut p={p} />
              {fUSD.rentZestimate && (
                <div className="rent-zest mt-24">
                  <div className="rent-zest-icon"><Icon.Coins /></div>
                  <div>
                    <div className="rent-zest-label">{t("detail.rentEstimate", locale)}</div>
                    <div className="rent-zest-value">{formatUSD(fUSD.rentZestimate)}<span style={{ fontSize: 14, color: "var(--text-muted)" }}>{t("detail.perMonth", locale)}</span></div>
                  </div>
                </div>
              )}
            </section>
          )}

          {/* Schools */}
          {p.schools && (
            <section className="section-block">
              <h2>{t("detail.schools", locale)}</h2>
              <SchoolsBlock p={p} />
            </section>
          )}

          {/* Climate */}
          {p.climate && (
            <section className="section-block">
              <h2>{t("detail.climate", locale)}</h2>
              <ClimateBlock p={p} />
            </section>
          )}

          {/* Walk + Bike */}
          {p.walkability && (
            <section className="section-block">
              <h2>{t("detail.walkability", locale)}</h2>
              <ScoresBlock p={p} />
            </section>
          )}

          {/* Location */}
          <section className="section-block">
            <h2>{t("detail.location", locale)}</h2>
            <LocationBlock p={p} />
          </section>

          {/* Comparables (off-market) */}
          {p.comparables && (
            <section className="section-block">
              <h2>{t("detail.comparablesNearby", locale)}</h2>
              <ComparablesBlock p={p} />
            </section>
          )}

          {/* Similar (for sale) */}
          {p.similarHomes && (
            <section className="section-block">
              <h2>{t("detail.similarHomes", locale)}</h2>
              <SimilarHomesBlock p={p} />
            </section>
          )}

          {/* Documents */}
          <section className="section-block">
            <h2>{t("detail.documents", locale)}</h2>
            <div className="docs-list">
              {p.documents.map((d, i) => (
                <div className="doc-item" key={i}>
                  <span className="doc-icon"><Icon.Doc /></span>
                  <span className="doc-name">{localized(d.name, locale)}</span>
                  <span className="doc-action">PDF · {locale === "pt" ? "Baixar" : "Download"}</span>
                </div>
              ))}
            </div>
          </section>

          {/* Listing meta */}
          {meta && (
            <section className="section-block">
              <h2>{t("detail.listingMeta", locale)}</h2>
              <div className="listing-meta">
                <div className="flex gap-24 flex-wrap">
                  <div><strong>{t("detail.listedBy", locale)}</strong>{meta.listedBy.agentName} · {meta.listedBy.brokerage}<br/>{locale === "pt" ? "Licença" : "License"} {meta.listedBy.license} · {meta.listedBy.phone}</div>
                  <div><strong>{t("detail.mls", locale)}</strong>{meta.source} #{meta.mlsId}</div>
                  <div><strong>{t("detail.daysOnMarket", locale)}</strong>{meta.daysOnMarket} {locale === "pt" ? "dias" : "days"}</div>
                  <div><strong>{locale === "pt" ? "Visualizações / Salvos" : "Views / Saves"}</strong><Icon.Eye /> {formatNum(meta.views, locale)} · <Icon.Bookmark /> {formatNum(meta.saves, locale)}</div>
                </div>
              </div>
            </section>
          )}

          {/* Similar on platform (cross-sell) */}
          <section className="section-block" style={{ borderBottom: "none" }}>
            <h2>{t("detail.similarOnPlatform", locale)}</h2>
            <div className="property-grid">
              {window.PROPERTIES.filter((x) => x.id !== p.id).map((other) => <PropertyCard p={other} key={other.id} />)}
            </div>
          </section>
        </div>

        <InvestPanel p={p} onInterest={() => setInterestOpen(true)} />
      </div>

      {/* Sticky mobile FAB */}
      <div className="fab-mobile-cta show">
        <button className="btn btn-primary" onClick={() => setInterestOpen(true)}>{t("detail.interestCta", locale)}</button>
      </div>

      <Modal open={interestOpen} onClose={() => setInterestOpen(false)} title={t("form.title", locale)}>
        <p className="muted" style={{ marginTop: 0, fontSize: 14 }}>{t("form.sub", locale)}</p>
        <InterestForm property={p} defaultModality={p.primaryModality} onSuccess={() => setInterestOpen(false)} />
      </Modal>
    </div>
  );
}

Object.assign(window, { PropertyDetailPage });