import { mdiEmailOutline, mdiMapMarkerOutline, mdiPhoneOutline } from '@mdi/js';
import type { ReactElement } from 'react';
import { useRouter } from 'next/router';
import React from 'react';

import BaseIcon from '../components/BaseIcon';
import InquiryForm from '../components/marketing/InquiryForm';
import MarketingButton from '../components/marketing/MarketingButton';
import MarketingLayout from '../components/marketing/MarketingLayout';
import MarketingPageHero from '../components/marketing/MarketingPageHero';
import MarketingSeo from '../components/marketing/MarketingSeo';
import MarketingSection from '../components/marketing/MarketingSection';
import { brand } from '../components/marketing/marketingData';
import LayoutGuest from '../layouts/Guest';

const inquiryLinks = [
  { href: '/contact?type=request_samples', label: 'Request Samples' },
  { href: '/contact?type=get_a_quote', label: 'Get a Quote' },
  { href: '/contact?type=partner_with_us', label: 'Partner With Us' },
];

export default function ContactPage() {
  const router = useRouter();
  const initialType = typeof router.query.type === 'string' ? router.query.type : undefined;

  return (
    <>
      <MarketingSeo
        title="Contact"
        description="Contact Alem Desta Coffee Export in Addis Ababa and submit sample requests, quote requests, or partnership inquiries."
      />
      <MarketingLayout>
        <MarketingPageHero
          eyebrow="Contact"
          title="Start a confident buying conversation"
          description="The contact experience is designed as a real workflow: choose your inquiry type, submit details, and route the request directly into the admin inquiry queue."
          image="https://images.unsplash.com/photo-1494314671902-399b18174975?auto=format&fit=crop&w=1400&q=80"
        />

        <MarketingSection
          eyebrow="How to engage"
          title="Choose the right buyer action and share your needs"
          description="Sample requests, quotes, and partnership conversations all flow through one elegant form so your team can respond quickly and consistently."
        >
          <div className="flex flex-wrap gap-3">
            {inquiryLinks.map((item) => (
              <MarketingButton key={item.href} href={item.href} variant={initialType === item.href.split('=')[1] ? 'primary' : 'ghost'}>
                {item.label}
              </MarketingButton>
            ))}
          </div>
          <div className="mt-10 grid gap-8 lg:grid-cols-[0.75fr_1.25fr]">
            <div className="space-y-5">
              <div className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-6 shadow-[0_20px_65px_rgba(20,38,29,0.06)]">
                <div className="flex items-start gap-4">
                  <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F4F1E6] text-[#1F3A2D]">
                    <BaseIcon path={mdiMapMarkerOutline} />
                  </div>
                  <div>
                    <p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#9FB06F]">Location</p>
                    <p className="mt-3 text-sm leading-7 text-[#556257]">{brand.address}</p>
                  </div>
                </div>
              </div>
              <div className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-6 shadow-[0_20px_65px_rgba(20,38,29,0.06)]">
                <div className="flex items-start gap-4">
                  <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F4F1E6] text-[#1F3A2D]">
                    <BaseIcon path={mdiEmailOutline} />
                  </div>
                  <div>
                    <p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#9FB06F]">Email</p>
                    <p className="mt-3 text-sm leading-7 text-[#556257]">{brand.email}</p>
                  </div>
                </div>
              </div>
              <div className="rounded-[1.75rem] border border-[#1F3A2D]/8 bg-white p-6 shadow-[0_20px_65px_rgba(20,38,29,0.06)]">
                <div className="flex items-start gap-4">
                  <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#F4F1E6] text-[#1F3A2D]">
                    <BaseIcon path={mdiPhoneOutline} />
                  </div>
                  <div>
                    <p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#9FB06F]">Phone</p>
                    <div className="mt-3 space-y-1 text-sm leading-7 text-[#556257]">
                      {brand.phones.map((phone) => (
                        <p key={phone}>{phone}</p>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <InquiryForm initialInquiryType={initialType} />
          </div>
        </MarketingSection>
      </MarketingLayout>
    </>
  );
}

ContactPage.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};
