const DS_pages = window.HomesByJoseSolisDesignSystem_53d05b;

// Web3Forms delivers contact-form submissions to an email inbox. Get a free key
// at https://web3forms.com (enter the email where Jose should receive inquiries),
// paste it below, then commit + redeploy. Until a real key is set, the form will
// report an error on submit.
const WEB3FORMS_ACCESS_KEY = "07e22bae-32bf-4c06-869a-655c0de364ef";

function AboutPage({ onNav }) {
  const { Button, StatBlock, Rating, Badge } = DS_pages;
  const values = ["Discipline", "Integrity", "Dependability", "Loyalty", "Initiative", "Decisiveness"];
  return (
    <div style={{ background: "var(--canvas)", paddingTop: "76px" }}>
      {/* Intro */}
      <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "64px var(--gutter) 56px", display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: "56px", alignItems: "center" }} className="about-page-grid m-sec">
        <div style={{ borderRadius: "var(--radius-xl)", overflow: "hidden", boxShadow: "var(--shadow-lg)", aspectRatio: "4/5" }}>
          <img src="../../assets/jose.png" alt="Jose Solis" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }} />
        </div>
        <div>
          <div style={{ fontFamily: "var(--font-ui)", fontSize: "13px", fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--gold-600)", marginBottom: "16px" }}>About Jose</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "46px", fontWeight: 600, lineHeight: 1.08, color: "var(--ink)", margin: 0, letterSpacing: "-0.02em" }}>
            Hello, I'm Jose Solis.
          </h1>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "17px", lineHeight: 1.75, color: "var(--slate-700)", marginTop: "20px" }}>
            Originally from Pennsylvania, I made Florida my home eight years ago and never looked back. I earned a Business Management degree from Rollins College with high honors and served 15+ years in the military, including time in the Marine Corps and my current role as an Army officer.
          </p>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "17px", lineHeight: 1.75, color: "var(--slate-700)", marginTop: "16px" }}>
            I bring the values I learned through military service to every transaction — discipline, dedication, and loyalty. There's no greater reward to me than helping you become a homeowner and building stronger communities along the way.
          </p>
          <div style={{ margin: "22px 0" }}><Rating value={5} /></div>
          <Button variant="accent" size="lg" onClick={() => onNav("contact")}>Let's work together</Button>
        </div>
      </div>

      {/* Stats band */}
      <div style={{ background: "var(--navy-700)", color: "#fff" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "56px var(--gutter)", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "32px" }} className="stats-band">
          <StatBlock value="Millions" label="In closings" inverse />
          <StatBlock value="15+ yrs" label="Military service" inverse />
          <StatBlock value="18" label="Cities served" inverse />
          <StatBlock value="EN · ES" label="Bilingual" inverse />
        </div>
      </div>

      {/* Values + areas */}
      <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "72px var(--gutter)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "56px" }} className="values-grid m-sec">
        <div>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: "28px", fontWeight: 600, color: "var(--ink)", margin: "0 0 18px" }}>The values I serve by</h2>
          <div style={{ display: "flex", flexWrap: "wrap", gap: "10px" }}>
            {values.map((v) => <Badge key={v} tone="navy" size="md">{v}</Badge>)}
          </div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "15.5px", lineHeight: 1.7, color: "var(--slate-500)", marginTop: "20px" }}>
            Outside of real estate, I enjoy cycling the Cross Seminole Trail, working on home projects, and learning languages — I can hold a conversation in French, German, Italian, and Japanese.
          </p>
        </div>
        <div>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: "28px", fontWeight: 600, color: "var(--ink)", margin: "0 0 18px" }}>Areas I serve</h2>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 24px" }}>
            {window.AREAS.map((a) => (
              <div key={a} style={{ display: "flex", alignItems: "center", gap: "9px", fontFamily: "var(--font-ui)", fontSize: "15px", color: "var(--slate-700)", padding: "4px 0" }}>
                <Icon name="check" size={16} stroke="var(--success-600)" /> {a}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function ContactPage({ onNav }) {
  const { Button, Input } = DS_pages;
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState("");
  const methods = [
    { icon: "phone", label: "Call or text", value: "407-692-4587" },
    { icon: "mail", label: "Email", value: "jose.solistheflrealtor@gmail.com" },
    { icon: "mapPin", label: "Brokerage", value: "La Rosa Realty · Lake Nona, FL" },
  ];
  return (
    <div style={{ background: "var(--canvas)", paddingTop: "76px" }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "64px var(--gutter) 92px", display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: "56px", alignItems: "start" }} className="contact-grid m-sec">
        <div>
          <div style={{ fontFamily: "var(--font-ui)", fontSize: "13px", fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--gold-600)", marginBottom: "16px" }}>Get in touch</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "44px", fontWeight: 600, lineHeight: 1.1, color: "var(--ink)", margin: 0, letterSpacing: "-0.02em" }}>Let's start the conversation</h1>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "17px", lineHeight: 1.7, color: "var(--slate-700)", marginTop: "18px", maxWidth: "440px" }}>
            Buying, selling, or just have questions about the market? Reach out and I'll get back to you personally — usually the same day.
          </p>
          <div style={{ marginTop: "32px", display: "flex", flexDirection: "column", gap: "16px" }}>
            {methods.map((m) => (
              <div key={m.label} style={{ display: "flex", gap: "16px", alignItems: "center" }}>
                <span style={{ width: "50px", height: "50px", borderRadius: "var(--radius-md)", background: "var(--navy-700)", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
                  <Icon name={m.icon} size={22} stroke="var(--gold-400)" />
                </span>
                <div>
                  <div style={{ fontFamily: "var(--font-ui)", fontSize: "12.5px", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--slate-400)" }}>{m.label}</div>
                  <div style={{ fontFamily: "var(--font-ui)", fontSize: "16px", fontWeight: 600, color: "var(--ink)", marginTop: "3px" }}>{m.value}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: "24px", fontFamily: "var(--font-ui)", fontSize: "14px", color: "var(--slate-500)" }}>
            Want to enter the raffle?{" "}
            <a href="https://docs.google.com/forms/d/e/1FAIpQLSefd7-3Jdbx3hgMfFsaGICHANOX-PeURi8xm_vyrbuSfafXGA/viewform" target="_blank" rel="noopener noreferrer"
              style={{ color: "var(--navy-700)", fontWeight: 700, textDecoration: "underline", textUnderlineOffset: "3px" }}>
              Raffle entry form
            </a>
          </div>
          <div style={{ marginTop: "32px" }}>
            <div style={{ fontFamily: "var(--font-ui)", fontSize: "12.5px", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--slate-400)", marginBottom: "14px" }}>Follow along</div>
            <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
              {window.SOCIALS.map((s) => (
                <a key={s.name} href={s.url} target="_blank" rel="noopener noreferrer" aria-label={s.name} title={s.name}
                  style={{ width: "46px", height: "46px", borderRadius: "var(--radius-md)", background: "var(--navy-700)", display: "flex", alignItems: "center", justifyContent: "center", textDecoration: "none" }}>
                  <Icon name={s.icon} size={20} stroke={s.icon === "tiktok" ? "none" : "var(--gold-400)"} fill={s.icon === "tiktok" ? "var(--gold-400)" : "none"} />
                </a>
              ))}
            </div>
          </div>
        </div>

        <div style={{ background: "#fff", border: "1px solid var(--line)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-lg)", padding: "36px" }}>
          {sent ? (
            <div style={{ textAlign: "center", padding: "40px 20px" }}>
              <span style={{ width: "64px", height: "64px", borderRadius: "var(--radius-pill)", background: "var(--success-100)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: "20px" }}>
                <Icon name="check" size={30} stroke="var(--success-600)" strokeWidth={2.2} />
              </span>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: "24px", fontWeight: 600, color: "var(--ink)", margin: "0 0 8px" }}>Message sent!</h3>
              <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", color: "var(--slate-500)", margin: "0 0 24px" }}>Thanks for reaching out. Jose will be in touch shortly.</p>
              <Button variant="secondary" onClick={() => setSent(false)}>Send another</Button>
            </div>
          ) : (
            <form
              onSubmit={async (e) => {
                e.preventDefault();
                const formEl = e.target;
                setError("");
                setSending(true);
                try {
                  const res = await fetch("https://api.web3forms.com/submit", {
                    method: "POST",
                    body: new FormData(formEl),
                  });
                  const data = await res.json();
                  if (data.success) {
                    setSent(true);
                    formEl.reset();
                  } else {
                    setError(data.message || "Something went wrong. Please try again, or call 407-692-4587.");
                  }
                } catch (err) {
                  setError("Couldn't send right now. Please try again, or call 407-692-4587.");
                } finally {
                  setSending(false);
                }
              }}
              style={{ display: "flex", flexDirection: "column", gap: "18px" }}
            >
              <input type="hidden" name="access_key" value={WEB3FORMS_ACCESS_KEY} />
              <input type="hidden" name="subject" value="New inquiry from Homes by Jose Solis" />
              <input type="hidden" name="from_name" value="Homes by Jose Solis website" />
              {/* Honeypot: bots fill this hidden field; Web3Forms flags it as spam. */}
              <input type="checkbox" name="botcheck" style={{ display: "none" }} tabIndex={-1} autoComplete="off" />
              <div className="form-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px" }}>
                <Input label="Full name" name="name" placeholder="Your name" required />
                <Input label="Phone" name="phone" placeholder="(407) 000-0000" />
              </div>
              <Input label="Email" name="email" type="email" placeholder="you@example.com" required />
              <label style={{ display: "flex", flexDirection: "column", gap: "7px", fontFamily: "var(--font-ui)" }}>
                <span style={{ fontSize: "13px", fontWeight: 600, color: "var(--slate-700)" }}>How can I help?</span>
                <textarea name="message" rows={4} required placeholder="Tell me a little about what you're looking for…" style={{ border: "1px solid var(--line)", borderRadius: "var(--radius-sm)", padding: "12px 14px", fontFamily: "var(--font-ui)", fontSize: "15px", resize: "vertical", outline: "none", color: "var(--ink)" }} />
              </label>
              {error ? <div style={{ color: "var(--danger-600)", fontSize: "13.5px", fontFamily: "var(--font-ui)", fontWeight: 600 }}>{error}</div> : null}
              <Button type="submit" variant="accent" size="lg" block disabled={sending}>{sending ? "Sending…" : "Send Message"}</Button>
            </form>
          )}
        </div>
      </div>
    </div>
  );
}

function TestimonialsPage({ onNav, onPlay }) {
  const { Button, Rating, StatBlock } = DS_pages;
  const items = window.TESTIMONIALS;
  const reviews = window.GOOGLE_REVIEWS || [];
  return (
    <div style={{ background: "var(--canvas)", paddingTop: "76px" }}>
      {/* Header */}
      <div style={{ background: "var(--navy-700)", color: "#fff" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "56px var(--gutter) 60px", textAlign: "center" }}>
          <div style={{ fontFamily: "var(--font-ui)", fontSize: "13px", fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--gold-400)", marginBottom: "16px" }}>Client stories</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "46px", fontWeight: 600, margin: 0, letterSpacing: "-0.02em", lineHeight: 1.1 }}>Hear it from my clients</h1>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "18px", color: "rgba(255,255,255,0.82)", marginTop: "16px", maxWidth: "560px", marginInline: "auto", lineHeight: 1.6 }}>
            Buying or selling a home is personal. Watch families across Central Florida share their experience working with me.
          </p>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "14px", marginTop: "28px", flexWrap: "wrap" }}>
            <div style={{ display: "inline-flex", alignItems: "center", gap: "14px", background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.16)", borderRadius: "var(--radius-pill)", padding: "12px 22px" }}>
              <Rating value={5} size={20} />
              <span style={{ fontFamily: "var(--font-ui)", fontSize: "15px", fontWeight: 700, color: "#fff" }}>Five-star rated</span>
            </div>
            <a href={window.GOOGLE_REVIEWS_URL} target="_blank" rel="noopener noreferrer"
              style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", borderRadius: "var(--radius-pill)", padding: "12px 22px", background: "rgba(255,255,255,0.12)", border: "1px solid rgba(255,255,255,0.20)", color: "#fff", textDecoration: "none", fontFamily: "var(--font-ui)", fontSize: "14px", fontWeight: 700 }}>
              Read Google reviews
            </a>
          </div>
        </div>
      </div>

      {/* Google reviews */}
      <div className="m-sec" style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "64px var(--gutter) 0" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "20px" }}>
          {reviews.map((r) => (
            <div key={r.name} style={{ background: "#fff", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-sm)", padding: "24px" }}>
              <div style={{ display: "flex", gap: "6px", marginBottom: "14px" }} aria-label="5 out of 5 stars">
                {Array.from({ length: 5 }).map((_, i) => (
                  <span key={i} style={{ color: "var(--gold-500)", fontSize: "18px" }}>★</span>
                ))}
              </div>
              <p style={{ fontFamily: "var(--font-body)", fontSize: "15.5px", lineHeight: 1.7, color: "var(--slate-700)", margin: "0 0 18px", fontStyle: "italic" }}>
                “{r.quote}”
              </p>
              <div style={{ fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: "14px", color: "var(--navy-700)" }}>{r.name}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Video grid */}
      <div className="m-sec" style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "40px var(--gutter) 40px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "24px" }} className="testimonial-grid">
          {items.map((t) => (
            <VideoTestimonialCard key={t.name} t={t} onPlay={onPlay} compact />
          ))}
        </div>
      </div>

      {/* CTA strip */}
      <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter) 80px" }}>
        <div style={{ background: "var(--sand)", borderRadius: "var(--radius-xl)", padding: "48px", textAlign: "center" }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: "30px", fontWeight: 600, color: "var(--ink)", margin: "0 0 10px", letterSpacing: "-0.015em" }}>Ready to write your own story?</h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "16.5px", color: "var(--slate-600)", margin: "0 0 26px", maxWidth: "480px", marginInline: "auto" }}>Let's talk about your move — no pressure, just honest guidance.</p>
          <Button variant="accent" size="lg" onClick={() => onNav("contact")} iconRight={<Icon name="arrowRight" size={18} stroke="var(--text-on-accent)" />}>Get in touch</Button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AboutPage, ContactPage, TestimonialsPage });