/* global React */
// RE/MAX Experts — home top: Hero + search, Trust bar, Featured listings, Owner quote
const DSt = window.REMAXExpertsDesignSystem_a17125;

const IMG = {
  hero: "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1900&q=75",
  owner: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=900&q=75",
  p1: "https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?auto=format&fit=crop&w=800&q=70",
  p2: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=800&q=70",
  p3: "https://images.unsplash.com/photo-1493809842364-78817add7ffb?auto=format&fit=crop&w=800&q=70",
  p4: "https://images.unsplash.com/photo-1572120360610-d971b9d7767c?auto=format&fit=crop&w=800&q=70",
};

function Container({ children, style }) {
  return <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)", ...style }}>{children}</div>;
}

function Hero() {
  const { Button, Select, Rating } = DSt;
  const Icon = window.Icon;
  return (
    <section style={{ position: "relative", color: "#fff", overflow: "hidden" }}>
      <img src={IMG.hero} alt="Nowoczesne wnętrze nieruchomości w Poznaniu" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, var(--rmx-scrim-navy-70) 0%, var(--rmx-scrim-navy-40) 45%, transparent 100%)" }} />
      <Container style={{ position: "relative", paddingTop: "var(--sp-24)", paddingBottom: "var(--sp-20)" }}>
        <div style={{ maxWidth: 640, display: "flex", flexDirection: "column", gap: "var(--sp-5)" }}>
          <span style={{ fontFamily: "var(--font-heading)", fontWeight: "var(--fw-medium)", fontSize: "var(--fs-xs)", letterSpacing: "var(--ls-eyebrow)", textTransform: "uppercase", color: "var(--rmx-sky)" }}>
            RE/MAX Experts · Poznań
          </span>
          <h1 style={{ fontSize: "var(--fs-display)", lineHeight: "var(--lh-tight)", color: "#fff", letterSpacing: "var(--ls-tight)" }}>
            Biuro, które polecasz bliskim.
          </h1>
          <p style={{ fontSize: "var(--fs-lead)", fontWeight: 300, color: "rgba(255,255,255,0.9)", maxWidth: 520, margin: 0 }}>
            Nieruchomości w Poznaniu i okolicach — sprzedaż, kupno, wynajem.
          </p>
          <div style={{ display: "flex", gap: "var(--sp-3)", flexWrap: "wrap", alignItems: "center" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "rgba(255,255,255,0.14)", backdropFilter: "blur(6px)", padding: "8px 14px", borderRadius: "var(--r-pill)" }}>
              <Rating value={4.9} invert size={15} /> <strong style={{ fontFamily: "var(--font-heading)", fontSize: "var(--fs-sm)" }}>256 opinii Google</strong>
            </span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "rgba(255,255,255,0.14)", backdropFilter: "blur(6px)", padding: "8px 14px", borderRadius: "var(--r-pill)", fontFamily: "var(--font-heading)", fontWeight: "var(--fw-medium)", fontSize: "var(--fs-sm)" }}>
              <Icon name="award" size={16} style={{ color: "var(--rmx-sky)" }} /> 12 lat w Poznaniu
            </span>
          </div>
        </div>

        <div style={{ marginTop: "var(--sp-10)", background: "#fff", borderRadius: "var(--r-md)", boxShadow: "var(--shadow-lg)", padding: "var(--sp-5)", maxWidth: 920 }}>
          <div className="rmx-search" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr auto", gap: "var(--sp-3)", alignItems: "end" }}>
            <Select label="Typ nieruchomości" placeholder="Wszystkie" options={["Mieszkania", "Domy", "Działki", "Lokale"]} />
            <Select label="Oferta" placeholder="Sprzedaż / Wynajem" options={["Sprzedaż", "Wynajem"]} />
            <Select label="Lokalizacja" placeholder="Poznań i okolice" options={["Poznań — Jeżyce", "Poznań — Grunwald", "Poznań — Wilda", "Swarzędz", "Luboń"]} />
            <Select label="Cena maks." placeholder="bez limitu" options={["400 000 zł", "600 000 zł", "800 000 zł", "1 200 000 zł"]} />
            <Button variant="primary" size="md" iconLeft={<Icon name="search" size={16} />} style={{ height: 48 }}>Szukaj</Button>
          </div>
          <div style={{ marginTop: "var(--sp-3)", fontSize: "var(--fs-sm)", color: "var(--text-muted)" }}>
            Lub zadzwoń: <a href="tel:+48612254363" style={{ color: "var(--rmx-bridge-blue)", fontWeight: 700 }}>+48 61 225 43 63</a>
          </div>
        </div>
      </Container>
    </section>
  );
}

function TrustBar() {
  const { StatItem } = DSt;
  const Icon = window.Icon;
  const stats = [
    { v: "12", l: "lat w Poznaniu", i: "building-2" },
    { v: "238+", l: "zrealizowanych transakcji", i: "key-round" },
    { v: "256", l: "opinii Google · ★ 4.9", i: "star" },
    { v: "140", l: "krajów sieci RE/MAX", i: "globe" },
  ];
  return (
    <section style={{ background: "var(--rmx-bridge-blue)" }}>
      <Container style={{ padding: "var(--sp-16) var(--gutter)" }}>
        <div className="rmx-stats" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--sp-10)" }}>
          {stats.map((s) => (
            <StatItem key={s.l} value={s.v} label={s.l} icon={<Icon name={s.i} size={26} />} />
          ))}
        </div>
      </Container>
    </section>
  );
}

function Featured() {
  const { SectionHeading, PropertyCard, Button } = DSt;
  const Icon = window.Icon;
  const items = [
    { image: IMG.p1, title: "Mieszkanie 3-pok.", location: "Poznań, Jeżyce", area: 65, rooms: 3, price: "520 000 zł", offer: "sale", offerLabel: "Sprzedaż", openHouse: "15.07" },
    { image: IMG.p2, title: "Dom z ogrodem", location: "Swarzędz", area: 142, rooms: 5, price: "1 290 000 zł", offer: "sale", offerLabel: "Sprzedaż" },
    { image: IMG.p3, title: "Apartament z tarasem", location: "Poznań, Stare Miasto", area: 88, rooms: 4, price: "4 200 zł / mc", offer: "rent", offerLabel: "Wynajem" },
    { image: IMG.p4, title: "Kawalerka po remoncie", location: "Poznań, Wilda", area: 32, rooms: 1, price: "389 000 zł", offer: "sale", offerLabel: "Sprzedaż" },
  ];
  return (
    <section style={{ background: "var(--surface-page)" }}>
      <Container style={{ padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: "var(--sp-6)", flexWrap: "wrap", marginBottom: "var(--sp-12)" }}>
          <SectionHeading eyebrow="Oferty" title="Wyróżniające się oferty" lead="Sprawdź nieruchomości, które przyciągają najwięcej uwagi." />
          <Button variant="link" iconRight={<Icon name="arrow-right" size={16} />}>Zobacz wszystkie oferty</Button>
        </div>
        <div className="rmx-cards-4" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--sp-6)" }}>
          {items.map((it, i) => <PropertyCard key={i} {...it} />)}
        </div>
      </Container>
    </section>
  );
}

function OwnerQuote() {
  const Icon = window.Icon;
  return (
    <section style={{ background: "var(--surface-alt)", position: "relative", overflow: "hidden" }}>
      <Container style={{ padding: "var(--section-y) var(--gutter)" }}>
        <div className="rmx-quote" style={{ display: "grid", gridTemplateColumns: "5fr 7fr", gap: "var(--sp-16)", alignItems: "center" }}>
          <div style={{ position: "relative", aspectRatio: "4 / 5", borderRadius: "var(--r-md)", overflow: "hidden", boxShadow: "var(--shadow-md)" }}>
            <img src={IMG.owner} alt="Elżbieta Zakrzewska, właścicielka RE/MAX Experts" style={{ width: "100%", height: "100%", objectFit: "cover", filter: "grayscale(0.15)" }} />
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--sp-6)" }}>
            <Icon name="quote" size={48} style={{ color: "var(--rmx-sky)" }} />
            <blockquote style={{ margin: 0, fontSize: "var(--fs-h3)", lineHeight: 1.45, fontStyle: "italic", color: "var(--rmx-dark-blue)", fontWeight: 400, maxWidth: 620 }}>
              „Stworzyłam to biuro, bo wierzę, że każdy człowiek zasługuje na kogoś, kto go naprawdę wysłucha — zanim jeszcze zacznie działać.”
            </blockquote>
            <div>
              <div style={{ fontFamily: "var(--font-heading)", fontWeight: 700, fontSize: "var(--fs-body)", color: "var(--text-heading)" }}>Elżbieta Zakrzewska</div>
              <div style={{ fontSize: "var(--fs-sm)", color: "var(--text-muted)" }}>Właścicielka RE/MAX Experts · Agentka z 12-letnim doświadczeniem</div>
            </div>
            <a href="#" style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--rmx-blue)", fontWeight: 700, fontFamily: "var(--font-heading)", fontSize: "var(--fs-sm)" }}>
              Poznaj naszą historię <Icon name="arrow-right" size={16} />
            </a>
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { Hero, TrustBar, Featured, OwnerQuote, Container });