// Industries — interactive cards

const INDUSTRIES = [
  { t: "Home Services", k: "Service trucks rolling, jobs booking themselves." },
  { t: "Landscaping", k: "Seasonal demand, predictable pipeline." },
  { t: "Contractors", k: "Qualified leads, faster bids, won work." },
  { t: "Mitigation", k: "24/7 intake, no missed emergencies." },
  { t: "Dental Practices", k: "Patient acquisition + retention loops." },
  { t: "Hospitality", k: "Bookings up. Cost-per-guest down." },
  { t: "Professional Services", k: "Authority content + clean pipelines." },
  { t: "Local Businesses", k: "Own your map pack. Own your neighborhood." },
  { t: "Product Brands", k: "Acquire, retain, and re-target visitors." },
];

function IndustryCard({ item, i, active, onHover }) {
  return (
    <div
      onMouseEnter={() => onHover(i)}
      onMouseLeave={() => onHover(-1)}
      style={{
        position: "relative",
        padding: "28px 28px 24px",
        border: "1px solid var(--line)",
        borderRadius: 22,
        background: active ? "var(--ink)" : "var(--paper)",
        color: active ? "var(--paper)" : "var(--ink)",
        cursor: "pointer",
        transition: "background 0.4s, color 0.4s, transform 0.4s cubic-bezier(0.2,0.8,0.2,1)",
        transform: active ? "translateY(-4px)" : "translateY(0)",
        overflow: "hidden",
        minHeight: 180,
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
      }}
    >
      <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
        <span className="idx" style={{ color: active ? "rgba(255,255,255,0.4)" : "var(--muted-2)" }}>
          {String(i + 1).padStart(2, "0")}
        </span>
        <span style={{
          width: 28, height: 28, borderRadius: "50%",
          border: `1px solid ${active ? "rgba(255,255,255,0.25)" : "var(--line-strong)"}`,
          display: "flex", alignItems: "center", justifyContent: "center",
          transition: "transform 0.5s cubic-bezier(0.2,0.8,0.2,1), background 0.4s",
          transform: active ? "rotate(-45deg)" : "rotate(0)",
          background: active ? "var(--accent)" : "transparent",
          color: active ? "var(--paper)" : "var(--ink)",
          borderColor: active ? "var(--accent)" : "var(--line-strong)",
        }}>
          <ArrowR size={10}/>
        </span>
      </div>
      <div>
        <h4 style={{ margin: 0, fontSize: 22, fontWeight: 500, letterSpacing: "-0.02em" }}>{item.t}</h4>
        <p style={{
          margin: "10px 0 0",
          fontSize: 13,
          lineHeight: 1.5,
          color: active ? "rgba(255,255,255,0.7)" : "var(--muted)",
          maxHeight: active ? 60 : 0,
          opacity: active ? 1 : 0,
          overflow: "hidden",
          transition: "max-height 0.4s, opacity 0.3s, margin 0.3s",
        }}>{item.k}</p>
      </div>
    </div>
  );
}

function Industries() {
  const [active, setActive] = React.useState(-1);
  return (
    <section id="industries" style={{ padding: "140px 0 120px" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <Reveal><SectionLabel index="05" label="Industries We Help" /></Reveal>
            <Reveal delay={100}>
              <h2 className="h-1" style={{ marginTop: 32, maxWidth: "16ch" }}>
                Different industries. <br/>
                <span style={{ color: "var(--muted-2)" }}>Same growth principles.</span>
              </h2>
            </Reveal>
          </div>
          <Reveal delay={200}>
            <p className="lede" style={{ maxWidth: "44ch" }}>
              We've built systems across service, retail, professional and product businesses. The vehicles differ — the engine doesn't.
            </p>
          </Reveal>
        </div>

        <div className="industries-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 12,
        }}>
          {INDUSTRIES.map((it, i) => (
            <Reveal key={it.t} delay={i * 40}>
              <IndustryCard item={it} i={i} active={active === i} onHover={setActive} />
            </Reveal>
          ))}
        </div>

        <style>{`
          @media (max-width: 720px) {
            .industries-grid { grid-template-columns: repeat(2, 1fr) !important; }
          }
          @media (max-width: 480px) {
            .industries-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

window.Industries = Industries;