/* global React */
// RE/MAX Experts — home bottom: Selling process, Buyer categories, Reviews, Agents, Contact
const DSb = window.REMAXExpertsDesignSystem_a17125;

const CAT = {
  flats: "https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&w=800&q=70",
  houses: "https://images.unsplash.com/photo-1568605114967-8130f3a36994?auto=format&fit=crop&w=800&q=70",
  plots: "https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=800&q=70",
  commercial: "https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=800&q=70",
  map: "https://images.unsplash.com/photo-1524813686514-a57563d77965?auto=format&fit=crop&w=800&q=70",
  agent1: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?auto=format&fit=crop&w=600&q=70",
  agent2: "https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=600&q=70",
  agent3: "https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&w=600&q=70",
  agent4: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=600&q=70",
  agent5: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=600&q=70",
};

function SellingProcess() {
  const { SectionHeading, Button } = DSb;
  const C = window.Container;
  const Icon = window.Icon;
  const steps = [
    ["clipboard-list", "Plan nieruchomości", "Strategia sprzedaży skrojona pod Twój metraż i lokalizację."],
    ["sofa", "Home staging", "Przygotowanie wnętrza, które podnosi wartość oferty."],
    ["camera", "Sesja foto", "Profesjonalne zdjęcia, które zatrzymują uwagę kupujących."],
    ["box", "Wirtualny spacer", "Spacer 3D dostępny dla kupujących o każdej porze."],
    ["megaphone", "Portale + social", "Publikacja na portalach i w mediach społecznościowych."],
    ["layout", "Strona ofertowa", "Dedykowana strona Twojej nieruchomości."],
    ["door-open", "Dni otwarte", "Skoncentrowane prezentacje dla wielu kupujących naraz."],
    ["target", "Kampanie reklamowe", "Płatne kampanie docierające do właściwych odbiorców."],
    ["handshake", "Negocjacje", "Reprezentujemy Twój interes aż do najlepszej ceny."],
    ["file-check", "Finalizacja", "Bezpieczne dopięcie formalności u notariusza."],
  ];
  return (
    <section style={{ background: "var(--surface-page)" }}>
      <C style={{ padding: "var(--section-y) var(--gutter)" }}>
        <SectionHeading eyebrow="Dla sprzedających" title="Sprzedajesz nieruchomość?" lead="Przeprowadzimy Cię przez każdy etap — od wyceny po podpis u notariusza." style={{ marginBottom: "var(--sp-12)" }} />
        <div className="rmx-process" style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: "var(--sp-4)" }}>
          {steps.map(([icon, title, desc], i) => (
            <div key={i} className="rmx-step" style={{
              display: "flex", flexDirection: "column", gap: "var(--sp-3)", padding: "var(--sp-5)",
              border: "1px solid var(--border-subtle)", borderRadius: "var(--r-sm)", background: "#fff",
              transition: "box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out)",
            }}
              onMouseEnter={(e) => { e.currentTarget.style.boxShadow = "var(--shadow-md)"; e.currentTarget.style.borderColor = "transparent"; e.currentTarget.style.transform = "translateY(-3px)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.borderColor = "var(--border-subtle)"; e.currentTarget.style.transform = "none"; }}
            >
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span style={{ width: 44, height: 44, borderRadius: "var(--r-sm)", background: "var(--rmx-navy-12)", color: "var(--rmx-bridge-blue)", display: "grid", placeItems: "center" }}>
                  <Icon name={icon} size={22} />
                </span>
                <span style={{ fontFamily: "var(--font-heading)", fontWeight: "var(--fw-light)", fontSize: "var(--fs-h3)", color: "var(--border-strong)" }}>{String(i + 1).padStart(2, "0")}</span>
              </div>
              <h3 style={{ fontSize: "var(--fs-body)", fontWeight: "var(--fw-medium)", color: "var(--text-heading)", margin: 0 }}>{title}</h3>
              <p style={{ fontSize: "var(--fs-sm)", color: "var(--text-muted)", margin: 0, lineHeight: 1.5 }}>{desc}</p>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: "var(--sp-12)" }}>
          <Button variant="primary" size="lg" iconRight={<Icon name="arrow-right" size={18} />}>Umów się na bezpłatną wycenę</Button>
        </div>
      </C>
    </section>
  );
}

function BuyerCategories() {
  const { SectionHeading } = DSb;
  const C = window.Container;
  const Icon = window.Icon;
  const tiles = [
    { img: CAT.flats, title: "Mieszkania", count: "93 oferty" },
    { img: CAT.houses, title: "Domy", count: "65 ofert" },
    { img: CAT.plots, title: "Działki", count: "50 ofert" },
    { img: CAT.commercial, title: "Lokale użytkowe", count: "21 ofert" },
    { img: CAT.map, title: "Mapa nieruchomości", count: "Zobacz na mapie", map: true },
  ];
  return (
    <section style={{ background: "var(--surface-alt)" }}>
      <C style={{ padding: "var(--section-y) var(--gutter)" }}>
        <SectionHeading eyebrow="Dla kupujących" title="Szukasz nieruchomości w Poznaniu?" lead="Wybierz typ i przeglądaj oferty." style={{ marginBottom: "var(--sp-12)" }} />
        <div className="rmx-cats" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--sp-6)" }}>
          {tiles.map((t, i) => (
            <a key={i} href="#" className={t.map ? "rmx-cat-map" : ""} style={{
              position: "relative", borderRadius: "var(--r-md)", overflow: "hidden", minHeight: 240,
              display: "flex", alignItems: "flex-end", textDecoration: "none", boxShadow: "var(--shadow-sm)",
              gridColumn: t.map ? "span 1" : "auto",
            }}
              onMouseEnter={(e) => { const im = e.currentTarget.querySelector("img"); if (im) im.style.transform = "scale(1.06)"; }}
              onMouseLeave={(e) => { const im = e.currentTarget.querySelector("img"); if (im) im.style.transform = "scale(1)"; }}
            >
              <img src={t.img} alt={t.title} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", transition: "transform var(--dur-slow) var(--ease-out)" }} />
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(transparent 35%, var(--rmx-scrim-navy-70))" }} />
              <div style={{ position: "relative", padding: "var(--sp-6)", color: "#fff" }}>
                <h3 style={{ color: "#fff", fontSize: "var(--fs-h3)", margin: 0 }}>{t.title}</h3>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: "var(--fs-sm)", color: "rgba(255,255,255,0.9)", marginTop: 4 }}>
                  {t.count} <Icon name="arrow-right" size={15} />
                </span>
              </div>
            </a>
          ))}
        </div>
      </C>
    </section>
  );
}

function Reviews() {
  const { SectionHeading, ReviewCard, Rating, Button } = DSb;
  const C = window.Container;
  const Icon = window.Icon;
  const data = [
    { quote: "Profesjonalna obsługa od pierwszego spotkania aż po podpisanie umowy. Czuliśmy się zaopiekowani na każdym etapie.", author: "Jan Kowalski", context: "Kupno mieszkania, Jeżyce", agent: "Anna Stabrowska" },
    { quote: "Sprzedaż mieszkania poszła sprawniej, niż się spodziewaliśmy. Świetne zdjęcia i realna wycena zrobiły różnicę.", author: "Maria Nowak", context: "Sprzedaż, Grunwald", agent: "Paweł Górski" },
    { quote: "Pełen kontakt, zero stresu, mnóstwo cierpliwości przy naszych pytaniach. Polecamy całym sercem.", author: "Tomasz Wiśniewski", context: "Kupno domu, Swarzędz", agent: "Karolina Mazur" },
  ];
  return (
    <section style={{ background: "var(--surface-page)", position: "relative", overflow: "hidden" }}>
      <div className="rmx-slash-rule" style={{ position: "absolute", top: 0, right: -40, width: 180, height: "100%", color: "var(--rmx-red)", opacity: 0.08 }} />
      <C style={{ padding: "var(--section-y) var(--gutter)", position: "relative" }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "var(--sp-3)", textAlign: "center", marginBottom: "var(--sp-12)" }}>
          <span className="rmx-eyebrow">Opinie</span>
          <h2 style={{ fontSize: "var(--fs-h2)" }}>Co mówią o nas klienci</h2>
          <Rating value={4.9} count={256} showScore size={20} />
        </div>
        <div className="rmx-reviews" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--sp-6)" }}>
          {data.map((r, i) => <ReviewCard key={i} {...r} />)}
        </div>
        <div style={{ display: "flex", justifyContent: "center", gap: "var(--sp-4)", marginTop: "var(--sp-10)", flexWrap: "wrap" }}>
          <Button variant="outline" iconRight={<Icon name="external-link" size={16} />}>Przeczytaj wszystkie opinie</Button>
          <Button variant="ghost">Dodaj opinię</Button>
        </div>
      </C>
    </section>
  );
}

function Agents() {
  const { SectionHeading, AgentCard, Button } = DSb;
  const C = window.Container;
  const Icon = window.Icon;
  const people = [
    { photo: CAT.agent1, name: "Anna Stabrowska", phone: "+48 61 225 43 63", email: "a.stabrowska@remaxexperts.pl" },
    { photo: CAT.agent2, name: "Paweł Górski", phone: "+48 61 225 43 63", email: "p.gorski@remaxexperts.pl" },
    { photo: CAT.agent3, name: "Karolina Mazur", phone: "+48 61 225 43 63", email: "k.mazur@remaxexperts.pl" },
    { photo: CAT.agent4, name: "Marek Lewandowski", phone: "+48 61 225 43 63", email: "m.lewandowski@remaxexperts.pl" },
  ];
  return (
    <section style={{ background: "var(--rmx-bridge-blue)" }}>
      <C 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 invert eyebrow="Zespół" title="Poznaj naszych agentów" lead="Kiedy biura mówią o sukcesie, my mówimy o ludziach, którzy go tworzą." />
          <Button variant="primary" iconRight={<Icon name="arrow-right" size={16} />}>Zobacz cały zespół</Button>
        </div>
        <div className="rmx-agents" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--sp-6)" }}>
          {people.map((p, i) => <AgentCard key={i} {...p} />)}
        </div>
      </C>
    </section>
  );
}

function Contact() {
  const { Input, Select, Button } = DSb;
  const C = window.Container;
  const Icon = window.Icon;
  const [sent, setSent] = React.useState(false);
  return (
    <section style={{ background: "var(--surface-alt)" }}>
      <C style={{ padding: "var(--section-y) var(--gutter)" }}>
        <div className="rmx-contact" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--sp-12)", alignItems: "start" }}>
          <div>
            <span className="rmx-eyebrow">Kontakt</span>
            <h2 style={{ fontSize: "var(--fs-h2)", marginTop: "var(--sp-3)" }}>Porozmawiajmy o Twojej nieruchomości</h2>
            <p style={{ color: "var(--text-muted)", fontSize: "var(--fs-lead)", fontWeight: 300, margin: "var(--sp-3) 0 var(--sp-8)" }}>Bezpłatna konsultacja — bez zobowiązań.</p>

            {sent ? (
              <div style={{ display: "flex", gap: 12, alignItems: "center", padding: "var(--sp-6)", background: "var(--rmx-navy-12)", borderRadius: "var(--r-sm)", color: "var(--rmx-dark-blue)" }}>
                <Icon name="check-circle" size={24} style={{ color: "var(--rmx-bridge-blue)" }} />
                <div><strong>Dziękujemy!</strong><br />Oddzwonimy w ciągu 24 godzin.</div>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: "flex", flexDirection: "column", gap: "var(--sp-4)" }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--sp-4)" }}>
                  <Input label="Imię i nazwisko" placeholder="Jan Kowalski" required />
                  <Input label="Telefon" placeholder="+48 ___ ___ ___" required />
                </div>
                <Input label="E-mail" type="email" placeholder="jan@example.com" required />
                <Select label="Temat" placeholder="Wybierz temat" options={["Sprzedaż", "Kupno", "Wynajem", "Wycena", "Inne"]} />
                <label style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: "var(--fs-sm)", color: "var(--text-muted)" }}>
                  <input type="checkbox" required style={{ marginTop: 4, accentColor: "var(--rmx-blue)" }} />
                  <span>Wyrażam zgodę na przetwarzanie danych osobowych zgodnie z <a href="#" style={{ color: "var(--rmx-blue)" }}>polityką prywatności</a>.</span>
                </label>
                <Button variant="primary" size="lg" full type="submit">Wyślij wiadomość</Button>
                <div style={{ 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>
              </form>
            )}
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: "var(--sp-5)" }}>
            <div style={{ borderRadius: "var(--r-md)", overflow: "hidden", boxShadow: "var(--shadow-sm)", aspectRatio: "4 / 3", background: "var(--rmx-blue-08)", position: "relative" }}>
              <img src={CAT.map} alt="Mapa — lokalizacja biura RE/MAX Experts" style={{ width: "100%", height: "100%", objectFit: "cover", filter: "grayscale(0.4)" }} />
              <span style={{ position: "absolute", top: "44%", left: "50%", transform: "translate(-50%,-50%)", color: "var(--accent)", filter: "drop-shadow(0 2px 6px rgba(0,0,0,.4))" }}>
                <Icon name="map-pin" size={40} />
              </span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--sp-5)", background: "#fff", borderRadius: "var(--r-md)", padding: "var(--sp-6)", boxShadow: "var(--shadow-sm)" }}>
              <InfoRow icon="map-pin" title="Adres" lines={["ul. Stanisława Barańczaka 1A/65", "60-537 Poznań"]} />
              <InfoRow icon="clock" title="Godziny" lines={["Pon–Pt: 9:00–17:00"]} />
              <InfoRow icon="phone" title="Telefon" lines={["+48 61 225 43 63"]} />
              <InfoRow icon="mail" title="E-mail" lines={["biuro@remaxexperts.pl"]} />
            </div>
            <div style={{ display: "flex", gap: "var(--sp-3)" }}>
              {["facebook", "instagram", "linkedin", "youtube"].map((s) => (
                <a key={s} href="#" aria-label={s} style={{ width: 42, height: 42, borderRadius: "var(--r-pill)", display: "grid", placeItems: "center", background: "#fff", color: "var(--rmx-bridge-blue)", boxShadow: "var(--shadow-sm)" }}>
                  <Icon name={s} size={18} />
                </a>
              ))}
            </div>
          </div>
        </div>
      </C>
    </section>
  );
}

function InfoRow({ icon, title, lines }) {
  const Icon = window.Icon;
  return (
    <div style={{ display: "flex", gap: 12 }}>
      <span style={{ color: "var(--rmx-bridge-blue)", marginTop: 2 }}><Icon name={icon} size={20} /></span>
      <div>
        <div style={{ fontFamily: "var(--font-heading)", fontWeight: 700, fontSize: "var(--fs-xs)", letterSpacing: "var(--ls-wide)", textTransform: "uppercase", color: "var(--text-muted)", marginBottom: 3 }}>{title}</div>
        {lines.map((l, i) => <div key={i} style={{ fontSize: "var(--fs-sm)", color: "var(--text-body)" }}>{l}</div>)}
      </div>
    </div>
  );
}

Object.assign(window, { SellingProcess, BuyerCategories, Reviews, Agents, Contact });