// ContactPage — email + office hours cards.

function ContactPage() {
  const { colors, SectionLabel } = window;

  return (
    <div data-screen-label="Contact">
      <section style={{ padding: "160px 0 80px" }}>
        <div className="max-w-[1240px] mx-auto px-6 md:px-10">
          <SectionLabel className="mb-5">Contact</SectionLabel>
          <h1
            style={{
              fontSize: "clamp(40px,5.4vw,72px)",
              fontWeight: 500,
              letterSpacing: "-0.04em",
              lineHeight: 1.02,
              color: colors.body,
              maxWidth: 720,
            }}
          >
            Get in touch.
          </h1>
          <p className="mt-7 text-[18px] max-w-[640px]" style={{ color: colors.muted, lineHeight: 1.6 }}>
            Questions about Sfuma, your subscription, or partnership? Drop us a line.
          </p>
        </div>
      </section>

      <section style={{ padding: "20px 0 160px" }}>
        <div className="mx-auto px-6" style={{ maxWidth: 560 }}>
          <div
            className="p-8"
            style={{
              background: colors.surface2,
              border: `0.6px solid ${colors.hairline}`,
              borderRadius: 10,
            }}
          >
            <SectionLabel className="mb-3">Email</SectionLabel>
            <a
              href="mailto:support@sfuma.in"
              className="block transition-opacity hover:opacity-80"
              style={{
                color: colors.primary,
                fontSize: 24,
                fontWeight: 500,
                letterSpacing: "-0.015em",
                wordBreak: "break-all",
              }}
            >
              support@sfuma.in
            </a>
            <p className="mt-4 text-[13px]" style={{ color: colors.muted, lineHeight: 1.6 }}>
              We reply within 1–3 working days.
            </p>
          </div>

          <div
            className="mt-5 p-6"
            style={{
              background: "#fff",
              border: `0.6px solid ${colors.hairline}`,
              borderRadius: 10,
            }}
          >
            <SectionLabel className="mb-3">Office hours</SectionLabel>
            <div className="text-[14px]" style={{ color: colors.body, lineHeight: 1.6 }}>
              Monday–Friday<br />
              9:00 – 18:00 IST
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.ContactPage = ContactPage;