/* SectorsStrip — four sector cards, used on home page and on services overview.
 * Each card links to its dedicated sector landing page (SEO). */

function SectorsStrip() {
  const sectors = [
    {
      slug: "solicitors",
      title: "Solicitors",
      blurb: "SRA-aligned controls, mailbox-first cybersecurity, late-night client emails handled.",
      icon: "scale",
      stat: "32",
      statLabel: "law firms supported",
      href: "sector-solicitors.html",
    },
    {
      slug: "accountants",
      title: "Accountants",
      blurb: "AML-grade data handling, ICAEW & ACCA-aligned, year-end and tax-deadline ready.",
      icon: "calculator",
      stat: "AML",
      statLabel: "data-handling standard",
      href: "sector-accountants.html",
    },
    {
      slug: "property",
      title: "Property services",
      blurb: "Estate agents, surveyors, developers. CRM-first, mobile-first, deal-day-uptime.",
      icon: "home",
      stat: "Mobile-1st",
      statLabel: "deal-week ready",
      href: "sector-property.html",
    },
    {
      slug: "manufacturers",
      title: "Manufacturers",
      blurb: "OT-aware, ERP-integrated, designed for shopfloor uptime — not just office IT.",
      icon: "factory",
      stat: "99.1%",
      statLabel: "uptime SLA",
      href: "sector-manufacturers.html",
    },
  ];

  return (
    <section id="sectors" style={{ background: "var(--ri-paper)", padding: "120px 0" }}>
      <Container>
        <div style={{ display: "flex", justifyContent: "space-between",
                      alignItems: "flex-end", gap: 24, flexWrap: "wrap",
                      marginBottom: 48 }}>
          <div style={{ maxWidth: 640 }}>
            <Eyebrow number="05">Sectors we serve</Eyebrow>
            <h2 style={{
              fontSize: "clamp(40px, 5.4vw, 72px)", lineHeight: 1.04,
              letterSpacing: "-0.02em", fontWeight: 700, margin: 0,
            }}>
              Four sectors.<br/>One specialism each.
            </h2>
          </div>
          <p style={{
            maxWidth: 380, fontSize: 16, lineHeight: 1.55,
            color: "var(--fg-muted)", margin: 0,
          }}>
            We work with legal, finance, property and manufacturing teams of
            10–200 people. Sector specialism means the engineer knows your
            software, regulator and the way your team actually works on a Tuesday.
          </p>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12,
        }} className="ri-sectors-grid">
          {sectors.map((s) => <SectorCard key={s.slug} {...s} />)}
        </div>
      </Container>

      <style>{`
        @media (max-width: 1024px) { .ri-sectors-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 540px)  { .ri-sectors-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function SectorCard({ slug, title, blurb, icon, stat, statLabel, href }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={href}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative",
        display: "flex", flexDirection: "column",
        background: "#fff", color: "var(--fg)",
        border: "1px solid var(--border)",
        borderRadius: 20, padding: "32px 26px 28px",
        textDecoration: "none", overflow: "hidden",
        transition: "transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out)",
        transform: hover ? "translateY(-3px)" : "translateY(0)",
        boxShadow: hover ? "var(--shadow-2)" : "var(--shadow-1)",
      }}
    >
      <div aria-hidden="true" style={{
        position: "absolute", left: 0, right: 0, top: 0, height: 4,
        background: "var(--grad-brand)",
      }}></div>

      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "flex-start",
        marginBottom: 24,
      }}>
        <div style={{
          width: 48, height: 48, borderRadius: 12,
          background: hover ? "rgba(242,43,105,0.12)" : "var(--bg-subtle)",
          color: hover ? "var(--ri-pink)" : "var(--ri-ink)",
          display: "flex", alignItems: "center", justifyContent: "center",
          transition: "background 200ms, color 200ms",
        }}>
          <Icon name={icon} size={24} stroke={2} />
        </div>
        <div style={{ textAlign: "right" }}>
          <div style={{
            fontSize: 24, fontWeight: 800, letterSpacing: "-0.03em",
            lineHeight: 1,
            background: "var(--grad-brand)",
            WebkitBackgroundClip: "text", backgroundClip: "text",
            WebkitTextFillColor: "transparent",
          }}>{stat}</div>
          <div style={{
            fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase",
            color: "var(--fg-subtle)", marginTop: 4, lineHeight: 1.3,
          }}>{statLabel}</div>
        </div>
      </div>

      <h3 style={{
        fontSize: 24, fontWeight: 700, letterSpacing: "-0.015em",
        margin: "0 0 12px", lineHeight: 1.15,
      }}>{title}</h3>
      <p style={{
        fontSize: 14, lineHeight: 1.55, margin: "0 0 20px",
        color: "var(--fg-muted)",
      }}>{blurb}</p>

      <span style={{
        marginTop: "auto",
        fontSize: 12, fontWeight: 600, color: "var(--ri-pink)",
        display: "inline-flex", alignItems: "center", gap: 6,
      }}>
        IT support for {title.toLowerCase()} <Icon name="arrow-right" size={14} stroke={2.2} />
      </span>
    </a>
  );
}

Object.assign(window, { SectorsStrip });