// Contact page — email and addresses, no form per the brief.
// Split into Sales / Support / Press blocks and three office addresses,
// styled as instrument readouts so it feels of a piece with the rest.

const ContactHero = () => (
  <section style={{
    position: "relative", overflow: "hidden",
    padding: "120px 80px 80px",
  }}>
    <div className="site-grid" />
    <div className="nh-glow" style={{
      width: 800, height: 800, left: "50%", top: -240,
      transform: "translateX(-50%)",
      background: "radial-gradient(circle, var(--nh-amber) 0%, transparent 60%)",
      opacity: 0.14,
    }} />

    <div className="site-wrap" style={{ position: "relative", textAlign: "center" }}>
      <SiteEyebrow id="NH-CONTACT/01" />
      <h1 style={{
        fontFamily: "var(--nh-display)", fontWeight: 500,
        fontSize: "clamp(64px, 9vw, 120px)",
        lineHeight: 0.98, letterSpacing: "-0.035em",
        margin: "32px 0 0", color: "var(--nh-ink)",
        textWrap: "balance",
      }}>
        Contact.
      </h1>
      <p style={{
        fontFamily: "var(--nh-display)", fontWeight: 400,
        fontSize: 22, lineHeight: 1.45, letterSpacing: "-0.01em",
        color: "var(--nh-ink-2)", margin: "28px auto 0", maxWidth: 640,
        textWrap: "balance",
      }}>
        Use the address below that best fits your question.
      </p>
    </div>
  </section>
);

// ────────── Channels — three big email blocks ──────────
const CHANNELS = [
  {
    eyebrow: "SALES",
    title: "Sales and demos",
    body: "For prospective customers. Include a short description of your fleet — capacity, regions, current SCADA — and we will follow up with a demo slot and an NDA.",
    email: "sales@neohelio.co",
    accent: true,
  },
  {
    eyebrow: "SUPPORT",
    title: "Customer support",
    body: "For existing customers. Operator-staffed support; P1 incidents are included in the standard contract.",
    email: "support@neohelio.co",
  },
  {
    eyebrow: "PRESS",
    title: "Press and partnerships",
    body: "For journalists, analysts, and prospective integration partners. Press kit available on request.",
    email: "press@neohelio.co",
  },
];

const ContactChannels = () => (
  <section className="site-section">
    <div className="site-wrap">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
        {CHANNELS.map((c, i) => (
          <a key={i} href={`mailto:${c.email}`} className="nh-card" style={{
            padding: 36,
            display: "flex", flexDirection: "column", gap: 0,
            background: c.accent
              ? "linear-gradient(180deg, rgba(245,158,11,0.05), rgba(245,158,11,0.005))"
              : undefined,
            borderColor: c.accent ? "var(--nh-line-amber)" : undefined,
            transition: "transform .15s ease, border-color .15s ease",
            cursor: "pointer", minHeight: 360,
          }}
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = "var(--nh-accent)";
              e.currentTarget.style.transform = "translateY(-2px)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = c.accent ? "var(--nh-line-amber)" : "var(--nh-line)";
              e.currentTarget.style.transform = "translateY(0)";
            }}>
            <span className="nh-mono" style={{
              fontSize: 10, color: "var(--nh-accent)", letterSpacing: "0.22em",
              textTransform: "uppercase",
            }}>◇ {c.eyebrow}</span>
            <h2 style={{
              fontFamily: "var(--nh-display)", fontWeight: 500,
              fontSize: 34, letterSpacing: "-0.025em", lineHeight: 1.1,
              margin: "20px 0 0", color: "var(--nh-ink)",
            }}>{c.title}</h2>
            <p style={{
              fontFamily: "var(--nh-sans)", fontSize: 14, lineHeight: 1.65,
              color: "var(--nh-ink-2)", margin: "16px 0 0",
            }}>{c.body}</p>

            <div style={{ flex: 1 }} />

            <div style={{
              marginTop: 32, paddingTop: 20,
              borderTop: "1px solid var(--nh-line)",
            }}>
              <div className="nh-kv">
                <span className="k">channel</span>
                <span className="v" style={{ color: "var(--nh-accent)", fontSize: 14 }}>{c.email}</span>
              </div>
            </div>
          </a>
        ))}
      </div>

      {/* general channel — single line below the three cards */}
      <div style={{
        marginTop: 32, padding: "24px 32px",
        border: "1px solid var(--nh-line)",
        background: "var(--nh-bg-2)",
        borderRadius: 6,
        display: "flex", justifyContent: "space-between", alignItems: "center",
        gap: 24, flexWrap: "wrap",
      }}>
        <div>
          <div className="nh-mono" style={{
            fontSize: 10, color: "var(--nh-ink-4)", letterSpacing: "0.22em",
            textTransform: "uppercase",
          }}>◇ GENERAL</div>
          <div style={{
            fontFamily: "var(--nh-display)", fontSize: 18, fontWeight: 500,
            marginTop: 4, color: "var(--nh-ink)",
          }}>
            Anything else.
          </div>
        </div>
        <a href="mailto:hello@neohelio.co" className="nh-mono" style={{
          fontSize: 16, color: "var(--nh-accent)", letterSpacing: "0.08em",
          display: "flex", alignItems: "center", gap: 10,
        }}>
          hello@neohelio.co
          <span style={{ fontSize: 14 }}>→</span>
        </a>
      </div>
    </div>
  </section>
);

// ────────── On-call strip — for existing customers with a P1 incident ──────────
const ContactOnCall = () => (
  <section className="site-section site-section--tight" style={{ background: "var(--nh-bg-2)" }}>
    <div className="site-wrap">
      <div style={{
        padding: "28px 32px",
        border: "1px dashed var(--nh-line-2)",
        background: "rgba(245,158,11,0.03)",
        borderRadius: 6,
        display: "flex", alignItems: "center", gap: 20,
      }}>
        <span className="nh-dot nh-dot-amber nh-pulse" />
        <div style={{ flex: 1 }}>
          <div className="nh-mono" style={{
            fontSize: 10, color: "var(--nh-accent)", letterSpacing: "0.22em", textTransform: "uppercase",
          }}>◆ ON-CALL</div>
          <div style={{
            fontFamily: "var(--nh-sans)", fontSize: 15, color: "var(--nh-ink-2)",
            marginTop: 6,
          }}>
            For existing customers with a P1 incident, use the in-console panic button or page the on-call rotation directly.
          </div>
        </div>
        <a href="mailto:oncall@neohelio.co" className="site-btn">Page on-call →</a>
      </div>
    </div>
  </section>
);

// ────────── Closing — instrument-style sign-off ──────────
const ContactSignoff = () => (
  <section className="site-section" style={{ paddingBottom: 80 }}>
    <div className="site-wrap" style={{
      display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center",
    }}>
      <div>
        <SiteEyebrow id="NH-DIRECTORY/01" />
        <h2 className="site-h2" style={{ marginTop: 24, maxWidth: "14ch" }}>
          General inquiries.
        </h2>
        <p className="site-body" style={{ fontSize: 17, marginTop: 24 }}>
          If none of the channels above fits, email <a href="mailto:hello@neohelio.co" style={{ color: "var(--nh-accent)" }}>hello@neohelio.co</a> and we will route it. The full address directory is on the right.
        </p>
        <div style={{ marginTop: 32 }}>
          <a href="mailto:hello@neohelio.co" className="site-btn site-btn--primary"
             style={{ fontSize: 13, padding: "16px 28px" }}>
            hello@neohelio.co →
          </a>
        </div>
      </div>

      <div style={{
        padding: 36,
        border: "1px solid var(--nh-line)",
        background: "var(--nh-bg-2)",
        borderRadius: 6,
      }}>
        <div className="nh-mono" style={{
          fontSize: 10, color: "var(--nh-ink-3)", letterSpacing: "0.22em",
          marginBottom: 18, textTransform: "uppercase",
        }}>
          ◇ ADDRESS DIRECTORY
        </div>
        {[
          ["GENERAL",     "hello@neohelio.co"],
          ["SALES",       "sales@neohelio.co"],
          ["SUPPORT",     "support@neohelio.co"],
          ["PRESS",       "press@neohelio.co"],
          ["CAREERS",     "jobs@neohelio.co"],
          ["LEGAL",       "legal@neohelio.co"],
          ["SECURITY",    "security@neohelio.co"],
        ].map(([k, v], i) => (
          <div className="nh-kv" key={i}>
            <span className="k">{k}</span>
            <span className="v">
              <a href={`mailto:${v}`} style={{ color: "var(--nh-ink)" }}
                 onMouseEnter={(e) => e.currentTarget.style.color = "var(--nh-accent)"}
                 onMouseLeave={(e) => e.currentTarget.style.color = "var(--nh-ink)"}>
                {v}
              </a>
            </span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const ContactPage = () => (
  <>
    <SiteNav active="contact" />
    <main>
      <ContactHero />
      <ContactChannels />
      <ContactOnCall />
      <ContactSignoff />
    </main>
    <SiteFooter />
  </>
);

window.ContactPage = ContactPage;