/* global React, PbIcon */

function VoorWieTiles() {
  const tiles = [
    {
      icon: "building-2",
      title: "Bedrijfsverzamelgebouwen",
      body: "Eén gebouw, meerdere ondernemers, één beheerder die rust wil. AI sorteert per unit en houdt iedereen op de hoogte.",
    },
    {
      icon: "briefcase",
      title: "Kantoor- en bedrijfspanden",
      body: "Voor beheerders met portfolio's tot 30 units. Schaal zonder admin-explosie. Eigenaren krijgen automatisch een briefing.",
    },
    {
      icon: "home",
      title: "Kleine vastgoedportefeuilles",
      body: "Eigenaar-beheerders die geen grote-jongens-software willen, maar wel professioneel willen werken. Werk en privé gescheiden.",
    },
  ];
  return (
    <section style={{ background: "#fff", padding: "100px 32px" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <h2 style={{
          fontFamily: "var(--font-display)", fontWeight: 500,
          fontSize: 52, lineHeight: 1.05, letterSpacing: "-0.02em",
          color: "var(--fg-1)", margin: "0 0 56px 0", maxWidth: 760,
        }}>Gemaakt voor wie het echte werk doet.</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {tiles.map(t => (
            <div key={t.title} style={{
              background: "#fff", border: "1px solid var(--border-default)", borderRadius: 12,
              padding: 28, display: "flex", flexDirection: "column", gap: 14, minHeight: 220,
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 10,
                background: "rgba(127,233,197,0.30)",
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                <PbIcon name={t.icon} size={22} color="var(--color-forest)" />
              </div>
              <h3 style={{ fontSize: 18, fontWeight: 600, color: "var(--fg-1)", letterSpacing: "-0.01em", margin: 0 }}>{t.title}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--fg-2)", margin: 0 }}>{t.body}</p>
              <a href="voor-wie.html" style={{ fontSize: 13, fontWeight: 500, color: "var(--color-forest)", border: 0, marginTop: "auto", display: "inline-flex", alignItems: "center", gap: 4, textDecoration: "none" }}>
                Lees meer
                <PbIcon name="chevron-right" size={12} />
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Benefits() {
  const items = [
    { icon: "clock", title: "Bespaar 6+ uur per week", body: "Geen telefoontjes, geen WhatsApp-chaos, geen e-mails die in spam belanden." },
    { icon: "file-check", title: "Auditklaar zonder moeite", body: "Elke melding, elke actie, elke factuur — automatisch vastgelegd." },
    { icon: "smile", title: "Tevreden huurders", body: "Antwoord binnen seconden, ook 's avonds en in het weekend." },
    { icon: "bar-chart", title: "Eigenaren zonder vragen", body: "Maandelijkse briefings automatisch in hun mailbox." },
  ];
  return (
    <section style={{ background: "var(--bg-cream)", padding: "100px 32px" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <h2 style={{
          fontFamily: "var(--font-display)", fontWeight: 500,
          fontSize: 52, lineHeight: 1.05, letterSpacing: "-0.02em",
          color: "var(--fg-1)", margin: "0 0 56px 0", maxWidth: 720,
        }}>Wat het oplevert.</h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          {items.map(it => (
            <div key={it.title} style={{
              background: "#fff", border: "1px solid var(--border-default)", borderRadius: 12,
              padding: "32px 32px 32px 32px", display: "flex", gap: 20, alignItems: "flex-start",
            }}>
              <div style={{ width: 48, height: 48, borderRadius: 10, background: "rgba(127,233,197,0.30)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                <PbIcon name={it.icon} size={24} color="var(--color-forest)" />
              </div>
              <div>
                <h3 style={{ fontSize: 20, fontWeight: 600, color: "var(--fg-1)", letterSpacing: "-0.01em", margin: "4px 0 8px 0" }}>{it.title}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--fg-2)", margin: 0 }}>{it.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SocialProof() {
  return (
    <section style={{ background: "#fff", padding: "100px 32px" }}>
      <div style={{ maxWidth: 760, margin: "0 auto", textAlign: "center" }}>
        <PbIcon name="message-circle" size={32} color="var(--color-pandbeer-green)" strokeWidth={1.2} style={{ margin: "0 auto 24px" }} />
        <p style={{
          fontFamily: "var(--font-display)", fontWeight: 500, fontStyle: "italic",
          fontSize: 30, lineHeight: 1.3, letterSpacing: "-0.015em",
          color: "var(--fg-1)", margin: 0, textWrap: "balance",
        }}>
          "Ik dacht dat AI overhyped was. Tot ik op een zondagavond niet meer gebeld werd over een verstopte WC. Pandbeer had het al opgelost."
        </p>
        <div style={{ marginTop: 36, display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{ width: 44, height: 44, borderRadius: 999, background: "linear-gradient(135deg, #B8C5A0 0%, #6B7A52 100%)", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontWeight: 600, fontSize: 14 }}>BdV</div>
            <div style={{ textAlign: "left" }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: "var(--fg-1)" }}>Bart de Vries</div>
              <div style={{ fontSize: 13, color: "var(--fg-3)" }}>Beheerder, Bedrijfsverzamelgebouw De Basis</div>
            </div>
          </div>
        </div>
        {/* customer logo strip */}
        <div style={{ marginTop: 56, paddingTop: 36, borderTop: "1px solid var(--border-subtle)" }}>
          <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--fg-3)", marginBottom: 20 }}>
            Vertrouwd door beheerders in
          </div>
          <div style={{ display: "flex", justifyContent: "center", alignItems: "center", gap: 40, flexWrap: "wrap", color: "var(--fg-3)", fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 500, letterSpacing: "-0.01em", opacity: 0.7 }}>
            <span>Leeuwarden</span>
            <span>·</span>
            <span>Groningen</span>
            <span>·</span>
            <span>Zwolle</span>
            <span>·</span>
            <span>Apeldoorn</span>
            <span>·</span>
            <span>Utrecht</span>
            <span>·</span>
            <span>Amersfoort</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.PbVoorWieTiles = VoorWieTiles;
window.PbBenefits = Benefits;
window.PbSocialProof = SocialProof;