// CONTACT strip. terracotta → oxblood

const PAY_METHODS = [
  {
    name: 'PayPal',
    handle: 'paypal.me/JacobTapp826',
    href: 'https://www.paypal.me/JacobTapp826',
    mod: 'paypal',
    icon: (
      <svg width="26" height="26" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M7.4 19.5l.5-3.1h2.6c3.4 0 5.8-1.6 6.4-5 .5-2.8-1-4.3-3.9-4.3H8.2c-.4 0-.7.3-.8.7L5.1 19c0 .3.2.5.5.5h1.8z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
        <path d="M9.6 16.4l.6-3.6h2.3c2.6 0 4.3-1.1 4.8-3.6" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" opacity="0.7"/>
      </svg>
    ),
  },
  {
    name: 'Wise',
    handle: 'wise.com/pay/me/jacobmitchellt',
    href: 'https://wise.com/pay/me/jacobmitchellt?share=true',
    mod: 'wise',
    icon: (
      <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor"
           strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M7 8 H16 L11 18"/>
        <path d="M7.2 8.2 L12.2 11.3 L7.2 14.6"/>
      </svg>
    ),
  },
];

function Contact({ onConnect }) {
  return (
    <section className="section contact" id="contact">
      <div className="container">
        <Reveal as="div"><Eyebrow tone="cream">Reach Out</Eyebrow></Reveal>
        <Reveal as="h2" className="h-section" delay={100}>Begin Your Journey.</Reveal>
        <Reveal as="p" delay={200}>
          Whether you're ready for a healing session, curious about the work,
          or want to bring the Yidaki to your event reach out. Every journey
          begins with one step.
        </Reveal>
        <Reveal as="div" delay={300} className="contact__channels">
          <a className="contact__channel" href="https://www.instagram.com/the_cosmic_healer_" target="_blank" rel="noopener noreferrer">
            <span className="contact__channel-label">Message on Instagram</span>
            <span className="contact__channel-value">@the_cosmic_healer_</span>
          </a>
          <a className="contact__channel" href="mailto:333thecosmichealer@gmail.com">
            <span className="contact__channel-label">Or send an email</span>
            <span className="contact__channel-value">333thecosmichealer@gmail.com</span>
          </a>
        </Reveal>
        <Reveal as="div" className="contact__cta" delay={400}>
          <Button size="lg" onClick={onConnect}>Message on Instagram</Button>
        </Reveal>

        <Reveal as="div" className="contact__pay" delay={450}>
          <Eyebrow tone="gold">Send a Payment · Offer Support</Eyebrow>
          <p className="contact__pay-note">
            Settle a session or offer an energy exchange securely through PayPal or Wise.
          </p>
          <div className="contact__pay-grid">
            {PAY_METHODS.map((m) => (
              <a
                key={m.name}
                className={`pay-card pay-card--${m.mod}`}
                href={m.href}
                target="_blank"
                rel="noopener noreferrer"
              >
                <span className="pay-card__icon">{m.icon}</span>
                <span className="pay-card__body">
                  <span className="pay-card__name">{m.name}</span>
                  <span className="pay-card__handle">{m.handle}</span>
                </span>
                <span className="pay-card__arrow" aria-hidden="true">&#8599;</span>
              </a>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.Contact = Contact;