// Hero.jsx — landing hero

function Hero({
  onPrimary,
  onSecondary,
  headline,
  showTerminal = true,
  showGrid = true,
}) {
  const title = headline || "Votre informatique, simplement.";
  return (
    <section
      style={{
        padding: "0",
        position: "relative",
        overflow: "hidden",
        paddingTop: "var(--ffit-header-height)",
      }}
    >
      {/* algorithmic background — circuit traces, nodes, code grid */}
      {showGrid && (
        <svg
          style={{
            position: "absolute",
            inset: 0,
            width: "100%",
            height: "100%",
            pointerEvents: "none",
          }}
          xmlns="http://www.w3.org/2000/svg"
          preserveAspectRatio="xMidYMid slice"
        >
          <defs>
            <pattern
              id="grid"
              width="48"
              height="48"
              patternUnits="userSpaceOnUse"
            >
              <path
                d="M 48 0 L 0 0 0 48"
                fill="none"
                stroke="#0A1F4D"
                strokeOpacity="0.04"
                strokeWidth="1"
              />
              <circle cx="0" cy="0" r="1.5" fill="#0A1F4D" fillOpacity="0.06" />
            </pattern>
            <radialGradient id="hero-glow" cx="0.85" cy="0.15" r="0.5">
              <stop offset="0%" stopColor="#38BDF8" stopOpacity="0.18" />
              <stop offset="100%" stopColor="#38BDF8" stopOpacity="0" />
            </radialGradient>
            <radialGradient id="hero-glow-2" cx="0.1" cy="0.9" r="0.45">
              <stop offset="0%" stopColor="#1E5BD6" stopOpacity="0.10" />
              <stop offset="100%" stopColor="#1E5BD6" stopOpacity="0" />
            </radialGradient>
          </defs>
          <rect width="100%" height="100%" fill="url(#grid)" />
          <rect width="100%" height="100%" fill="url(#hero-glow)" />
          <rect width="100%" height="100%" fill="url(#hero-glow-2)" />
          {/* circuit traces */}
          <g
            stroke="#1E5BD6"
            strokeWidth="1"
            fill="none"
            opacity="0.18"
            strokeLinecap="round"
          >
            <path d="M 0 80 L 220 80 L 260 120 L 380 120" />
            <path d="M 0 200 L 140 200 L 180 240 L 320 240 L 360 200 L 480 200" />
            <path d="M 1280 60 L 1080 60 L 1040 100" />
            <path d="M 1280 320 L 1140 320 L 1100 360 L 980 360" />
            <path d="M 600 0 L 600 60 L 640 100 L 640 180" />
            <path d="M 880 720 L 880 660 L 840 620 L 840 540" />
          </g>
          <g fill="#1E5BD6" opacity="0.55">
            <circle cx="220" cy="80" r="3" />
            <circle cx="380" cy="120" r="3" />
            <circle cx="180" cy="240" r="3" />
            <circle cx="1080" cy="60" r="3" />
            <circle cx="1100" cy="360" r="3" />
            <circle cx="640" cy="100" r="3" />
            <circle cx="840" cy="540" r="3" />
          </g>
          <g fill="#38BDF8" opacity="0.7">
            <circle cx="380" cy="120" r="1.4" />
            <circle cx="600" cy="60" r="1.4" />
            <circle cx="1040" cy="100" r="1.4" />
            <circle cx="840" cy="620" r="1.4" />
          </g>
          {/* binary glyphs floating */}
          <g
            fontFamily="JetBrains Mono, monospace"
            fontSize="11"
            fill="#1E5BD6"
            opacity="0.18"
          >
            <text x="60" y="380">
              01001110
            </text>
            <text x="1100" y="180">
              {"{ ssd: ok }"}
            </text>
            <text x="1140" y="540">
              11010
            </text>
            <text x="160" y="600">
              sudo apt
            </text>
          </g>
        </svg>
      )}

      <div
        className="kit-container"
        style={{
          position: "relative",
          display: "grid",
          gridTemplateColumns: "1.1fr 0.9fr",
          gap: 64,
          alignItems: "center",
        }}
      >
        <div>
          <p className="kit-eyebrow">
            Informatique · à domicile · Belgique (Bruxelles)
          </p>
          <h1 className="kit-h1">
            {title.replace(/\.$/, "")}
            <span style={{ color: "var(--ffit-accent)" }}>.</span>
          </h1>
          <p className="kit-lede">
            Dépannage, upgrades, montage de PC sur mesure, sites web et
            applications. Un seul interlocuteur — clair, technique, sans jargon
            inutile.
          </p>
          <div style={{ marginTop: 32, display: "flex", gap: 12 }}>
            <button
              className="kit-btn kit-btn--primary kit-btn--lg"
              onClick={onPrimary}
              style={{ whiteSpace: "nowrap" }}
            >
              Demander un devis
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M5 12h14M13 5l7 7-7 7" />
              </svg>
            </button>
            <button
              className="kit-btn kit-btn--secondary kit-btn--lg"
              onClick={onSecondary}
              style={{ whiteSpace: "nowrap" }}
            >
              Voir les services
            </button>
          </div>
          <div
            style={{
              marginTop: 28,
              display: "flex",
              gap: 24,
              fontFamily: "var(--ffit-font-body)",
              fontSize: 13,
              color: "var(--ffit-fg-2)",
            }}
          >
            <span
              style={{ display: "inline-flex", alignItems: "center", gap: 6 }}
            >
              <span
                style={{
                  width: 8,
                  height: 8,
                  background: "var(--ffit-success)",
                  borderRadius: "50%",
                }}
              />
              Disponible en week-end
            </span>
            <span>· Devis sans engagement</span>
            <span>· Région de Bruxelles</span>
          </div>
        </div>

        {/* hero visual: floating tokens demonstrating the brand */}
        <div
          style={{
            position: "relative",
            height: 380,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <img
            src="../../assets/logo-mark.svg"
            width="280"
            height="280"
            style={{ position: "absolute", right: 0, top: 20 }}
          />
          {/* terminal token */}
          {showTerminal && (
            <div
              style={{
                position: "absolute",
                left: 0,
                bottom: 0,
                background: "var(--ffit-blue-950)",
                borderRadius: 12,
                padding: "14px 16px",
                width: 280,
                boxShadow: "var(--ffit-shadow-md)",
                fontFamily: "var(--ffit-font-mono)",
                fontSize: 12,
                color: "#DCE7FD",
                lineHeight: 1.6,
              }}
            >
              <div style={{ display: "flex", gap: 6, marginBottom: 10 }}>
                <span
                  style={{
                    width: 10,
                    height: 10,
                    background: "#DC2626",
                    borderRadius: "50%",
                  }}
                />
                <span
                  style={{
                    width: 10,
                    height: 10,
                    background: "#D97706",
                    borderRadius: "50%",
                  }}
                />
                <span
                  style={{
                    width: 10,
                    height: 10,
                    background: "#10A36C",
                    borderRadius: "50%",
                  }}
                />
              </div>
              <div>
                <span style={{ color: "#7DD3FC" }}>$</span> winget upgrade --all
              </div>
              <div style={{ color: "#98A1B2" }}>22 packages mis à jour ✓</div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;