/* global React */

/* Subtle SVG icon-pattern background — vastgoed/werkdag mix.
   Houses, keys, clocks, coffee cups — opacity 5–8% via fill-opacity. */
function IconPattern({ opacity = 0.06 }) {
  return (
    <svg aria-hidden="true" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }}>
      <defs>
        <pattern id="pb-pattern" width="160" height="160" patternUnits="userSpaceOnUse">
          <g fill="none" stroke="#0EA47A" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" opacity={opacity}>
            {/* house */}
            <g transform="translate(14,18)">
              <path d="M0 14 L14 2 L28 14 L28 26 L0 26 Z" />
              <path d="M10 26 L10 18 L18 18 L18 26" />
            </g>
            {/* key */}
            <g transform="translate(80,28) rotate(-20)">
              <circle cx="6" cy="6" r="5" />
              <path d="M11 6 L26 6 M22 6 L22 11 M18 6 L18 9" />
            </g>
            {/* clock */}
            <g transform="translate(120,90)">
              <circle cx="10" cy="10" r="9" />
              <path d="M10 5 L10 10 L14 12" />
            </g>
            {/* coffee cup */}
            <g transform="translate(28,96)">
              <path d="M2 4 L2 16 Q2 20 6 20 L18 20 Q22 20 22 16 L22 4 Z" />
              <path d="M22 8 Q28 8 28 12 Q28 16 22 16" />
              <path d="M6 0 L6 -2 M11 0 L11 -3 M16 0 L16 -2" />
            </g>
            {/* building */}
            <g transform="translate(96,120)">
              <rect x="0" y="0" width="22" height="28" />
              <rect x="4" y="4" width="4" height="4" />
              <rect x="14" y="4" width="4" height="4" />
              <rect x="4" y="12" width="4" height="4" />
              <rect x="14" y="12" width="4" height="4" />
              <rect x="9" y="20" width="4" height="8" />
            </g>
          </g>
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#pb-pattern)" />
    </svg>
  );
}

/* Lucide-style icons inline (1.5px stroke). */
function Icon({ name, size = 20, color = "currentColor", strokeWidth = 1.5, style }) {
  const paths = {
    "arrow-right": <><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></>,
    "play-circle": <><circle cx="12" cy="12" r="10"/><polygon points="10,8 16,12 10,16" fill={color} stroke="none"/></>,
    "message-circle": <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>,
    "building-2": <><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v8h4"/><path d="M18 9h2a2 2 0 0 1 2 2v11h-4"/><path d="M10 6h4M10 10h4M10 14h4M10 18h4"/></>,
    "briefcase": <><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></>,
    "home": <><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9,22 9,12 15,12 15,22"/></>,
    "clock": <><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></>,
    "file-check": <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/><path d="M9 15l2 2 4-4"/></>,
    "smile": <><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></>,
    "bar-chart": <><line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></>,
    "check": <polyline points="20,6 9,17 4,12"/>,
    "chevron-down": <polyline points="6,9 12,15 18,9"/>,
    "chevron-right": <polyline points="9,18 15,12 9,6"/>,
    "star": <polygon points="12,2 15.1,8.3 22,9.3 17,14.1 18.2,21 12,17.8 5.8,21 7,14.1 2,9.3 8.9,8.3" fill={color} stroke="none"/>,
    "phone": <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>,
    "shield": <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>,
    "zap": <polygon points="13,2 3,14 12,14 11,22 21,10 12,10"/>,
    "users": <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
    "inbox": <><polyline points="22,12 16,12 14,15 10,15 8,12 2,12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></>,
    "wrench": <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>,
    "key": <><circle cx="7" cy="14" r="4"/><path d="M10.5 11.5L21 1l3 3-3 3-2-2-3 3-3-3"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" style={style}>
      {paths[name] || null}
    </svg>
  );
}

/* Eyebrow / caps label */
function Eyebrow({ children, color = "var(--color-forest)" }) {
  return <span style={{ fontSize: 12, fontWeight: 500, letterSpacing: "0.08em", textTransform: "uppercase", color }}>{children}</span>;
}

/* Final CTA section — donkergroene gradient */
function FinalCTA() {
  return (
    <section style={{ background: "linear-gradient(135deg, #0EA47A 0%, #065F46 100%)", padding: "100px 32px", color: "#fff", position: "relative", overflow: "hidden" }}>
      <IconPattern opacity={0.05} />
      <div style={{ position: "relative", maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 56, lineHeight: 1.05, letterSpacing: "-0.02em", color: "#fff", margin: 0 }}>
          Klaar om de chaos te stoppen?
        </h2>
        <p style={{ fontSize: 18, lineHeight: 1.55, color: "rgba(255,255,255,0.85)", margin: "20px auto 0", maxWidth: 560 }}>
          Plan een demo van 20 minuten. We laten zien hoe Pandbeer in jouw situatie werkt — en zo niet, dan zeggen we dat eerlijk.
        </p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 36, flexWrap: "wrap" }}>
          <a href="#demo" style={{
            fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 15,
            background: "#fff", color: "var(--color-forest)",
            border: 0, borderRadius: 10, padding: "14px 22px",
            textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 8,
          }}>
            Plan een demo
            <Icon name="arrow-right" size={16} />
          </a>
          <a href="#" style={{
            fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 15,
            background: "transparent", color: "#fff",
            border: "1px solid rgba(255,255,255,0.5)", borderRadius: 10, padding: "13px 22px",
            textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 8,
          }}>
            <Icon name="message-circle" size={16} />
            Stuur een appje
          </a>
        </div>
      </div>
    </section>
  );
}

window.PbIconPattern = IconPattern;
window.PbIcon = Icon;
window.PbEyebrow = Eyebrow;
window.PbFinalCTA = FinalCTA;