/* Hero — split layout with TWEAKABLE variants.
 *
 * Variants:
 *   bg:       'loud' | 'quiet' | 'centred'   — which hero background recipe
 *   density:  'compact' | 'standard' | 'roomy' — vertical breathing room
 *   headline: 'A' | 'B' | 'C'                  — three headline tones
 *
 * Reads via window.__riTweaks (set by the Tweaks panel) with sensible defaults.
 */

const HEADLINE_VARIANTS = {
  A: {
    line1: "Managed IT,",
    line2: "done properly.",
    sub: "The Managed IT & Cybersecurity partner for ambitious legal, finance, property and manufacturing teams across the East Midlands and London. Five clients per technician — by design.",
    badge: { icon: "zap", text: "Average response under 30 minutes · Mon–Fri 8am–5.30pm" },
  },
  B: {
    line1: "Beyond IT support.",
    line2: "Secure. Efficient.",
    sub: "You've found an IT partner that provides more than just IT support. Our Managed IT services help your business stay secure and improve efficiency — through Automation, AI and a security-first approach.",
    badge: { icon: "zap", text: "Average response under 30 minutes · Mon–Fri 8am–5.30pm" },
  },
  C: {
    line1: "We don't take on",
    line2: "more than we can handle.",
    sub: "A deliberate 5:1 ratio of clients to technicians. Cyber Essentials Plus since the year we were founded. Helping solicitors, accountants and manufacturers reduce risk and improve efficiency.",
    badge: { icon: "users", text: "Five clients per technician — by design" },
  },
};

function Hero({ bg, density, headline }) {
  const t = (typeof window !== "undefined" && window.__riTweaks) || {};
  const variant   = bg       || t.heroBg       || "quiet";
  const den       = density  || t.heroDensity  || "standard";
  const headKey   = headline || t.heroHeadline || "A";
  const data = HEADLINE_VARIANTS[headKey] || HEADLINE_VARIANTS.A;

  const bgVar =
    variant === "loud"    ? "var(--bg-hero-loud)" :
    variant === "centred" ? "var(--bg-hero-centred)" :
                            "var(--bg-hero-quiet)";

  const pad = den === "compact" ? "96px 0 110px"
            : den === "roomy"   ? "150px 0 180px"
            :                     "120px 0 140px";

  return (
    <section
      id="home"
      style={{
        position: "relative",
        background: bgVar,
        color: "var(--fg-inverse)",
        overflow: "hidden",
      }}
    >
      {/* Whisper waveform on far left */}
      <img
        src="assets/logos/icon_white.png"
        alt=""
        aria-hidden="true"
        style={{
          position: "absolute", bottom: "-15%", left: "-12%",
          width: 540, transform: "rotate(-2deg)",
          opacity: variant === "loud" ? 0.14 : 0.10,
          pointerEvents: "none", mixBlendMode: "screen",
        }}
      />

      <Container style={{ position: "relative", padding: `${pad.split(' ')[0]} 32px ${pad.split(' ')[2]}` }}>
        <div style={{
          display: "grid", gridTemplateColumns: "6fr 5fr", gap: 64,
          alignItems: "center",
        }} className="ri-hero-grid">

          {/* LEFT — copy */}
          <div>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 10,
                          padding: "8px 14px", borderRadius: 999,
                          background: "rgba(255,255,255,0.08)",
                          border: "1px solid rgba(255,255,255,0.18)",
                          fontSize: 12.5, fontWeight: 500, letterSpacing: "0.02em",
                          color: "rgba(255,255,255,0.92)", marginBottom: 28 }}>
              <span style={{
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                width: 22, height: 22, borderRadius: 999,
                background: "rgba(242,43,105,0.18)",
                color: "var(--ri-pink)", flex: "0 0 auto",
              }}>
                <Icon name={data.badge.icon} size={13} stroke={2.2} />
              </span>
              {data.badge.text}
            </div>

            <h1
              style={{
                fontSize: "clamp(48px, 6.4vw, 96px)",
                fontWeight: 800, lineHeight: 0.94, letterSpacing: "-0.035em",
                margin: 0, textWrap: "balance",
              }}
            >
              {data.line1}<br/>
              <span style={{
                background: "var(--grad-brand)",
                WebkitBackgroundClip: "text", backgroundClip: "text",
                WebkitTextFillColor: "transparent",
              }}>{data.line2}</span>
            </h1>

            <p style={{
              marginTop: 26, fontSize: 19, lineHeight: 1.5, fontWeight: 400,
              color: "rgba(245,245,247,0.78)", maxWidth: 540,
            }}>{data.sub}</p>

            <div style={{ marginTop: 36, display: "flex", flexWrap: "wrap", gap: 12 }}>
              <Button variant="primary" size="lg" iconRight="arrow-right"
                      as="a" href="contact.html">
                Book a call
              </Button>
              <Button variant="outline" size="lg" as="a" href="#approach"
                      onClick={(e) => { e.preventDefault(); const el = document.getElementById("approach"); if (el) el.scrollIntoView({ behavior: "smooth" }); }}>
                How we work
              </Button>
            </div>
          </div>

          {/* RIGHT — photo composition */}
          <div style={{ position: "relative", aspectRatio: "4 / 5", maxHeight: 620 }}
               className="ri-hero-photo">
            <div style={{
              position: "absolute", inset: 0,
              borderRadius: 20, overflow: "hidden",
              boxShadow: "0 30px 80px rgba(0,0,0,0.45)",
            }}>
              <img
                src="assets/photography/team-workspace.webp"
                alt="Reformed IT engineers providing managed IT support at the Nottinghamshire office"
                style={{ width: "100%", height: "100%", objectFit: "cover",
                         objectPosition: "center 30%", display: "block" }}
              />
            </div>

            <div style={{
              position: "absolute", top: -18, right: -18,
              background: "#fff", color: "var(--ri-ink)",
              borderRadius: 16, padding: "16px 18px",
              minWidth: 168, boxShadow: "0 20px 48px rgba(8,5,38,0.32)",
              border: "1px solid rgba(8,5,38,0.06)",
            }} className="ri-hero-stat">
              <div style={{
                fontSize: 48, fontWeight: 800, letterSpacing: "-0.04em",
                lineHeight: 1,
                background: "var(--grad-brand)",
                WebkitBackgroundClip: "text", backgroundClip: "text",
                WebkitTextFillColor: "transparent",
              }}>5:1</div>
              <div style={{ fontSize: 11.5, color: "var(--fg-muted)", marginTop: 4,
                            lineHeight: 1.35 }}>
                Clients per technician — by design
              </div>
            </div>
          </div>
        </div>

        {/* Trust strip */}
        <div style={{
          marginTop: 96, display: "flex", flexWrap: "wrap",
          gap: "8px 28px", alignItems: "center",
          fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
          color: "rgba(245,245,247,0.55)",
        }}>
          <span style={{ color: "rgba(245,245,247,0.4)" }}>Serving</span>
          <a href="location-nottingham.html" style={{ color: "inherit", textDecoration: "none", border: 0 }}>Nottingham</a>
          <span style={{ opacity: 0.4 }}>·</span>
          <a href="location-derby.html" style={{ color: "inherit", textDecoration: "none", border: 0 }}>Derby</a>
          <span style={{ opacity: 0.4 }}>·</span>
          <a href="location-london.html" style={{ color: "inherit", textDecoration: "none", border: 0 }}>London</a>
          <span style={{ opacity: 0.4 }}>·</span>
          <a href="sector-solicitors.html" style={{ color: "inherit", textDecoration: "none", border: 0 }}>Solicitors</a>
          <span style={{ opacity: 0.4 }}>·</span>
          <a href="sector-accountants.html" style={{ color: "inherit", textDecoration: "none", border: 0 }}>Accountants</a>
          <span style={{ opacity: 0.4 }}>·</span>
          <a href="sector-property.html" style={{ color: "inherit", textDecoration: "none", border: 0 }}>Property</a>
          <span style={{ opacity: 0.4 }}>·</span>
          <a href="sector-manufacturers.html" style={{ color: "inherit", textDecoration: "none", border: 0 }}>Manufacturing</a>
        </div>
      </Container>

      <BrandBar height={22} style={{ position: "absolute", left: 0, right: 0, bottom: 0 }} />

      <style>{`
        @media (max-width: 1024px) {
          .ri-hero-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
          .ri-hero-photo {
            max-width: 540px; margin: 0 auto;
            aspect-ratio: 4 / 5 !important;
          }
          /* The floating stat + quote cards hang off the photo on desktop.
             On tablet/mobile they look stranded and overlap the caption pill —
             the same facts live in StatStrip and Testimonial below the fold,
             so we hide them here for a cleaner stacked layout. */
          .ri-hero-stat,
          .ri-hero-quote { display: none !important; }
        }
        @media (max-width: 640px) {
          .ri-hero-photo { max-width: 100%; aspect-ratio: 3 / 4 !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Hero, HEADLINE_VARIANTS });