import "./contact.css";
import { ContactForm } from "./contact-form";

function ContactIcon({ icon }: { icon: "mail" | "clock" | "pin" }) {
  switch (icon) {
    case "mail":
      return (
        <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden>
          <rect x="3.6" y="5.6" width="16.8" height="12.8" rx="1.8" fill="none" stroke="currentColor" strokeWidth="1.6" />
          <path d="M4.4 6.6l7.6 6 7.6-6" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      );
    case "clock":
      return (
        <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden>
          <circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" strokeWidth="1.6" />
          <path d="M12 7.6V12l3 2" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      );
    case "pin":
      return (
        <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden>
          <path
            d="M12 3.6c3.6 0 6.4 2.8 6.4 6.2 0 4.4-6.4 10.6-6.4 10.6S5.6 14.2 5.6 9.8c0-3.4 2.8-6.2 6.4-6.2z"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.6"
            strokeLinejoin="round"
          />
          <circle cx="12" cy="9.8" r="2.2" fill="none" stroke="currentColor" strokeWidth="1.6" />
        </svg>
      );
  }
}

export function Contact() {
  return (
    <section className="wwd-section contact-section" id="contact">
      <div className="wwd-inner">
        <div className="wwd-top-row">
          <span className="wwd-eyebrow">Contact</span>
        </div>
        <div className="wwd-header-row">
          <h1 className="wwd-headline">Let&apos;s talk about your desk.</h1>
          <p className="wwd-body">
            Tell us about your book, your team and what&apos;s slowing you down today. We&apos;ll get back to you within one business day.
          </p>
        </div>

        <div className="contact-grid">
          <div className="contact-info">
            <div className="contact-info-item">
              <span className="contact-info-icon">
                <ContactIcon icon="mail" />
              </span>
              <div>
                <p className="contact-info-label">Email</p>
                <p className="contact-info-value">
                  <a href="mailto:hello@oxyfinz.com">hello@oxyfinz.com</a>
                </p>
              </div>
            </div>
            <div className="contact-info-item">
              <span className="contact-info-icon">
                <ContactIcon icon="clock" />
              </span>
              <div>
                <p className="contact-info-label">Response time</p>
                <p className="contact-info-value">Within 1 business day</p>
              </div>
            </div>
            <div className="contact-info-item">
              <span className="contact-info-icon">
                <ContactIcon icon="pin" />
              </span>
              <div>
                <p className="contact-info-label">Built for</p>
                <p className="contact-info-value">Wealth managers, asset managers &amp; family offices</p>
              </div>
            </div>
          </div>

          <ContactForm />
        </div>
      </div>
    </section>
  );
}