/* eslint-disable */
function BusinessCards({ t, p }) {
  return (
    <section id="business" data-screen-label="03 Business" style={{
      position: "relative", background: p.bg, color: p.fg,
      borderBottom: `1px solid ${p.hairline}`,
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto", padding: "120px 32px 56px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 220px) 1fr", gap: 48, alignItems: "end" }}>
          <div style={window.eyebrowStyle(p)}>— {t.business.eyebrow}</div>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(36px, 5.2vw, 76px)", lineHeight: 0.98,
            letterSpacing: "0.6px", textTransform: "uppercase",
            margin: 0, whiteSpace: "pre-line",
          }}>{t.business.title}</h2>
        </div>
      </div>

      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr",
        borderTop: `1px solid ${p.hairline}`,
      }}>
        <BusinessTile p={p}
          tag={t.business.sw.tag} name={t.business.sw.name} body={t.business.sw.body}
          cta={t.business.sw.cta} href="../software/Software.html"
          image="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=1600&q=70"
          metrics={[["02", "Products"], ["AI", "Document engine"], ["Stablecoin", "Settlement rail"]]}
        />
        <BusinessTile p={p}
          tag={t.business.td.tag} name={t.business.td.name} body={t.business.td.body}
          cta={t.business.td.cta} href="../trade/Trade.html"
          image="https://images.unsplash.com/photo-1605745341112-85968b19335b?auto=format&fit=crop&w=1600&q=70"
          metrics={[["07", "Step process"], ["100%", "Export-side"], ["1:1", "Buyer-matched"]]}
          divider
        />
      </div>
    </section>
  );
}

function BusinessTile({ tag, name, body, cta, href, image, metrics, divider, p }) {
  const [hover, setHover] = React.useState(false);
  // Tiles always render dark over photography in both modes (feature blocks).
  return (
    <a href={href}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
       style={{
      position: "relative", minHeight: 720,
      display: "flex", flexDirection: "column", justifyContent: "space-between",
      padding: "48px 48px 40px",
      color: "#fff", textDecoration: "none",
      borderLeft: divider ? `1px solid ${p.hairline}` : "0",
      overflow: "hidden", isolation: "isolate",
    }}>
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, zIndex: -2,
        backgroundImage: `url(${image})`,
        backgroundSize: "cover", backgroundPosition: "center",
        transform: hover ? "scale(1.04)" : "scale(1)",
        transition: "transform 700ms ease",
        filter: "grayscale(100%) contrast(1.05)",
      }} />
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, zIndex: -1,
        background: hover
          ? "linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.92) 100%)"
          : "linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.96) 100%)",
        transition: "background 240ms ease",
      }} />

      <div>
        <div style={{
          fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "1.6px",
          textTransform: "uppercase", opacity: 0.85, marginBottom: 28,
          display: "flex", alignItems: "center", gap: 12,
        }}>
          <span style={{ width: 24, height: 1, background: "#fff" }} />
          {tag}
        </div>
        <div style={{
          fontFamily: "var(--font-display)", fontWeight: 700,
          fontSize: "clamp(36px, 4.4vw, 64px)", lineHeight: 0.98,
          letterSpacing: "0.4px", marginBottom: 24,
        }}>{name}</div>
        <p style={{
          fontFamily: "var(--font-ui)", fontSize: 16, lineHeight: 1.6,
          letterSpacing: "0.32px", maxWidth: 480, color: "#f0f0fa", margin: 0,
        }}>{body}</p>
      </div>

      <div>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
          borderTop: "1px solid rgba(255,255,255,0.22)",
          marginTop: 60, marginBottom: 36,
        }}>
          {metrics.map(([v, l], i) => (
            <div key={i} style={{
              padding: "20px 14px 0 0",
              borderRight: i < metrics.length - 1 ? "1px solid rgba(255,255,255,0.12)" : 0,
              paddingLeft: i === 0 ? 0 : 16,
            }}>
              <div style={{
                fontFamily: "var(--font-display)", fontWeight: 700,
                fontSize: 28, letterSpacing: "0.6px", textTransform: "uppercase",
                lineHeight: 1, marginBottom: 8,
              }}>{v}</div>
              <div style={{
                fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "1.17px",
                textTransform: "uppercase", opacity: 0.7,
              }}>{l}</div>
            </div>
          ))}
        </div>

        <div style={{
          display: "inline-flex", alignItems: "center", gap: 14,
          fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: 13,
          letterSpacing: "1.17px", textTransform: "uppercase", paddingBottom: 4,
        }}>
          {cta}
          <span aria-hidden="true" style={{
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            width: 38, height: 38, borderRadius: 999,
            border: "1px solid #fff",
            background: hover ? "#fff" : "transparent",
            color: hover ? "#000" : "#fff",
            transition: "background 200ms ease, color 200ms ease",
          }}>
            <svg width="14" height="14" viewBox="0 0 14 14"><path d="M1 7 H12 M8 3 L12 7 L8 11" stroke="currentColor" strokeWidth="1.5" fill="none"/></svg>
          </span>
        </div>
      </div>
    </a>
  );
}

window.BusinessCards = BusinessCards;