import ContactMeForm from "../../components/Forms/ContactMe/ContactMeForm";

export default function ContactPage(){
  return (
    <section className="section">
      <div className="container">
        <h2 className="text-2xl md:text-3xl font-bold mb-2 text-rainbow">Get in Touch</h2>
        <p className="text-brand-lines mb-6">Reach out via the form or use the details below.</p>

        {/* Desktop/tablet: envelope animation + slide-out form */}
        <div className="hidden md:block">
          <ContactMeForm />
        </div>

        {/* Mobile: simple card version without envelope */}
        <div className="md:hidden">
          <div className="card p-5">
            <form className="space-y-3">
              <div>
                <label className="block text-sm text-brand-lines mb-1">Your email</label>
                <input type="email" required className="w-full rounded-lg bg-brand-bgLight/40 border border-brand-lines/40 focus:outline-none focus:ring-2 focus:ring-brand-accent px-3 py-2 text-brand-text placeholder:text-brand-lines/70" placeholder="Enter your email" />
              </div>
              <div>
                <label className="block text-sm text-brand-lines mb-1">Message</label>
                <textarea required rows={5} className="w-full rounded-lg bg-brand-bgLight/40 border border-brand-lines/40 focus:outline-none focus:ring-2 focus:ring-brand-accent px-3 py-2 text-brand-text placeholder:text-brand-lines/70" placeholder="How can I help?" />
              </div>
              <button type="submit" className="px-4 py-2 rounded-lg font-semibold text-white bg-brandGradient shadow-glow">Send</button>
            </form>
          </div>
        </div>

        <div className="glass p-6 max-w-lg mt-8">
          <p><strong>Email:</strong> <a href="mailto:brunovontor@gmail.com" className="hover:text-[var(--c-other)]">brunovontor@gmail.com</a></p>
          <p className="mt-2"><strong>Phone:</strong> <a href="tel:+420605512624" className="hover:text-[var(--c-other)]">+420 605 512 624</a></p>
        </div>
      </div>
    </section>
  );
}