const DS_home = window.HomesByJoseSolisDesignSystem_53d05b;

function Hero({ onNav, onSearch }) {
  const { Button } = DS_home;
  return (
    <section style={{ position: "relative", minHeight: "92vh", display: "flex", alignItems: "center", marginTop: "-76px" }}>
      <img src="../../assets/house.jpg" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(105deg, rgba(12,26,51,0.86) 0%, rgba(12,26,51,0.55) 48%, rgba(12,26,51,0.25) 100%)" }} />
      <div className="m-hero" style={{ position: "relative", maxWidth: "var(--container)", margin: "0 auto", padding: "120px var(--gutter) 64px", width: "100%" }}>
        <div style={{ maxWidth: "660px" }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: "9px", background: "rgba(255,255,255,0.12)", border: "1px solid rgba(255,255,255,0.2)", borderRadius: "var(--radius-pill)", padding: "7px 15px", marginBottom: "26px" }}>
            <Icon name="shield" size={15} stroke="var(--gold-400)" />
            <span style={{ fontFamily: "var(--font-ui)", fontSize: "12.5px", fontWeight: 600, letterSpacing: "0.04em", color: "#fff" }}>Veteran-owned · Greater Orlando REALTOR®</span>
          </div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "60px", lineHeight: 1.04, fontWeight: 600, color: "#fff", margin: 0, letterSpacing: "-0.02em" }}>
            Find your place<br />in the Sunshine State.
          </h1>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "20px", lineHeight: 1.55, color: "rgba(255,255,255,0.88)", marginTop: "22px", maxWidth: "560px" }}>
            Hi, I'm Jose — a current Army officer, former Marine, and full-time realtor helping families buy, sell, lease, and build rental portfolios across Central Florida.
          </p>

          <div style={{ display: "flex", gap: "13px", marginTop: "32px", flexWrap: "wrap" }}>
            <Button variant="accent" size="lg" onClick={() => onNav("contact")} iconRight={<Icon name="arrowRight" size={18} stroke="var(--text-on-accent)" />}>Schedule a Tour</Button>
            <Button variant="secondary" size="lg" onClick={() => onNav("about")}
              style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "10px", fontFamily: "var(--font-ui)", fontWeight: 600, letterSpacing: "0.005em", lineHeight: 1, padding: "16px 30px", fontSize: "16.5px", borderRadius: "var(--radius-sm)", cursor: "pointer", background: "transparent", color: "#fff", border: "1.5px solid rgba(255,255,255,0.7)" }}>Meet Jose</Button>
          </div>

          <div style={{ display: "flex", alignItems: "center", gap: "22px", marginTop: "40px", flexWrap: "wrap" }}>
            {[{ v: "Millions", l: "In closings" }, { v: "15+ yrs", l: "Military service" }, { v: "EN · ES", l: "Bilingual" }].map((s, i) => (
              <React.Fragment key={s.l}>
                {i > 0 && <span style={{ width: "1px", height: "34px", background: "rgba(255,255,255,0.25)" }} />}
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: "26px", fontWeight: 600, color: "#fff", lineHeight: 1 }}>{s.v}</div>
                  <div style={{ fontFamily: "var(--font-ui)", fontSize: "11.5px", fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--gold-400)", marginTop: "6px" }}>{s.l}</div>
                </div>
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Services({ onNav }) {
  const { SectionHeading } = DS_home;
  return (
    <section className="m-sec" style={{ background: "var(--surface)", padding: "92px var(--gutter)", borderTop: "1px solid var(--line)" }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
        <SectionHeading align="center" eyebrow="How I can help" title="Full-service real estate, start to finish" intro="One trusted point of contact for every part of your move." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "22px", marginTop: "52px" }} className="services-grid">
          {window.SERVICES.map((s) => (
            <div key={s.title} style={{ background: "var(--canvas)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", padding: "28px" }}>
              <span style={{ width: "52px", height: "52px", borderRadius: "var(--radius-md)", background: "var(--navy-700)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: "20px" }}>
                <Icon name={s.icon} size={24} stroke="var(--gold-400)" />
              </span>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: "20px", fontWeight: 600, color: "var(--ink)", margin: "0 0 10px" }}>{s.title}</h3>
              <p style={{ fontFamily: "var(--font-body)", fontSize: "14.5px", lineHeight: 1.65, color: "var(--slate-500)", margin: 0 }}>{s.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutBand({ onNav }) {
  const { Button, StatBlock, Rating } = DS_home;
  return (
    <section style={{ background: "var(--sand)", padding: "0", overflow: "hidden" }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto", display: "grid", gridTemplateColumns: "0.95fr 1.05fr", gap: "0", alignItems: "stretch" }} className="about-grid">
        <div style={{ position: "relative", minHeight: "560px" }}>
          <img src="../../assets/jose.png" alt="Jose Solis" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "top center" }} />
        </div>
        <div style={{ padding: "84px 64px" }} className="about-copy">
          <div style={{ fontFamily: "var(--font-ui)", fontSize: "13px", fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--gold-600)", marginBottom: "16px" }}>Meet your realtor</div>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: "38px", fontWeight: 600, lineHeight: 1.14, color: "var(--ink)", margin: 0, letterSpacing: "-0.015em" }}>
            Discipline of service, warmth of a neighbor.
          </h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "16.5px", lineHeight: 1.7, color: "var(--slate-700)", marginTop: "20px" }}>
            After 15+ years of military service, including time in the Marine Corps and my current role as an Army officer, and a Business Management degree from Rollins College, I bring discipline, integrity, and accountability to one of the biggest decisions of your life. I also help owners lease homes, screen tenants, and build rental portfolios with a clear strategy and strong numbers behind every decision.
          </p>
          <div style={{ margin: "22px 0 6px" }}><Rating value={5} /></div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "24px", margin: "30px 0 32px", paddingTop: "28px", borderTop: "1px solid var(--navy-200)" }}>
            <StatBlock value="Millions" label="In closings" />
            <StatBlock value="15+ yrs" label="Military service" />
            <StatBlock value="EN · ES" label="Bilingual" />
          </div>
          <Button variant="primary" size="lg" onClick={() => onNav("about")} iconRight={<Icon name="arrowRight" size={18} stroke="#fff" />}>Read my story</Button>
        </div>
      </div>
    </section>
  );
}

function Testimonials({ onNav, onPlay }) {
  const { SectionHeading, Rating, Button } = DS_home;
  const items = window.TESTIMONIALS.slice(0, 3);
  return (
    <section className="m-sec" style={{ background: "var(--surface)", padding: "92px var(--gutter)", borderTop: "1px solid var(--line)" }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: "24px", flexWrap: "wrap", marginBottom: "12px" }}>
          <SectionHeading eyebrow="Client stories" title="Hear it from my clients" intro="Short video stories from buyers and sellers across Central Florida." />
          <div style={{ display: "flex", alignItems: "center", gap: "12px", background: "var(--gold-100)", border: "1px solid var(--gold-200)", borderRadius: "var(--radius-pill)", padding: "10px 18px" }}>
            <Rating value={5} size={18} />
            <span style={{ fontFamily: "var(--font-ui)", fontSize: "14px", fontWeight: 700, color: "var(--gold-700)" }}>Five-star rated</span>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "24px", marginTop: "44px" }} className="testimonial-grid">
          {items.map((t) => (
            <VideoTestimonialCard key={t.name} t={t} onPlay={onPlay} compact />
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: "44px" }}>
          <Button variant="secondary" size="lg" onClick={() => onNav("testimonials")} iconRight={<Icon name="arrowRight" size={17} />}>Watch all stories</Button>
        </div>
      </div>
    </section>
  );
}

function HomePage({ onNav, onPlay }) {
  return (
    <div>
      <Hero onNav={onNav} />
      <Services onNav={onNav} />
      <AboutBand onNav={onNav} />
      <Testimonials onNav={onNav} onPlay={onPlay} />
    </div>
  );
}

Object.assign(window, { HomePage });