/* eslint-disable */
function EmailChannel({ t, p }) {
  const e = t.contact.email;
  const [copied, setCopied] = React.useState(false);
  const copy = (ev) => {
    ev.preventDefault();
    try {
      navigator.clipboard.writeText(e.address);
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    } catch (_) {}
  };

  return (
    <section data-screen-label="02 Email" style={{
      position: "relative", background: p.bgSoft, color: p.fg,
      borderBottom: `1px solid ${p.hairline}`,
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto", padding: "140px 32px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 220px) 1fr", gap: 48, alignItems: "start", marginBottom: 64 }}>
          <div style={window.eyebrowStyle(p)}>— {e.eyebrow}</div>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(40px, 6vw, 92px)", lineHeight: 0.96,
            letterSpacing: "0.4px", textTransform: "uppercase",
            margin: 0, textWrap: "balance",
          }}>{e.title}</h2>
        </div>

        <a href={`mailto:${e.address}`} style={{
          display: "flex", alignItems: "center", gap: "clamp(16px, 2.4vw, 32px)",
          padding: "clamp(28px, 4vw, 56px) clamp(24px, 3vw, 40px)",
          background: p.bg, border: `1px solid ${p.hairline}`,
          color: p.fg, textDecoration: "none",
          transition: "transform 200ms ease, border-color 200ms ease",
        }}
        onMouseEnter={(ev) => { ev.currentTarget.style.transform = "translateY(-2px)"; ev.currentTarget.style.borderColor = p.fg; }}
        onMouseLeave={(ev) => { ev.currentTarget.style.transform = "translateY(0)"; ev.currentTarget.style.borderColor = p.hairline; }}>
          <svg width="clamp(28,3vw,44)" height="clamp(20,2.2vw,30)" viewBox="0 0 18 14" aria-hidden="true" style={{ width: "clamp(28px, 3vw, 44px)", height: "auto", flex: "0 0 auto", color: p.fg }}>
            <path d="M0 1 L8 7 L0 13 Z M5 1 L13 7 L5 13 Z" fill="currentColor" />
          </svg>
          <span style={{
            flex: 1, minWidth: 0,
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(28px, 5.4vw, 88px)", lineHeight: 1,
            letterSpacing: "-0.4px", textTransform: "lowercase",
            overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
          }}>{e.address}</span>
          <button type="button" onClick={copy} aria-label="Copy email" style={{
            background: "transparent", border: `1px solid ${p.hairline}`,
            color: p.fg, padding: "10px 16px",
            fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "1.17px",
            textTransform: "uppercase", cursor: "pointer", whiteSpace: "nowrap",
            transition: "background 160ms ease, color 160ms ease",
          }}
          onMouseEnter={(ev) => { ev.currentTarget.style.background = p.fg; ev.currentTarget.style.color = p.bg; }}
          onMouseLeave={(ev) => { ev.currentTarget.style.background = "transparent"; ev.currentTarget.style.color = p.fg; }}>
            {copied ? "Copied" : "Copy"}
          </button>
        </a>

        <p style={{
          marginTop: 32, fontFamily: "var(--font-ui)", fontSize: 16, lineHeight: 1.6,
          letterSpacing: "0.2px", color: p.fgMute, maxWidth: 640, textWrap: "pretty",
        }}>{e.reassurance}</p>
      </div>
    </section>
  );
}

window.EmailChannel = EmailChannel;