// PonteREI — static pages: how-it-works, about, list-property, signup, login

function HowItWorksPage() {
  const { locale } = useLocale();
  useReveal();
  return (
    <div className="page-enter">
      <section className="section">
        <div className="container" style={{ maxWidth: 920 }}>
          <div className="breadcrumbs"><a href="#/">Home</a> · {t("nav.howItWorks", locale)}</div>
          <h1 className="serif" style={{ fontSize: "clamp(44px, 6vw, 72px)", letterSpacing: "-0.025em", margin: "12px 0 16px", lineHeight: 1.05 }}>
            {locale === "pt" ? "Uma ponte entre você e o imóvel global." : "A bridge between you and the global property."}
          </h1>
          <p className="lead" style={{ maxWidth: 720 }}>
            {locale === "pt"
              ? "PonteREI nasceu da ideia de que comprar imóvel em outro continente não deveria exigir um avião, um advogado e uma vida inteira de poupança. Conectamos investidores brasileiros a imóveis curados nos EUA, Brasil e Indonésia — em pedaços ou inteiros."
              : "PonteREI was born from the idea that buying property on another continent shouldn't require a plane, a lawyer, and a lifetime of savings. We connect Brazilian investors to curated properties in the US, Brazil and Indonesia — in shares or whole."}
          </p>

          {/* Bridge illustration */}
          <div style={{ margin: "60px 0", padding: "60px 20px", background: "linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%)", borderRadius: 24, border: "1px solid var(--border)" }}>
            <svg viewBox="0 0 800 280" style={{ width: "100%", height: "auto", maxWidth: 800, display: "block", margin: "0 auto" }}>
              {/* sky */}
              <defs>
                <linearGradient id="bridgeSky" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#F4EFE7"/>
                  <stop offset="100%" stopColor="#FAF7F0"/>
                </linearGradient>
              </defs>
              <rect width="800" height="200" fill="url(#bridgeSky)" />
              <rect y="200" width="800" height="80" fill="#1F3D2E" opacity="0.08" />

              {/* Left tower (you) */}
              <g>
                <rect x="80" y="80" width="60" height="140" fill="#F1B7A4" />
                <rect x="80" y="80" width="60" height="20" fill="#E85D3A" />
                <rect x="92" y="115" width="14" height="14" fill="#FAF7F0" />
                <rect x="116" y="115" width="14" height="14" fill="#FAF7F0" />
                <rect x="92" y="145" width="14" height="14" fill="#FAF7F0" />
                <rect x="116" y="145" width="14" height="14" fill="#FAF7F0" />
                <text x="110" y="248" textAnchor="middle" fontSize="13" fill="#1F3D2E" fontFamily="Cormorant Garamond, serif" fontStyle="italic">{locale === "pt" ? "você" : "you"}</text>
              </g>

              {/* Right tower (the property) */}
              <g>
                <polygon points="640,100 680,60 720,100" fill="#C28E2E" />
                <rect x="640" y="100" width="80" height="120" fill="#E8D8B7" />
                <rect x="660" y="130" width="18" height="22" fill="#1F3D2E" />
                <rect x="688" y="130" width="18" height="22" fill="#1F3D2E" />
                <rect x="660" y="170" width="18" height="22" fill="#1F3D2E" />
                <rect x="688" y="170" width="18" height="22" fill="#1F3D2E" />
                <text x="680" y="248" textAnchor="middle" fontSize="13" fill="#1F3D2E" fontFamily="Cormorant Garamond, serif" fontStyle="italic">{locale === "pt" ? "o imóvel" : "the property"}</text>
              </g>

              {/* Bridge: suspension cables */}
              <path d="M 140 140 Q 400 50 640 140" stroke="#1F3D2E" strokeWidth="3" fill="none" />
              <path d="M 140 160 L 640 160" stroke="#1F3D2E" strokeWidth="6" fill="none" />
              {[200, 260, 320, 380, 440, 500, 560].map((x, i) => {
                const y = 140 + Math.abs(x - 390) * Math.abs(x - 390) / 1100;
                return <line key={i} x1={x} y1={y} x2={x} y2="160" stroke="#1F3D2E" strokeWidth="1.5" opacity="0.6" />;
              })}

              {/* Tiny person crossing */}
              <g>
                <circle cx="380" cy="148" r="4" fill="#E85D3A" />
                <line x1="380" y1="152" x2="380" y2="160" stroke="#1F3D2E" strokeWidth="2" />
                <line x1="380" y1="156" x2="376" y2="160" stroke="#1F3D2E" strokeWidth="1.5" />
                <line x1="380" y1="156" x2="384" y2="160" stroke="#1F3D2E" strokeWidth="1.5" />
              </g>

              <text x="400" y="260" textAnchor="middle" fontSize="14" fill="#1F3D2E" fontFamily="Cormorant Garamond, serif" fontStyle="italic">PonteREI</text>
            </svg>
          </div>

          {/* Detailed steps */}
          {[1, 2, 3, 4, 5].map((n) => (
            <div className="reveal" key={n} style={{ display: "grid", gridTemplateColumns: "80px 1fr", gap: 32, padding: "40px 0", borderBottom: "1px solid var(--border)" }}>
              <div>
                <div className="step-num">{n.toString().padStart(2, "0")}</div>
              </div>
              <div>
                <h2 className="serif" style={{ fontSize: 30, fontWeight: 400, letterSpacing: "-0.015em", margin: "0 0 12px" }}>
                  {t(`howWorksPage.sec${n}Title`, locale)}
                </h2>
                <p style={{ fontSize: 17, color: "var(--text-muted)", lineHeight: 1.65, margin: 0, maxWidth: 620 }}>
                  {t(`howWorksPage.sec${n}Text`, locale)}
                </p>
              </div>
            </div>
          ))}

          <div className="cta-band" style={{ marginTop: 80, borderRadius: 24 }}>
            <div className="text-center">
              <h2 className="serif">{t("cta.title", locale)}</h2>
              <button className="btn btn-primary btn-lg" onClick={() => location.hash = "/signup"}>{t("cta.button", locale)} <Icon.ArrowRight /></button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function AboutPage() {
  const { locale } = useLocale();
  useReveal();
  return (
    <div className="page-enter">
      <section className="section">
        <div className="container" style={{ maxWidth: 920 }}>
          <div className="breadcrumbs"><a href="#/">Home</a> · {t("nav.about", locale)}</div>
          <h1 className="serif" style={{ fontSize: "clamp(44px, 6vw, 72px)", letterSpacing: "-0.025em", margin: "12px 0 16px", lineHeight: 1.05 }}>
            {t("about.title", locale)}
          </h1>
          <p className="lead" style={{ maxWidth: 720 }}>{t("about.lead", locale)}</p>

          <h2 className="serif reveal" style={{ marginTop: 80, fontSize: 38, fontWeight: 400, letterSpacing: "-0.02em", lineHeight: 1.1 }}>
            {t("about.nameTitle", locale)}
          </h2>
          <p className="muted reveal" style={{ fontSize: 17, marginTop: 12, maxWidth: 720, lineHeight: 1.65 }}>{t("about.nameSub", locale)}</p>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 24, marginTop: 40 }}>
            {[1, 2, 3].map((n) => (
              <div className="modality-card reveal" key={n}>
                <div className="modality-icon">{n === 1 ? <Icon.Building /> : n === 2 ? <Icon.Globe /> : <Icon.Heart />}</div>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 400, letterSpacing: "-0.01em", marginBottom: 10 }}>
                  <em>{t(`about.meaning${n}Title`, locale)}</em>
                </h3>
                <p>{t(`about.meaning${n}Desc`, locale)}</p>
              </div>
            ))}
          </div>

          <h2 className="serif reveal" style={{ marginTop: 100, fontSize: 38, fontWeight: 400, letterSpacing: "-0.02em" }}>
            {t("about.teamTitle", locale)}
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 24, marginTop: 32 }}>
            {window.TEAM.map((m, i) => (
              <div className="reveal" key={i} style={{ padding: 24, background: "var(--bg-alt)", borderRadius: 16 }}>
                <img src={m.avatar} alt={m.name} style={{ width: 80, height: 80, borderRadius: "50%", objectFit: "cover", marginBottom: 14 }} loading="lazy" />
                <div style={{ fontFamily: "var(--font-display)", fontSize: 22, letterSpacing: "-0.01em", marginBottom: 4 }}>{m.name}</div>
                <div className="muted" style={{ fontSize: 13, marginBottom: 10 }}>{locale === "pt" ? m.roleP : m.roleE}</div>
                <p style={{ fontSize: 13, lineHeight: 1.55, color: "var(--text-muted)", margin: 0 }}>{locale === "pt" ? m.bioP : m.bioE}</p>
              </div>
            ))}
          </div>

          <div className="reveal" style={{ marginTop: 80, padding: 40, background: "var(--bg-dark)", color: "var(--bg)", borderRadius: 24 }}>
            <div className="eyebrow" style={{ color: "var(--accent)", marginBottom: 14 }}>{t("about.regulation", locale)}</div>
            <p style={{ fontSize: 17, lineHeight: 1.6, margin: 0, opacity: 0.9 }}>{t("about.regulationText", locale)}</p>
          </div>
        </div>
      </section>
    </div>
  );
}

function ListPropertyPage() {
  const { locale } = useLocale();
  useReveal();
  const [form, setForm] = useState({ name: "", email: "", phone: "", country: "", address: "", price: "", type: "house", message: "" });
  const [errs, setErrs] = useState({});
  const update = (k, v) => { setForm((c) => ({ ...c, [k]: v })); if (errs[k]) setErrs((c) => ({ ...c, [k]: undefined })); };

  const submit = (e) => {
    e.preventDefault();
    const e_ = {};
    if (!form.name.trim()) e_.name = t("form.errRequired", locale);
    if (!form.email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e_.email = t("form.errEmailInvalid", locale);
    if (!form.address.trim()) e_.address = t("form.errRequired", locale);
    if (Object.keys(e_).length) return setErrs(e_);
    window.showToast(locale === "pt" ? "Recebemos seu imóvel — nosso time entrará em contato em até 48h." : "We received your property — our team will reach out within 48h.", "success");
    setForm({ name: "", email: "", phone: "", country: "", address: "", price: "", type: "house", message: "" });
  };

  return (
    <div className="page-enter">
      <section className="section">
        <div className="container" style={{ maxWidth: 720 }}>
          <div className="breadcrumbs"><a href="#/">Home</a> · {t("nav.listProperty", locale)}</div>
          <h1 className="serif" style={{ fontSize: "clamp(40px, 5.5vw, 60px)", letterSpacing: "-0.025em", margin: "12px 0 14px", lineHeight: 1.05 }}>
            {t("listProperty.title", locale)}
          </h1>
          <p className="lead">{t("listProperty.sub", locale)}</p>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, margin: "32px 0 48px" }}>
            {[1, 2, 3].map((n) => (
              <div className="reveal" key={n} style={{ padding: 18, background: "var(--bg-alt)", borderRadius: 14 }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 32, color: "var(--accent)", lineHeight: 1, marginBottom: 6 }}>0{n}</div>
                <div style={{ fontWeight: 500, fontSize: 14, marginBottom: 4 }}>{t(`listProperty.benefit${n}Title`, locale)}</div>
                <div style={{ fontSize: 13, color: "var(--text-muted)", lineHeight: 1.5 }}>{t(`listProperty.benefit${n}Text`, locale)}</div>
              </div>
            ))}
          </div>

          <form onSubmit={submit} className="form-stack reveal">
            <div className="field">
              <label>{t("form.name", locale)}</label>
              <input type="text" className="input" value={form.name} onChange={(e) => update("name", e.target.value)} />
              {errs.name && <div className="error">{errs.name}</div>}
            </div>
            <div className="form-row">
              <div className="field">
                <label>{t("form.email", locale)}</label>
                <input type="email" className="input" value={form.email} onChange={(e) => update("email", e.target.value)} />
                {errs.email && <div className="error">{errs.email}</div>}
              </div>
              <div className="field">
                <label>{t("form.phone", locale)}</label>
                <input type="tel" className="input" value={form.phone} onChange={(e) => update("phone", e.target.value)} />
              </div>
            </div>
            <div className="form-row">
              <div className="field">
                <label>locale === "pt" ? "País do imóvel" : "Property country"</label>
                <select className="select" value={form.country} onChange={(e) => update("country", e.target.value)}>
                  <option value="">—</option>
                  <option value="BR">🇧🇷 Brasil</option>
                  <option value="US">🇺🇸 United States</option>
                  <option value="ID">🇮🇩 Indonesia</option>
                  <option value="other">{locale === "pt" ? "Outro" : "Other"}</option>
                </select>
              </div>
              <div className="field">
                <label>locale === "pt" ? "País do imóvel" : "Property country"</label>
                <select className="select" value={form.type} onChange={(e) => update("type", e.target.value)}>
                  <option value="house">{locale === "pt" ? "Casa" : "House"}</option>
                  <option value="apt">{locale === "pt" ? "Apartamento" : "Apartment"}</option>
                  <option value="land">{locale === "pt" ? "Terreno" : "Land"}</option>
                  <option value="comm">{locale === "pt" ? "Comercial" : "Commercial"}</option>
                </select>
              </div>
            </div>
            <div className="field">
              <label>locale === "pt" ? "País do imóvel" : "Property country"</label>
              <input type="text" className="input" value={form.address} onChange={(e) => update("address", e.target.value)} />
              {errs.address && <div className="error">{errs.address}</div>}
            </div>
            <div className="field">
              <label>locale === "pt" ? "País do imóvel" : "Property country"</label>
              <input type="text" className="input" value={form.price} onChange={(e) => update("price", e.target.value)} placeholder={locale === "pt" ? "Ex: R$ 850.000" : "Ex: $250,000"} />
            </div>
            <div className="field">
              <label>locale === "pt" ? "País do imóvel" : "Property country"</label>
              <textarea className="textarea" value={form.message} onChange={(e) => update("message", e.target.value)} placeholder={locale === "pt" ? "Conte sobre o imóvel — destaques, contexto, urgência..." : "Tell us about the property — highlights, context, urgency..."} />
            </div>
            <button type="submit" className="btn btn-primary btn-lg">{t("listProperty.submit", locale)} <Icon.ArrowRight /></button>
          </form>
        </div>
      </section>
    </div>
  );
}

function SignupPage() {
  const { locale } = useLocale();
  useReveal();
  const [form, setForm] = useState({ name: "", email: "", password: "", country: "BR", terms: false });
  const [errs, setErrs] = useState({});
  const [step, setStep] = useState(1);

  const submit = (e) => {
    e.preventDefault();
    const e_ = {};
    if (!form.name.trim()) e_.name = t("form.errRequired", locale);
    if (!form.email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e_.email = t("form.errEmailInvalid", locale);
    if (form.password.length < 8) e_.password = locale === "pt" ? "Mínimo 8 caracteres" : "Minimum 8 characters";
    if (!form.terms) e_.terms = t("form.errRequired", locale);
    if (Object.keys(e_).length) return setErrs(e_);
    setStep(2);
    window.showToast(locale === "pt" ? "Conta criada — confira seu e-mail para verificar." : "Account created — check your email to verify.", "success");
  };

  return (
    <div className="page-enter">
      <section className="section">
        <div className="container" style={{ maxWidth: 480 }}>
          <h1 className="serif" style={{ fontSize: 44, letterSpacing: "-0.02em", margin: "12px 0 14px", lineHeight: 1.05 }}>
            {step === 1 ? t("auth.signUpTitle", locale) : (locale === "pt" ? "Verifique seu e-mail" : "Verify your email")}
          </h1>
          <p className="lead" style={{ fontSize: 16, marginBottom: 32 }}>
            {step === 1 ? t("auth.signUpSub", locale) : (locale === "pt" ? `Enviamos um link para ${form.email}.` : `We sent a link to ${form.email}.`)}
          </p>

          {step === 1 ? (
            <form onSubmit={submit} className="form-stack reveal">
              <div className="field">
                <label>{t("form.name", locale)}</label>
                <input type="text" className="input" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
                {errs.name && <div className="error">{errs.name}</div>}
              </div>
              <div className="field">
                <label>{t("form.email", locale)}</label>
                <input type="email" className="input" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
                {errs.email && <div className="error">{errs.email}</div>}
              </div>
              <div className="field">
                <label>{t("auth.password", locale)}</label>
                <input type="password" className="input" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} />
                {errs.password && <div className="error">{errs.password}</div>}
              </div>
              <div className="field">
                <label>{t("auth.country", locale)}</label>
                <select className="select" value={form.country} onChange={(e) => setForm({ ...form, country: e.target.value })}>
                  <option value="BR">🇧🇷 Brasil</option>
                  <option value="US">🇺🇸 United States</option>
                  <option value="PT">🇵🇹 Portugal</option>
                  <option value="other">{locale === "pt" ? "Outro" : "Other"}</option>
                </select>
              </div>
              <label style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 13, color: "var(--text-muted)", lineHeight: 1.5 }}>
                <input type="checkbox" checked={form.terms} onChange={(e) => setForm({ ...form, terms: e.target.checked })} style={{ marginTop: 3 }} />
                <span>{t("auth.terms", locale)}</span>
              </label>
              {errs.terms && <div className="error">{errs.terms}</div>}
              <button type="submit" className="btn btn-primary btn-lg" style={{ width: "100%" }}>{t("auth.signUp", locale)}</button>
              <div className="text-center muted" style={{ fontSize: 13 }}>{t("auth.haveAccount", locale)} <a href="#/login" style={{ color: "var(--accent)" }}>{t("auth.signIn", locale)}</a></div>
            </form>
          ) : (
            <div className="reveal" style={{ padding: 32, background: "var(--bg-alt)", borderRadius: 18, textAlign: "center" }}>
              <div style={{ fontSize: 48, marginBottom: 16 }}>✉️</div>
              <button className="btn btn-secondary" onClick={() => location.hash = "/"}>{locale === "pt" ? "Voltar para Home" : "Back home"}</button>
            </div>
          )}
        </div>
      </section>
    </div>
  );
}

function LoginPage() {
  const { locale } = useLocale();
  useReveal();
  const [form, setForm] = useState({ email: "", password: "" });
  const [errs, setErrs] = useState({});
  const submit = (e) => {
    e.preventDefault();
    const e_ = {};
    if (!form.email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e_.email = t("form.errEmailInvalid", locale);
    if (!form.password) e_.password = t("form.errRequired", locale);
    if (Object.keys(e_).length) return setErrs(e_);
    window.showToast(locale === "pt" ? "Login realizado." : "Login successful.", "success");
    setTimeout(() => location.hash = "/", 800);
  };
  return (
    <div className="page-enter">
      <section className="section">
        <div className="container" style={{ maxWidth: 440 }}>
          <h1 className="serif" style={{ fontSize: 44, letterSpacing: "-0.02em", margin: "12px 0 14px", lineHeight: 1.05 }}>
            {t("auth.signInTitle", locale)}
          </h1>
          <p className="lead" style={{ marginBottom: 32 }}>{t("auth.signInSub", locale)}</p>
          <form onSubmit={submit} className="form-stack reveal">
            <div className="field">
              <label>{t("form.email", locale)}</label>
              <input type="email" className="input" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
              {errs.email && <div className="error">{errs.email}</div>}
            </div>
            <div className="field">
              <label>{t("auth.password", locale)}</label>
              <input type="password" className="input" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} />
              {errs.password && <div className="error">{errs.password}</div>}
            </div>
            <button type="submit" className="btn btn-primary btn-lg" style={{ width: "100%" }}>{t("auth.signIn", locale)}</button>
            <div className="text-center muted" style={{ fontSize: 13 }}>{t("auth.noAccount", locale)} <a href="#/signup" style={{ color: "var(--accent)" }}>{t("auth.signUp", locale)}</a></div>
          </form>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HowItWorksPage, AboutPage, ListPropertyPage, SignupPage, LoginPage });