// PonteREI — Home page

function HomeHero() {
  const { locale } = useLocale();
  const { navigate } = useRouter();
  return (
    <section className="hero">
      <div className="container hero-grid">
        <div className="reveal">
          <div className="eyebrow">{t("hero.eyebrow", locale)}</div>
          <h1 className="serif">
            <em>{t("hero.headlineEm", locale)}</em>{t("hero.headlineRest", locale)}
          </h1>
          <p className="lead">{t("hero.sub", locale)}</p>
          <div className="hero-ctas">
            <button className="btn btn-primary btn-lg" onClick={() => navigate("/signup")}>
              {t("hero.ctaPrimary", locale)} <Icon.ArrowRight />
            </button>
            <button className="btn btn-ghost btn-lg" onClick={() => navigate("/how-it-works")}>
              {t("hero.ctaSecondary", locale)}
            </button>
          </div>
          <div className="hero-stats">
            <span className="chip">⏱ {t("hero.statChip1", locale)}</span>
            <span className="chip">👥 {t("hero.statChip2", locale)}</span>
            <span className="chip">🌍 {t("hero.statChip3", locale)}</span>
          </div>
        </div>
        <div className="hero-visual reveal">
          <svg className="hero-bridge-svg" viewBox="0 0 400 80" preserveAspectRatio="none">
            <path d="M 0 60 Q 100 20 200 40 T 400 30" stroke="rgba(232,93,58,0.85)" strokeWidth="1.5" fill="none" strokeLinecap="round" />
            <line x1="50" y1="60" x2="50" y2="35" stroke="rgba(232,93,58,0.5)" strokeWidth="1" />
            <line x1="120" y1="55" x2="120" y2="22" stroke="rgba(232,93,58,0.5)" strokeWidth="1" />
            <line x1="200" y1="50" x2="200" y2="40" stroke="rgba(232,93,58,0.5)" strokeWidth="1" />
            <line x1="280" y1="45" x2="280" y2="35" stroke="rgba(232,93,58,0.5)" strokeWidth="1" />
            <line x1="350" y1="40" x2="350" y2="30" stroke="rgba(232,93,58,0.5)" strokeWidth="1" />
          </svg>
          <div className="hero-visual-card">
            <div className="ic"><Icon.Coins /></div>
            <div>
              <div style={{ fontSize: 12, color: "var(--text-muted)" }}>{locale === "pt" ? "Próximo aluguel cai em" : "Next rent payment in"}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.1 }}>
                {locale === "pt" ? "3 dias · R$ 1.247,80" : "3 days · R$ 1,247.80"}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function StatsBand() {
  const { locale } = useLocale();
  const stats = [
    { num: "R$ 327M+", label: t("stats.invested", locale) },
    { num: "850k", label: t("stats.investors", locale) },
    { num: "22", label: t("stats.countries", locale) },
    { num: "47", label: t("stats.properties", locale) },
  ];
  return (
    <section className="section-tight">
      <div className="container">
        <div className="stats-grid">
          {stats.map((s, i) => (
            <div className="stat-block reveal" key={i}>
              <div className="stat-num serif">{s.num}</div>
              <div className="stat-label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PressBand() {
  const { locale } = useLocale();
  return (
    <section className="section-tight" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="eyebrow text-center" style={{ marginBottom: 28 }}>{t("featuredIn.title", locale)}</div>
        <div className="press-row">
          <span className="press-logo italic">Valor Econômico</span>
          <span className="press-logo sans">EXAME</span>
          <span className="press-logo italic">Forbes Brasil</span>
          <span className="press-logo sans">Bloomberg</span>
          <span className="press-logo">InfoMoney</span>
          <span className="press-logo italic">The Economist</span>
        </div>
      </div>
    </section>
  );
}

function HowItWorksSection() {
  const { locale } = useLocale();
  return (
    <section className="section section-bg-alt">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">{t("howItWorks.eyebrow", locale)}</div>
          <h2 className="serif">{t("howItWorks.title", locale)}</h2>
          <p>{t("howItWorks.sub", locale)}</p>
        </div>
        <div className="steps-grid">
          {[1, 2, 3].map((n) => (
            <div className="step reveal" key={n}>
              <div className="step-num">{n}</div>
              <h3>{t(`howItWorks.step${n}Title`, locale)}</h3>
              <p>{t(`howItWorks.step${n}Desc`, locale)}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ModalitiesSection() {
  const { locale } = useLocale();
  const items = [
    { id: "cotas", icon: <Icon.Coins />, key: "cotas" },
    { id: "inteiro", icon: <Icon.Building />, key: "inteiro" },
    { id: "fundos", icon: <Icon.Trending />, key: "fundos" },
    { id: "credito", icon: <Icon.Shield />, key: "credito" },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">{t("modalities.eyebrow", locale)}</div>
          <h2 className="serif">{t("modalities.title", locale)}</h2>
          <p>{t("modalities.sub", locale)}</p>
        </div>
        <div className="modalities-grid">
          {items.map((it) => (
            <div className="modality-card reveal" key={it.id}>
              <div className="modality-icon">{it.icon}</div>
              <h3>{t(`modalities.${it.key}Title`, locale)}</h3>
              <p>{t(`modalities.${it.key}Desc`, locale)}</p>
              <div className="modality-min">{t(`modalities.${it.key}Min`, locale)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeaturedProperties() {
  const { locale } = useLocale();
  const { navigate } = useRouter();
  return (
    <section className="section section-bg-alt">
      <div className="container">
        <div className="section-head flex justify-between items-center" style={{ maxWidth: "100%", flexWrap: "wrap", gap: 24 }}>
          <div style={{ maxWidth: 580 }}>
            <div className="eyebrow">{t("featured.eyebrow", locale)}</div>
            <h2 className="serif">{t("featured.title", locale)}</h2>
            <p>{t("featured.sub", locale)}</p>
          </div>
          <button className="btn btn-secondary" onClick={() => navigate("/properties")}>
            {t("featured.viewAll", locale)} <Icon.ArrowRight />
          </button>
        </div>
        <div className="property-grid">
          {window.PROPERTIES.map((p) => <PropertyCard p={p} key={p.id} />)}
        </div>
      </div>
    </section>
  );
}

function PerformanceSection() {
  const { locale } = useLocale();
  // Simulated yearly returns 2022-2025
  const data = [
    { year: 2022, ponterei: 11.4, cdi: 12.4, ibov: 4.7 },
    { year: 2023, ponterei: 13.2, cdi: 13.0, ibov: 22.3 },
    { year: 2024, ponterei: 14.1, cdi: 10.8, ibov: -10.4 },
    { year: 2025, ponterei: 12.8, cdi: 11.2, ibov: 8.4 },
  ];
  const max = 25;
  return (
    <section className="section">
      <div className="container perf-grid">
        <div className="reveal">
          <div className="eyebrow">{t("performance.eyebrow", locale)}</div>
          <h2 className="serif" style={{ fontSize: "clamp(34px, 4.5vw, 52px)", margin: "12px 0 16px", letterSpacing: "-0.02em", lineHeight: 1.05 }}>
            {t("performance.title", locale)}
          </h2>
          <p className="muted" style={{ fontSize: 18, marginBottom: 24 }}>{t("performance.sub", locale)}</p>
          <div className="flex gap-16 flex-wrap">
            <span className="chip"><span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--accent)", display: "inline-block" }} /> {t("performance.ponterei", locale)}</span>
            <span className="chip"><span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--primary)", display: "inline-block" }} /> {t("performance.cdi", locale)}</span>
            <span className="chip"><span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--text-soft)", display: "inline-block" }} /> {t("performance.ibov", locale)}</span>
          </div>
        </div>
        <div className="perf-chart reveal">
          <svg viewBox="0 0 600 360" style={{ width: "100%", height: "auto" }}>
            {/* y-axis lines */}
            {[0, 5, 10, 15, 20, 25].map((y) => {
              const yPx = 320 - (y / max) * 280;
              return (
                <g key={y}>
                  <line x1="60" x2="580" y1={yPx} y2={yPx} stroke="var(--border)" />
                  <text x="50" y={yPx + 4} fontSize="11" fill="var(--text-muted)" textAnchor="end">{y}%</text>
                </g>
              );
            })}
            {/* zero baseline if needed */}
            <line x1="60" x2="580" y1="320" y2="320" stroke="var(--border-strong)" strokeWidth="1.5" />

            {data.map((d, i) => {
              const groupX = 90 + i * 130;
              const barW = 28;
              const bars = [
                { v: d.ponterei, color: "var(--accent)", x: groupX },
                { v: d.cdi, color: "var(--primary)", x: groupX + barW + 4 },
                { v: d.ibov, color: "var(--text-soft)", x: groupX + (barW + 4) * 2 },
              ];
              return (
                <g key={d.year}>
                  {bars.map((b, j) => {
                    const h = (Math.abs(b.v) / max) * 280;
                    const yPx = b.v >= 0 ? 320 - h : 320;
                    return (
                      <g key={j}>
                        <rect x={b.x} y={yPx} width={barW} height={h} fill={b.color} rx="3" />
                        <text x={b.x + barW / 2} y={yPx - 6} fontSize="10" fill="var(--text-muted)" textAnchor="middle">
                          {b.v > 0 ? "+" : ""}{b.v.toFixed(1)}
                        </text>
                      </g>
                    );
                  })}
                  <text x={groupX + barW * 1.5 + 6} y="345" fontSize="12" fill="var(--text)" textAnchor="middle" fontWeight="500">{d.year}</text>
                </g>
              );
            })}
          </svg>
        </div>
      </div>
    </section>
  );
}

function TestimonialsSection() {
  const { locale } = useLocale();
  return (
    <section className="section section-bg-alt">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">{t("testimonials.eyebrow", locale)}</div>
          <h2 className="serif">{t("testimonials.title", locale)}</h2>
        </div>
        <div className="testimonial-grid">
          {window.TESTIMONIALS.map((tm, i) => (
            <div className="testimonial reveal" key={i}>
              <p className="testimonial-quote">"{locale === "pt" ? tm.quoteP : tm.quoteE}"</p>
              <div className="testimonial-author">
                <img src={tm.avatar} alt={tm.name} loading="lazy" />
                <div>
                  <div className="testimonial-name">{tm.name}</div>
                  <div className="testimonial-meta">{locale === "pt" ? tm.cityP : tm.cityE} · {formatBRL(tm.investedAmount, { compact: true })} {t("testimonials.invested", locale)}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQSection() {
  const { locale } = useLocale();
  const [open, setOpen] = useState(0);
  const items = [1, 2, 3, 4, 5];
  return (
    <section className="section">
      <div className="container faq-grid">
        <div className="reveal">
          <div className="eyebrow">{t("faq.eyebrow", locale)}</div>
          <h2 className="serif" style={{ fontSize: "clamp(34px, 4.5vw, 56px)", letterSpacing: "-0.02em", lineHeight: 1.05, margin: "12px 0 16px" }}>
            {t("faq.title", locale)}
          </h2>
        </div>
        <div>
          {items.map((n) => (
            <div key={n} className={`faq-item ${open === n - 1 ? "open" : ""}`} onClick={() => setOpen(open === n - 1 ? -1 : n - 1)}>
              <div className="faq-q">
                <span>{t(`faq.q${n}`, locale)}</span>
                <span className="faq-toggle"><Icon.Plus /></span>
              </div>
              <div className="faq-a">{t(`faq.a${n}`, locale)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTASection() {
  const { locale } = useLocale();
  const { navigate } = useRouter();
  return (
    <section className="cta-band">
      <div className="container text-center">
        <h2 className="serif reveal">{t("cta.title", locale)}</h2>
        <p className="reveal">{t("cta.sub", locale)}</p>
        <button className="btn btn-primary btn-lg reveal" onClick={() => navigate("/signup")}>
          {t("cta.button", locale)} <Icon.ArrowRight />
        </button>
      </div>
    </section>
  );
}

function HomePage({ globeMode, setGlobeMode }) {
  useReveal();
  return (
    <div className="page-enter">
      <HomeHero />
      <PressBand />
      <StatsBand />
      <GlobeSection globeMode={globeMode} setGlobeMode={setGlobeMode} />
      <HowItWorksSection />
      <FeaturedProperties />
      <ModalitiesSection />
      <PerformanceSection />
      <TestimonialsSection />
      <FAQSection />
      <CTASection />
    </div>
  );
}

Object.assign(window, { HomePage });