import { contactInfo } from '../data/content';

export function ContactSection() {
  const mailtoHref = `mailto:${contactInfo.email}?subject=${encodeURIComponent(contactInfo.mailSubject)}`;

  return (
    <section id="contact" className="pb-[110px]">
      <div className="mx-auto max-w-[1080px] px-6">
        <div className="rounded-[20px] border border-accent-line bg-gradient-to-br from-surface-2 to-surface px-10 py-14 text-center">
          <span className="font-mono block text-sm uppercase tracking-wider text-accent">
            // contact
          </span>
          <h2 className="font-display mt-3.5 text-3xl font-bold sm:text-4xl">
            {contactInfo.heading}
          </h2>
          <p className="mx-auto mb-8 mt-3.5 max-w-[46ch] text-muted">{contactInfo.description}</p>
          <a
            href={mailtoHref}
            className="rounded-lg bg-accent px-6 py-3.5 text-[0.98rem] font-semibold text-[var(--color-accent-contrast)] transition-colors hover:bg-[var(--color-accent-hover)]"
          >
            Stuur een bericht
          </a>
          <span className="font-mono mt-5 block text-[0.9rem] text-muted">
            of mail direct naar{' '}
            <a href={`mailto:${contactInfo.email}`} className="text-accent underline-offset-2 hover:underline">
              {contactInfo.email}
            </a>
          </span>
        </div>
      </div>
    </section>
  );
}