/* Contact — large CTA + direct channels */

const CHANNELS = [
  { icon: 'Mail', label: 'alex@rivera.dev', href: 'mailto:alex@rivera.dev' },
  { icon: 'Github', label: 'github.com/alexrivera', href: 'https://github.com' },
  { icon: 'Linkedin', label: 'linkedin.com/in/alexrivera', href: 'https://linkedin.com' },
  { icon: 'X', label: '@alexrivera', href: 'https://x.com' },
];

const Contact = () => (
  <Section id="contact" className="border-t hairline">
    <div className="relative card rounded-3xl overflow-hidden p-8 md:p-16">
      {/* glow */}
      <div className="absolute -top-32 -right-32 w-[480px] h-[480px] rounded-full pointer-events-none" style={{ background: 'radial-gradient(circle, var(--accent-glow) 0%, transparent 60%)' }} aria-hidden></div>
      <div className="absolute inset-0 bg-grid opacity-30" aria-hidden></div>

      <div className="relative grid lg:grid-cols-12 gap-10 items-end">
        <div className="lg:col-span-7">
          <Eyebrow index="06">Contact</Eyebrow>
          <h2 className="mt-5 font-display display-tight text-5xl md:text-7xl font-medium">
            Have a system<br />
            <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontWeight: 400 }}>worth building?</span>
          </h2>
          <p className="mt-6 max-w-lg text-base leading-relaxed" style={{ color: 'var(--fg-muted)', textWrap: 'pretty' }}>
            I take on two engagements at a time. The fastest way in is email — I reply within a business day, usually with a question or two and a rough timeline.
          </p>
          <div className="mt-8 flex flex-wrap gap-3">
            <Btn href="mailto:alex@rivera.dev" variant="primary" icon={<I.ArrowUpRight size={16} />}>alex@rivera.dev</Btn>
            <Btn href="https://cal.com" variant="secondary" icon={<I.ArrowUpRight size={16} />}>Book intro call</Btn>
          </div>
        </div>

        <div className="lg:col-span-5">
          <ul className="grid gap-px rounded-xl overflow-hidden" style={{ background: 'var(--line)' }}>
            {CHANNELS.map((c, i) => {
              const Ic = I[c.icon];
              return (
                <motion.li
                  key={c.label}
                  {...fadeUp(i * 0.05)}
                  style={{ background: 'var(--bg-elev)' }}
                >
                  <a href={c.href} className="flex items-center gap-4 px-5 py-4 hover:px-6 transition-all group">
                    <Ic size={16} style={{ color: 'var(--accent)' }} />
                    <span className="text-sm flex-1">{c.label}</span>
                    <I.ArrowUpRight size={14} className="opacity-30 group-hover:opacity-100 transition-opacity" />
                  </a>
                </motion.li>
              );
            })}
          </ul>
        </div>
      </div>
    </div>
  </Section>
);

window.Contact = Contact;