// Contact.jsx — final CTA with 4 contact channels + inline form

function Contact() {
  useLucide();

  return (
    <Section id="contact" bg="dark"
             style={{ borderTop: "1px solid var(--blue-900)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr",
                    gap: 72, alignItems: "start" }} className="grid-contact">

        {/* Left: copy + channel buttons */}
        <div>
          <Eyebrow color="rgba(255,255,255,0.55)">Final word</Eyebrow>
          <h2 style={{
            fontSize: "clamp(40px, 5.4vw, 64px)", fontWeight: 800,
            letterSpacing: "-0.035em", lineHeight: 1.02,
            margin: "14px 0 22px", color: "#fff", textWrap: "balance",
          }}>Tell us what's eating your week.</h2>

          <p style={{ fontSize: 19, lineHeight: 1.55, color: "rgba(255,255,255,0.78)",
                      margin: "0 0 16px", maxWidth: 540, fontStyle: "italic" }}>
            No hard sell. We'll tell you straight if we can help.
          </p>

          <p style={{ fontSize: 16, lineHeight: 1.6, color: "rgba(255,255,255,0.72)",
                      margin: "0 0 32px", maxWidth: 520, textWrap: "pretty" }}>
            Send a message to any channel below or call us and you'll see exactly how it works — our AI assistant <strong style={{ color: "#fff", fontWeight: 600 }}>David</strong> will reply, answer your questions, and book a call with Mikhail if you want one.
          </p>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, maxWidth: 480, width: "100%" }} className="contact-cta-grid">
            <ChannelButton icon="message-circle" bg="#25D366" label="WhatsApp" sub="07572 367442" href="https://wa.me/447572367442" />
            <ChannelButton icon="phone"          bg="var(--blue)" label="Call us" sub="07378 242539" href="tel:07378242539" />
            <ChannelButton icon="send"           bg="#229ED9" label="Telegram" sub="@mikhailtruf" href="https://t.me/mikhailtruf" />
            <ChannelButton icon="mail"           bg="var(--orange)" label="Send a message" sub="Use the form →" href="#contact-form" />
          </div>
        </div>

        {/* Right: form */}
        <div id="contact-form" style={{ scrollMarginTop: 80 }}>
          <ContactForm />
        </div>
      </div>
    </Section>
  );
}

function ChannelButton({ icon, bg, label, sub, href }) {
  const external = href.startsWith("http");
  return (
    <a href={href} target={external ? "_blank" : undefined} rel={external ? "noopener" : undefined}
       style={{
         display: "flex", alignItems: "center", gap: 12,
         padding: "14px 16px", borderRadius: 12,
         background: "rgba(255,255,255,0.05)",
         border: "1px solid rgba(255,255,255,0.14)",
         textDecoration: "none",
         transition: "background .15s var(--t-ease), transform .12s var(--t-ease), border-color .15s",
       }}
       onMouseEnter={e => { e.currentTarget.style.background = "rgba(255,255,255,0.1)"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.28)"; e.currentTarget.style.transform = "translateY(-1px)"; }}
       onMouseLeave={e => { e.currentTarget.style.background = "rgba(255,255,255,0.05)"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.14)"; e.currentTarget.style.transform = "translateY(0)"; }}>
      <span style={{
        width: 36, height: 36, borderRadius: 10, background: bg,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        color: "#fff", flexShrink: 0,
      }}>
        <i data-lucide={icon} style={{ width: 17, height: 17, strokeWidth: 2.2 }}></i>
      </span>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: "#fff" }}>{label}</div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11,
                      color: "rgba(255,255,255,0.6)", whiteSpace: "nowrap",
                      overflow: "hidden", textOverflow: "ellipsis" }}>{sub}</div>
      </div>
    </a>
  );
}

window.Contact = Contact;