import { SITE, UI, type Lang, LANGS } from "@/lib/config";
import Link from "next/link";
import type { Metadata } from "next";
import IndustryJsonLd from "@/components/IndustryJsonLd";

export const revalidate = SITE.revalidateSeconds;

export function generateStaticParams() {
  return LANGS.map((lang) => ({ lang }));
}

export async function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Promise<Metadata> {
  const t = UI[params.lang].t;

  return {
    title: `${t.eventsVenuesTitle} | ${SITE.brand}`,
    description: t.eventsVenuesHeroSubline,
    openGraph: {
      title: `${t.eventsVenuesTitle} | ${SITE.brand}`,
      description: t.eventsVenuesHeroSubline,
      type: "website",
    },
  };
}

export default function EventsVenuesPage({
  params,
}: {
  params: { lang: Lang };
}) {
  const t = UI[params.lang].t;
  const dir = UI[params.lang].dir;
  const isAr = params.lang === "ar";

  const targetMarkets = [
    { name: t.evMarket1, desc: t.evMarket1Desc },
    { name: t.evMarket2, desc: t.evMarket2Desc },
    { name: t.evMarket3, desc: t.evMarket3Desc },
    { name: t.evMarket4, desc: t.evMarket4Desc },
    { name: t.evMarket5, desc: t.evMarket5Desc },
    { name: t.evMarket6, desc: t.evMarket6Desc },
    { name: t.evMarket7, desc: t.evMarket7Desc },
    { name: t.evMarket8, desc: t.evMarket8Desc },
    { name: t.evMarket9, desc: t.evMarket9Desc },
    { name: t.evMarket10, desc: t.evMarket10Desc },
    { name: t.evMarket11, desc: t.evMarket11Desc },
    { name: t.evMarket12, desc: t.evMarket12Desc },
  ];

  const features = [
    { title: t.evFeature1Title, desc: t.evFeature1Desc },
    { title: t.evFeature2Title, desc: t.evFeature2Desc },
    { title: t.evFeature3Title, desc: t.evFeature3Desc },
    { title: t.evFeature4Title, desc: t.evFeature4Desc },
    { title: t.evFeature5Title, desc: t.evFeature5Desc },
    { title: t.evFeature6Title, desc: t.evFeature6Desc },
  ];

  const workflows = [
    { title: t.evFlow1Title, example: t.evFlow1Example },
    { title: t.evFlow2Title, example: t.evFlow2Example },
    { title: t.evFlow3Title, example: t.evFlow3Example },
    { title: t.evFlow4Title, example: t.evFlow4Example },
    { title: t.evFlow5Title, example: t.evFlow5Example },
    { title: t.evFlow6Title, example: t.evFlow6Example },
  ];

  const conversations = [
    {
      title: t.evConv1Title,
      messages: [
        { role: "Client", text: t.evConv1Client1 },
        { role: "Mawidi", text: t.evConv1Mawidi1 },
        { role: "Client", text: t.evConv1Client2 },
        { role: "Mawidi", text: t.evConv1Mawidi2 },
      ],
    },
    {
      title: t.evConv2Title,
      messages: [
        { role: "Client", text: t.evConv2Client1 },
        { role: "Mawidi", text: t.evConv2Mawidi1 },
        { role: "Client", text: t.evConv2Client2 },
        { role: "Mawidi", text: t.evConv2Mawidi2 },
      ],
    },
  ];

  const results = [
    { metric: t.evResult1, desc: t.evResult1Desc },
    { metric: t.evResult2, desc: t.evResult2Desc },
    { metric: t.evResult3, desc: t.evResult3Desc },
    { metric: t.evResult4, desc: t.evResult4Desc },
  ];

  const crmFeatures = [
    t.evCRMFeature1,
    t.evCRMFeature2,
    t.evCRMFeature3,
    t.evCRMFeature4,
    t.evCRMFeature5,
    t.evCRMFeature6,
  ];

  const faqs = [
    { q: t.evFAQ1Q, a: t.evFAQ1A },
    { q: t.evFAQ2Q, a: t.evFAQ2A },
    { q: t.evFAQ3Q, a: t.evFAQ3A },
    { q: t.evFAQ4Q, a: t.evFAQ4A },
    { q: t.evFAQ5Q, a: t.evFAQ5A },
    { q: t.evFAQ6Q, a: t.evFAQ6A },
  ];

  const getStartedSteps = [
    { title: t.evGetStartedStep1, desc: t.evGetStartedStep1Desc },
    { title: t.evGetStartedStep2, desc: t.evGetStartedStep2Desc },
    { title: t.evGetStartedStep3, desc: t.evGetStartedStep3Desc },
    { title: t.evGetStartedStep4, desc: t.evGetStartedStep4Desc },
    { title: t.evGetStartedStep5, desc: t.evGetStartedStep5Desc },
  ];

  return (
    <main className="min-h-screen bg-[#FAFAFA]" dir={dir}>
      {/* Hero Section - Editorial Light Style */}
      <section className="relative bg-gradient-to-br from-white via-[#FAFAFA] to-[#F0FDF4] overflow-hidden">
        {/* Subtle grid pattern */}
        <div
          className="absolute inset-0 opacity-[0.03]"
          style={{
            backgroundImage: `linear-gradient(to right, #10B981 1px, transparent 1px), linear-gradient(to bottom, #10B981 1px, transparent 1px)`,
            backgroundSize: "40px 40px",
          }}
        />

        <div className="relative max-w-7xl mx-auto px-6 py-20 md:py-28">
          {/* Section indicator */}
          <div className="flex items-center gap-3 mb-8">
            <span
              className="text-[#10B981] font-mono text-sm tracking-wider"
              dir="ltr"
            >
              01
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
            <span className="text-[#64748B] text-sm font-medium">
              {t.eventsVenuesTitle}
            </span>
          </div>

          <div className="max-w-4xl">
            <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-[#1E293B] tracking-tight mb-6">
              {t.eventsVenuesHeroTitle}
            </h1>

            <p className="text-xl md:text-2xl text-[#64748B] mb-12 leading-relaxed max-w-3xl">
              {t.eventsVenuesHeroSubline}
            </p>

            {/* CTAs */}
            <div className="flex flex-col sm:flex-row gap-4 mb-8">
              <Link
                href={`/${params.lang}/signup`}
                className="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-semibold bg-[#10B981] text-white overflow-hidden"
              >
                <span className="relative z-10">{t.evCtaStartFree}</span>
                <div className="absolute inset-0 bg-[#059669] transform translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
              </Link>
              <Link
                href={`/${params.lang}/demo`}
                className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold border-2 border-[#10B981] text-[#10B981] hover:bg-[#10B981]/10 transition-colors"
              >
                {t.evCtaBookDemo}
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Section 02: B2B Note */}
      <section className="py-12 bg-[#10B981]/[0.05] border-y border-[#10B981]/10">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-start gap-6">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                02
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h3 className="text-lg font-bold text-[#1E293B] mb-2">
                {t.evB2BNoteTitle}
              </h3>
              <p className="text-[#64748B]">{t.evB2BNote}</p>
            </div>
          </div>
        </div>
      </section>

      {/* Section 03: Target Markets */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                03
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.evTargetMarketsTitle}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {t.evTargetMarketsSubtitle}
              </p>
            </div>
          </div>

          {/* Editorial Grid - 4 columns */}
          <div className="grid md:grid-cols-3 lg:grid-cols-4 gap-px bg-slate-200">
            {targetMarkets.map((market, idx) => (
              <div
                key={idx}
                className="group bg-white p-6 hover:bg-[#FAFAFA] transition-colors"
              >
                <div className="flex items-center gap-3 mb-3">
                  <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <h3 className="text-lg font-semibold text-[#1E293B]">
                    {market.name}
                  </h3>
                </div>
                <p className="text-sm text-[#64748B]">{market.desc}</p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 04: Key Features */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                04
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.evWhatTitle}
            </h2>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
            {features.map((feature, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
              >
                <div className="flex items-center gap-3 mb-4">
                  <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <h3 className="text-xl font-semibold text-[#1E293B]">
                    {feature.title}
                  </h3>
                </div>
                <p className="text-[#64748B]">{feature.desc}</p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-6 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 05: Workflow */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                05
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.evWorkflowTitle}
            </h2>
          </div>

          <div className="max-w-4xl space-y-4">
            {workflows.map((workflow, idx) => (
              <div
                key={idx}
                className="bg-[#FAFAFA] p-6 border border-slate-200 hover:border-[#10B981] transition-colors"
              >
                <div className="flex items-start gap-6">
                  <span
                    className="text-[#10B981] font-mono text-3xl font-bold"
                    dir="ltr"
                  >
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <div className="flex-1">
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-2">
                      {workflow.title}
                    </h3>
                    <p className="text-[#64748B] italic">
                      &ldquo;{workflow.example}&rdquo;
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 06: Sample Conversations */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                06
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.evConversationsTitle}
            </h2>
          </div>

          <div className="grid md:grid-cols-2 gap-8 max-w-6xl">
            {conversations.map((conversation, idx) => (
              <div key={idx} className="bg-white p-8 border border-slate-200">
                <div className="flex items-center gap-3 mb-6">
                  <span className="text-[#10B981] font-mono text-sm" dir="ltr">
                    06.{idx + 1}
                  </span>
                  <h3 className="text-xl font-bold text-[#1E293B]">
                    {conversation.title}
                  </h3>
                </div>
                <div className="space-y-4">
                  {conversation.messages.map((message, msgIdx) => (
                    <div
                      key={msgIdx}
                      className={`p-4 ${
                        message.role === "Client"
                          ? "bg-[#FAFAFA] border-l-2 border-slate-300"
                          : "bg-[#10B981]/[0.05] border-l-2 border-[#10B981]"
                      }`}
                    >
                      <div className="flex items-center gap-2 mb-2">
                        <span
                          className="text-xs font-mono text-[#10B981]"
                          dir="ltr"
                        >
                          {String(msgIdx + 1).padStart(2, "0")}
                        </span>
                        <span className="text-sm font-semibold text-[#1E293B]">
                          {message.role}
                        </span>
                      </div>
                      <p className="text-sm text-[#64748B] whitespace-pre-line">
                        {message.text}
                      </p>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 07: Results */}
      <section className="py-24 bg-[#10B981]/[0.03]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                07
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.evResultsTitle}
              </h2>
              <p className="mt-4 text-lg text-[#64748B]">
                {t.evResultsSubtitle}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-slate-200">
            {results.map((result, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 text-center hover:bg-[#FAFAFA] transition-colors"
              >
                <span
                  className="text-[#10B981] font-mono text-xs block mb-4"
                  dir="ltr"
                >
                  {String(idx + 1).padStart(2, "0")}
                </span>
                <div className="text-3xl font-bold text-[#10B981] mb-3">
                  {result.metric}
                </div>
                <p className="text-[#64748B] text-sm">{result.desc}</p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 mx-auto transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 08: CRM & Inbox */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                08
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.evCRMTitle}
            </h2>
          </div>

          <div className="bg-[#FAFAFA] p-8 border border-slate-200">
            <div className="grid md:grid-cols-2 gap-6">
              {crmFeatures.map((feature, idx) => (
                <div key={idx} className="flex items-start gap-4">
                  <span
                    className="text-[#10B981] font-mono text-xs mt-1"
                    dir="ltr"
                  >
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <div className="flex items-start gap-3">
                    <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                    <span className="text-[#64748B]">{feature}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Section 09: FAQs */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-4xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                09
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.evFAQTitle}
            </h2>
          </div>

          <div className="space-y-4">
            {faqs.map((faq, idx) => (
              <div key={idx} className="bg-white p-6 border border-slate-200">
                <div className="flex items-start gap-4">
                  <span
                    className="text-[#10B981] font-mono text-xs mt-1"
                    dir="ltr"
                  >
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {faq.q}
                    </h3>
                    <p className="text-[#64748B]">{faq.a}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 10: Getting Started */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                10
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.evGetStartedTitle}
            </h2>
          </div>

          <div className="grid md:grid-cols-5 gap-6 mb-12">
            {getStartedSteps.map((step, idx) => (
              <div
                key={idx}
                className="bg-[#FAFAFA] p-6 border border-slate-200 hover:border-[#10B981] transition-colors"
              >
                <span
                  className="text-[#10B981] font-mono text-4xl font-bold block mb-4"
                  dir="ltr"
                >
                  {String(idx + 1).padStart(2, "0")}
                </span>
                <h3 className="font-semibold text-[#1E293B] mb-2">
                  {step.title}
                </h3>
                <p className="text-sm text-[#64748B]">{step.desc}</p>
              </div>
            ))}
          </div>

          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              href={`/${params.lang}/signup`}
              className="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-semibold bg-[#10B981] text-white overflow-hidden"
            >
              <span className="relative z-10">{t.evCtaStartFree}</span>
              <div className="absolute inset-0 bg-[#059669] transform translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
            </Link>
            <Link
              href={`/${params.lang}/demo`}
              className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold border-2 border-[#10B981] text-[#10B981] hover:bg-[#10B981]/10 transition-colors"
            >
              {t.evCtaBookDemo}
            </Link>
          </div>
        </div>
      </section>

      {/* Section 11: Final CTA */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <div className="flex items-center justify-center gap-3 mb-8">
            <span
              className="text-[#10B981] font-mono text-sm tracking-wider"
              dir="ltr"
            >
              11
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
          </div>

          <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-6">
            {t.evFinalCtaTitle}
          </h2>
          <p className="text-xl text-[#64748B] mb-12">{t.evFinalCtaSubtitle}</p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              href={`/${params.lang}/signup`}
              className="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-semibold bg-[#10B981] text-white overflow-hidden"
            >
              <span className="relative z-10">{t.evCtaStartFree}</span>
              <div className="absolute inset-0 bg-[#059669] transform translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
            </Link>
            <Link
              href={`/${params.lang}/demo`}
              className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold border-2 border-[#10B981] text-[#10B981] hover:bg-[#10B981]/10 transition-colors"
            >
              {t.evCtaBookDemo}
            </Link>
          </div>
        </div>
      </section>

      {/* Structured Data */}
      <IndustryJsonLd industry="events-venues" lang={params.lang} />
    </main>
  );
}