/* global React, PbIcon, PbIconPattern, PbEyebrow */

function Hero() {
  return (
    <section style={{
      position: "relative", overflow: "hidden",
      background: "linear-gradient(135deg, #FFFFFF 0%, #F0FBF5 55%, #E6FBF4 100%)",
    }}>
      <PbIconPattern opacity={0.05} />
      <div style={{
        position: "relative",
        maxWidth: 1200, margin: "0 auto",
        padding: "88px 32px 100px",
        display: "grid", gridTemplateColumns: "1.15fr 0.85fr", gap: 56, alignItems: "center",
      }}>
        <div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 12px", background: "rgba(16,217,160,0.12)", border: "1px solid rgba(16,217,160,0.25)", borderRadius: 999, marginBottom: 24 }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--color-pandbeer-green)" }} />
            <span style={{ fontSize: 12, fontWeight: 500, color: "var(--color-forest)", letterSpacing: "0.02em" }}>WhatsApp-first vastgoedbeheer</span>
          </div>
          <h1 style={{
            fontFamily: "var(--font-display)", fontWeight: 500,
            fontSize: 76, lineHeight: 1.0, letterSpacing: "-0.025em",
            color: "var(--fg-1)", margin: "0 0 24px 0",
          }}>
            Stop met blussen,<br />
            <span style={{
              backgroundImage: "linear-gradient(135deg, #0EA47A 0%, #10D9A0 100%)",
              WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent",
            }}>begin met beheren.</span>
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--fg-2)", margin: 0, maxWidth: 540 }}>
            Pandbeer is de AI-agent die huurdermeldingen afhandelt via WhatsApp. Geen app voor je huurders, geen training, geen migratie. Ze appen, wij regelen het — en jij ziet alles overzichtelijk terug in je dashboard.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
            <a href="#demo" style={{
              fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 15,
              background: "var(--color-forest)", color: "#fff",
              border: 0, borderRadius: 10, padding: "14px 22px",
              textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 8,
            }}>
              Plan een demo
              <PbIcon name="arrow-right" size={16} />
            </a>
            <a href="#" style={{
              fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 15,
              background: "#fff", color: "var(--fg-1)",
              border: "1px solid var(--border-default)", borderRadius: 10, padding: "13px 22px",
              textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 8,
            }}>
              <PbIcon name="play-circle" size={16} color="var(--color-forest)" />
              Bekijk in 60 seconden
            </a>
          </div>
          <p style={{ fontSize: 13, color: "var(--fg-3)", margin: "14px 0 0 0" }}>
            Gratis demo · Geen creditcard nodig
          </p>
          <div style={{ display: "flex", alignItems: "center", gap: 24, marginTop: 40, paddingTop: 28, borderTop: "1px solid rgba(0,0,0,0.06)", flexWrap: "wrap" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--fg-3)" }}>
              <span style={{ fontSize: 14 }}>🇳🇱</span>
              <span>Gemaakt in Friesland</span>
            </div>
            <div style={{ width: 1, height: 16, background: "var(--border-default)" }} />
            <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 13, color: "var(--fg-3)" }}>
              <div style={{ display: "flex", gap: 1 }}>
                {[0,1,2,3,4].map(i => <PbIcon key={i} name="star" size={13} color="#F59E0B" />)}
              </div>
              <span>Voor 30+ vastgoedbeheerders</span>
            </div>
          </div>
        </div>

        {/* WhatsApp phone mockup */}
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
          <p style={{ fontSize: 12, color: "var(--fg-3)", margin: 0, letterSpacing: "0.04em" }}>
            <span style={{ fontFamily: "var(--font-mono)", marginRight: 6 }}>↓</span>
            Echt gesprek (geanonimiseerd)
          </p>
          <PhoneMockup />
        </div>
      </div>
    </section>
  );
}

function PhoneMockup() {
  return (
    <div style={{
      width: 340, background: "#1A1A1A", borderRadius: 44,
      padding: 10, boxShadow: "0 30px 80px rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.08)",
      position: "relative",
    }}>
      <div style={{
        background: "#ECE5DD", borderRadius: 36, overflow: "hidden",
        position: "relative", height: 640,
        display: "flex", flexDirection: "column",
      }}>
        {/* notch */}
        <div style={{
          position: "absolute", top: 8, left: "50%", transform: "translateX(-50%)",
          width: 110, height: 28, background: "#1A1A1A", borderRadius: 999, zIndex: 5,
        }} />
        {/* status bar */}
        <div style={{
          background: "#075E54", color: "#fff", padding: "14px 18px 6px",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          fontSize: 13, fontWeight: 600, fontFamily: "-apple-system, system-ui, sans-serif",
        }}>
          <span style={{ fontFeatureSettings: "'tnum'" }}>14:23</span>
          <span style={{ display: "inline-flex", gap: 4, alignItems: "center" }}>
            <svg width="16" height="11" viewBox="0 0 16 11" fill="#fff"><path d="M2 8h2v3H2zm3-2h2v5H5zm3-2h2v7H8zm3-2h2v9h-2z"/></svg>
            <svg width="14" height="10" viewBox="0 0 14 10" fill="#fff"><path d="M7 9l1.5-1.5a4 4 0 0 0-3 0zm-3-3a8 8 0 0 1 6 0l-1.5 1.5a4 4 0 0 0-3 0zm-3-3a12 12 0 0 1 12 0l-1.5 1.5a8 8 0 0 0-9 0z"/></svg>
            <svg width="22" height="10" viewBox="0 0 22 10" fill="none"><rect x="0.5" y="0.5" width="18" height="9" rx="2" stroke="#fff" opacity="0.7"/><rect x="2" y="2" width="14" height="6" rx="1" fill="#fff"/><rect x="20" y="3" width="2" height="4" fill="#fff" opacity="0.7"/></svg>
          </span>
        </div>
        {/* chat header */}
        <div style={{
          background: "#075E54", color: "#fff", padding: "8px 14px 12px",
          display: "flex", alignItems: "center", gap: 12,
        }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="15,18 9,12 15,6" />
          </svg>
          <div style={{
            width: 38, height: 38, borderRadius: 999, background: "#10D9A0",
            display: "flex", alignItems: "center", justifyContent: "center",
            border: "2px solid #fff", overflow: "hidden",
          }}>
            <BearAvatar size={26} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 15, fontWeight: 600, fontFamily: "-apple-system, system-ui, sans-serif" }}>Pandbeer</div>
            <div style={{ fontSize: 11, color: "rgba(255,255,255,0.85)", fontFamily: "-apple-system, system-ui, sans-serif" }}>online</div>
          </div>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff"><path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57a1 1 0 0 0-1.02.24l-2.2 2.2a15.07 15.07 0 0 1-6.59-6.58l2.2-2.21a1 1 0 0 0 .25-1A11.36 11.36 0 0 1 8.5 4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1c0 9.39 7.61 17 17 17a1 1 0 0 0 1-1v-3.5a1 1 0 0 0-1-1z"/></svg>
          <svg width="4" height="20" viewBox="0 0 4 20" fill="#fff"><circle cx="2" cy="3" r="2"/><circle cx="2" cy="10" r="2"/><circle cx="2" cy="17" r="2"/></svg>
        </div>

        {/* WhatsApp wallpaper background pattern */}
        <div style={{
          flex: 1, padding: "14px 12px", overflow: "hidden",
          background: "#ECE5DD",
          backgroundImage: "radial-gradient(circle at 25% 25%, rgba(0,0,0,0.025) 1px, transparent 1px), radial-gradient(circle at 75% 75%, rgba(0,0,0,0.025) 1px, transparent 1px)",
          backgroundSize: "20px 20px",
          display: "flex", flexDirection: "column", gap: 8,
          fontFamily: "-apple-system, system-ui, sans-serif",
        }}>
          <DateChip>VANDAAG</DateChip>

          {/* tenant message 1 */}
          <Bubble side="right" time="14:21" read>
            Hey! Er staat water op de vloer in de gang van unit 3B, lijkt uit de leiding boven het plafond te komen 😬
          </Bubble>

          {/* photo bubble */}
          <Bubble side="right" time="14:21" read padded={false}>
            <div style={{ width: 200, height: 130, borderRadius: 8, overflow: "hidden", position: "relative",
              background: "linear-gradient(180deg, #C9CFD3 0%, #9BA4AB 60%, #6E7780 100%)" }}>
              {/* mock ceiling photo */}
              <div style={{ position: "absolute", inset: 0,
                backgroundImage: "linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.15) 100%), repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 18px), repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 24px)" }} />
              {/* water stain */}
              <div style={{ position: "absolute", left: 50, top: 28, width: 90, height: 60, borderRadius: "60% 40% 50% 50%",
                background: "radial-gradient(ellipse, rgba(120,90,40,0.55) 0%, rgba(140,100,40,0.25) 60%, transparent 100%)",
                filter: "blur(2px)" }} />
              <div style={{ position: "absolute", left: 70, top: 78, width: 30, height: 8, background: "rgba(120,90,40,0.5)", borderRadius: "50%", filter: "blur(2px)" }} />
              <div style={{ position: "absolute", inset: 0, padding: 8, display: "flex", alignItems: "flex-end", color: "rgba(255,255,255,0.85)", fontSize: 11 }}>plafond gang 3B</div>
            </div>
          </Bubble>

          {/* pandbeer reply 1 */}
          <Bubble side="left" time="14:21" avatar>
            Vervelend zeg, water uit het plafond. Ik schakel direct een loodgieter in.
            <br /><br />
            Voordat hij er is — kun je de hoofdkraan dichtdraaien? Die zit meestal in de meterkast.
          </Bubble>

          {/* pandbeer reply 2 */}
          <Bubble side="left" time="14:22" avatar>
            Top, ik heb <b style={{ color: "#075E54" }}>Loodgietersbedrijf Van Dijk</b> een melding gestuurd. Ze nemen binnen 30 min contact op. Ik hou je op de hoogte 👍
          </Bubble>

          {/* tenant message 2 */}
          <Bubble side="right" time="14:22" read>
            Super, dankjewel! Kraan is dicht.
          </Bubble>
        </div>

        {/* input bar */}
        <div style={{ background: "#F0F0F0", padding: "8px 10px", display: "flex", alignItems: "center", gap: 8 }}>
          <div style={{ flex: 1, background: "#fff", borderRadius: 999, padding: "8px 14px", fontSize: 13, color: "#9CA3AF", fontFamily: "-apple-system, system-ui, sans-serif" }}>
            Bericht
          </div>
          <div style={{ width: 36, height: 36, borderRadius: 999, background: "#075E54", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff"><path d="M12 2a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3zm5 9a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z"/></svg>
          </div>
        </div>
      </div>
    </div>
  );
}

function Bubble({ side, time, read, avatar, padded = true, children }) {
  const isLeft = side === "left";
  return (
    <div style={{ display: "flex", justifyContent: isLeft ? "flex-start" : "flex-end", alignItems: "flex-end", gap: 6 }}>
      {isLeft && avatar && (
        <div style={{
          width: 24, height: 24, borderRadius: 999, background: "#10D9A0",
          display: "flex", alignItems: "center", justifyContent: "center",
          flexShrink: 0, marginBottom: 2,
        }}>
          <BearAvatar size={16} />
        </div>
      )}
      <div style={{
        maxWidth: "78%",
        background: isLeft ? "#fff" : "#DCF8C6",
        padding: padded ? "7px 10px 6px" : 4,
        borderRadius: 8,
        borderTopLeftRadius: isLeft ? 2 : 8,
        borderTopRightRadius: isLeft ? 8 : 2,
        boxShadow: "0 1px 0.5px rgba(0,0,0,0.08)",
        fontSize: 13.5, lineHeight: 1.4, color: "#111",
        position: "relative",
      }}>
        <div>{children}</div>
        <div style={{
          fontSize: 10, color: "#7C8B95", marginTop: 2,
          textAlign: "right", display: "flex", justifyContent: "flex-end", alignItems: "center", gap: 3,
        }}>
          <span>{time}</span>
          {!isLeft && read && (
            <svg width="14" height="10" viewBox="0 0 16 12" fill="#34B7F1"><path d="M11.07.84L5.76 6.65 4.62 5.5l-1.06 1.06 2.2 2.2 6.37-6.86zM15.5.84L7.97 8.97 6.83 7.83 5.77 8.89l2.2 2.2L16.56 1.9z"/></svg>
          )}
        </div>
      </div>
    </div>
  );
}

function DateChip({ children }) {
  return (
    <div style={{ display: "flex", justifyContent: "center", margin: "4px 0 8px" }}>
      <span style={{
        background: "rgba(225,245,254,0.92)", color: "#5C7080",
        fontSize: 11, fontWeight: 500, padding: "4px 10px", borderRadius: 6,
        boxShadow: "0 1px 0.5px rgba(0,0,0,0.05)",
        fontFamily: "-apple-system, system-ui, sans-serif",
      }}>{children}</span>
    </div>
  );
}

/* tiny bear avatar — simplified version of the brand mark */
function BearAvatar({ size = 24 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <circle cx="16" cy="17" r="11" fill="#1A1A1A" />
      <circle cx="9" cy="9" r="4" fill="#1A1A1A" />
      <circle cx="23" cy="9" r="4" fill="#1A1A1A" />
      <circle cx="9" cy="9" r="1.6" fill="#10D9A0" />
      <circle cx="23" cy="9" r="1.6" fill="#10D9A0" />
      <circle cx="13" cy="16" r="1.4" fill="#fff" />
      <circle cx="19" cy="16" r="1.4" fill="#fff" />
      <ellipse cx="16" cy="21" rx="3" ry="2.2" fill="#3a3a3a" />
      <circle cx="16" cy="20" r="0.8" fill="#1A1A1A" />
    </svg>
  );
}

window.PbHero = Hero;
window.PbBearAvatar = BearAvatar;