import React from "react";
import SectionHeading from "../components/SectionHeading";
import CTASection from "../components/CTASection";
import SEO from "../components/SEO";
import { getMetaTags } from "../config/metaTags";

const Contact: React.FC = () => {
  return (
    <>
      <SEO meta={getMetaTags("contact")} />
      <div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900">
      <section className="max-w-4xl mx-auto px-6 pt-24 pb-12">
        <SectionHeading
          eyebrow="Contact"
          title="Talk with an Igny8 strategist."
          description="Share your goals, current stack, and timeline. We’ll map automation opportunities, project ROI, and plan your launch."
        />
      </section>

      <section className="max-w-5xl mx-auto px-6 pb-24 grid grid-cols-1 lg:grid-cols-2 gap-12">
        <form className="rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-[var(--color-primary)]/10 via-white to-[var(--color-success)]/5 p-10 space-y-6 shadow-lg">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <label className="flex flex-col gap-2 text-sm text-slate-600">
              First name
              <input
                type="text"
                placeholder="Alex"
                className="rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
              />
            </label>
            <label className="flex flex-col gap-2 text-sm text-slate-600">
              Last name
              <input
                type="text"
                placeholder="Rivera"
                className="rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
              />
            </label>
          </div>

          <label className="flex flex-col gap-2 text-sm text-slate-600">
            Work email
            <input
              type="email"
              placeholder="you@company.com"
              className="rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
            />
          </label>

          <label className="flex flex-col gap-2 text-sm text-slate-600">
            Company
            <input
              type="text"
              placeholder="Company name"
              className="rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
            />
          </label>

          <label className="flex flex-col gap-2 text-sm text-slate-600">
            How can we help?
            <textarea
              rows={4}
              placeholder="Tell us about your current workflow, challenges, and goals."
              className="rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20 resize-none"
            />
          </label>

          <button
            type="submit"
            className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[#0693e3] to-[#0472b8] hover:from-[#0472b8] hover:to-[#0693e3] text-white px-6 py-3 text-sm font-semibold shadow-lg shadow-[#0693e3]/30 transition-all w-full"
          >
            Book strategy call
          </button>
        </form>

        <div className="space-y-8">
          <div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/10 to-white p-8 space-y-4 text-sm text-slate-600">
            <h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
              <span className="size-2 rounded-full bg-[#0bbf87]"></span>
              Calendly placeholder
            </h3>
            <div className="aspect-[4/3] rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white flex items-center justify-center text-xs text-slate-500 shadow-inner">
              Embed Calendly iframe here
            </div>
            <p>
              Prefer async? Email us at{" "}
              <a href="mailto:hello@igny8.com" className="text-[#0693e3] hover:text-[#0472b8] font-semibold">
                hello@igny8.com
              </a>{" "}
              or join our community Slack.
            </p>
          </div>

          <div className="rounded-3xl border-2 border-[#ff7a00]/30 bg-gradient-to-br from-[#ff7a00]/10 to-white p-8 space-y-4">
            <h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
              <span className="size-2 rounded-full bg-[#ff7a00]"></span>
              Support perks
            </h3>
            <ul className="space-y-3 text-sm text-slate-600">
              {[
                { text: "24-hour response time on all Launch+ plans.", color: "bg-[#0693e3]" },
                { text: "Dedicated success architect for Scale and Enterprise.", color: "bg-[#0bbf87]" },
                { text: "Migration services when replacing legacy content stacks.", color: "bg-[#ff7a00]" },
              ].map((item) => (
                <li key={item.text} className="flex gap-3">
                  <span className={`mt-1 size-1.5 rounded-full ${item.color} shadow-sm`} />
                  {item.text}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      <CTASection
        title="Need instant access?"
        description="Start a free trial to explore Igny8 in minutes—no credit card, no setup required."
        primaryCta={{ label: "Start free trial", href: "https://app.igny8.com/signup" }}
        secondaryCta={{ label: "Visit help center", href: "/resources" }}
      />
      </div>
    </>
  );
};

export default Contact;

