/* eslint-disable */
function Hero({ t, p }) {
  const [h1, h2] = (t.hero.headline || "").split("\n");
  return (
    <section data-screen-label="01 Hero" style={{
      position: "relative",
      minHeight: "100vh",
      backgroundImage: `${p.photoOverlayHero}, url(https://images.unsplash.com/photo-1494412651409-8dd9b4d77ad6?auto=format&fit=crop&w=2400&q=75)`,
      backgroundSize: "cover", backgroundPosition: "center",
      backgroundColor: p.bg, color: p.fg,
      display: "flex", flexDirection: "column", justifyContent: "flex-end",
      padding: "120px 0 0 0",
      overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", top: 96, left: 0, right: 0,
        display: "flex", justifyContent: "space-between",
        padding: "0 32px",
        fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "1.17px",
        textTransform: "uppercase", opacity: 0.85,
      }}>
        <span>{t.hero.eyebrow}</span>
        <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: p.fg, boxShadow: `0 0 0 4px ${p.hairlineSoft}` }} />
          {t.hero.ticker}
        </span>
      </div>

      <div style={{ maxWidth: 1400, margin: "0 auto", padding: "0 32px 0 32px", width: "100%" }}>
        <h1 style={{
          fontFamily: "var(--font-display)", fontWeight: 700,
          fontSize: "clamp(56px, 11vw, 168px)", lineHeight: 0.92,
          letterSpacing: "-0.5px", textTransform: "uppercase",
          margin: "0 0 32px", whiteSpace: "pre-line",
        }}>{h1}{"\n"}{h2}</h1>

        <div style={{
          display: "flex", alignItems: "flex-end", justifyContent: "space-between",
          gap: 24, paddingBottom: 80, borderBottom: `1px solid ${p.hairlineSoft}`,
          flexWrap: "wrap",
        }}>
          <div style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(22px, 2.6vw, 36px)", lineHeight: 1.1,
            letterSpacing: "1.2px", textTransform: "uppercase",
            display: "flex", alignItems: "center", gap: 22,
          }}>
            <span>FAST.</span>
            <span style={{ width: 1, height: 28, background: p.hairlineSoft }} />
            <span>FAR.</span>
            <span style={{ width: 1, height: 28, background: p.hairlineSoft }} />
            <span>FIRST.</span>
          </div>
          <a href="../contact/Contact.html" style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            background: "transparent", color: p.fg,
            border: `1px solid ${p.btnBorder}`, borderRadius: 999,
            padding: "16px 26px",
            fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: 13,
            letterSpacing: "1.17px", textTransform: "uppercase", textDecoration: "none",
          }}>
            {t.hero.cta}
            <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true" style={{ marginLeft: 4 }}>
              <path d="M1 7 H12 M8 3 L12 7 L8 11" stroke="currentColor" strokeWidth="1.5" fill="none" />
            </svg>
          </a>
        </div>

        <ForwardTicker p={p} />
      </div>
    </section>
  );
}

function ForwardTicker({ p }) {
  const base = ["FAST.", "FAR.", "FIRST.", "Forwardmax."];
  const items = [...base, ...base, ...base, ...base, ...base, ...base];
  return (
    <div style={{
      position: "relative",
      borderBottom: `1px solid ${p.hairlineSoft}`,
      overflow: "hidden", padding: "18px 0",
      maskImage: `linear-gradient(90deg, transparent, ${p.bg} 6%, ${p.bg} 94%, transparent)`,
      WebkitMaskImage: `linear-gradient(90deg, transparent, ${p.bg} 6%, ${p.bg} 94%, transparent)`,
    }}>
      <div style={{
        display: "flex", gap: 48, alignItems: "center",
        whiteSpace: "nowrap",
        animation: "fwdTicker 30s linear infinite reverse",
        fontFamily: "var(--font-display)", fontWeight: 700,
        fontSize: 22, letterSpacing: "1.6px",
      }}>
        {items.concat(items).map((it, i) => (
          <span key={i} style={{
            display: "inline-flex", alignItems: "center", gap: 24,
            color: i % 2 ? (p.name === "dark" ? "rgba(255,255,255,0.55)" : "rgba(0,0,0,0.5)") : p.fg
          }}>
            <svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true">
              <path d="M0 1 L8 7 L0 13 Z M5 1 L13 7 L5 13 Z" fill="currentColor" />
            </svg>
            {it}
          </span>
        ))}
      </div>
      <style>{`@keyframes fwdTicker { from { transform: translateX(0);} to { transform: translateX(-50%);} }`}</style>
    </div>
  );
}

window.Hero = Hero;