import Link from "next/link";
import { getResolvedSiteText } from "@/lib/site-text-server";
import { text } from "@/lib/site-text";

export default async function EnSavoirPlusPage() {
  const siteText = await getResolvedSiteText();
  const t = (key: string, fallback?: string) => text(siteText, key, fallback);

  const steps = [
    {
      id: "01",
      title: t("learn.step.1.title"),
      text: t("learn.step.1.text"),
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-7 w-7">
          <circle cx="12" cy="12" r="9" />
          <path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" />
        </svg>
      ),
    },
    {
      id: "02",
      title: t("learn.step.2.title"),
      text: t("learn.step.2.text"),
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-7 w-7">
          <path d="M3 4h2l2 10h10l2-7H7" />
          <circle cx="10" cy="19" r="1.5" />
          <circle cx="17" cy="19" r="1.5" />
          <path d="M17 6h4M19 4v4" />
        </svg>
      ),
    },
    {
      id: "03",
      title: t("learn.step.3.title"),
      text: t("learn.step.3.text"),
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-7 w-7">
          <rect x="3" y="6" width="18" height="12" rx="2" />
          <path d="M3 10h18M7 14h4" />
        </svg>
      ),
    },
    {
      id: "04",
      title: t("learn.step.4.title"),
      text: t("learn.step.4.text"),
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-7 w-7">
          <path d="M3 8h13v9H3z" />
          <path d="M16 11h3l2 2v4h-5z" />
          <circle cx="8" cy="18" r="1.5" />
          <circle cx="18" cy="18" r="1.5" />
        </svg>
      ),
    },
  ];

  return (
    <div className="space-y-8 pb-6">
      <section className="relative overflow-hidden rounded-[2rem] border border-[#ffdede] bg-[var(--accent)] px-6 py-10 text-white shadow-[0_22px_50px_rgba(50,15,15,0.2)] md:px-10 md:py-12">
        <div className="pointer-events-none absolute -right-16 -top-20 h-56 w-56 rounded-full bg-[#ffffff24] blur-3xl" />
        <div className="pointer-events-none absolute -left-14 bottom-0 h-44 w-44 rounded-full bg-[#3a1e1e2d] blur-3xl" />

        <div className="pt-4">
          <div className="space-y-3 md:space-y-4">
            <div className="relative block w-fit">
              <div className="pointer-events-none absolute left-0 top-1/2 z-0 h-9 w-[102%] -translate-y-1/2 -rotate-2 rounded-full bg-[#f55050]/80 md:h-11" />
              <p className="relative z-10 px-2 font-serif text-4xl leading-[0.9] tracking-[0.02em] text-[#2e1717] md:text-6xl">
                {t("learn.heroLine1")}
              </p>
            </div>
            <div className="relative block w-fit">
              <div className="pointer-events-none absolute -left-1 top-1/2 z-0 h-9 w-[calc(100%+0.5rem)] -translate-y-1/2 rotate-[-1deg] rounded-full bg-[#f55050]/80 md:h-11" />
              <p className="relative z-10 px-2 font-serif text-4xl leading-[0.9] tracking-[0.02em] text-[#2e1717] md:text-6xl">
                {t("learn.heroLine2")}
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="grid gap-5 md:grid-cols-2">
        {steps.map((step) => (
          <article
            key={step.id}
            className="relative rounded-[1.5rem] border border-[#ffdede] bg-white p-6 shadow-[0_14px_34px_rgba(50,15,15,0.08)]"
          >
            <div className="mb-5 flex items-start justify-between gap-4">
              <p className="font-serif text-6xl leading-none text-[var(--accent)]">{step.id}</p>
              <div className="text-[var(--accent-3)]">{step.icon}</div>
            </div>
            <h2 className="text-2xl font-semibold text-[var(--foreground)]">{step.title}</h2>
            <p className="mt-3 text-base leading-relaxed text-[var(--muted)]">{step.text}</p>
          </article>
        ))}
      </section>

      <section className="rounded-[1.8rem] border border-[#ffdede] bg-white p-6 shadow-[0_14px_34px_rgba(50,15,15,0.08)] md:p-8">
        <div className="mx-auto max-w-4xl space-y-4 text-center">
          <p className="font-serif text-5xl uppercase tracking-[0.08em] text-[var(--accent)] md:text-6xl">{t("learn.infoTitle")}</p>
          <div className="mx-auto inline-flex h-11 w-11 items-center justify-center rounded-full border border-[#ffd3d3] bg-[#fff4f4] text-[var(--accent)]">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-6 w-6">
              <path d="M3 6h18v12H3z" />
              <path d="m4 7 8 6 8-6" />
            </svg>
          </div>
          <p className="text-lg leading-relaxed text-[var(--muted)]">{t("learn.info.1")}</p>
          <p className="text-lg leading-relaxed text-[var(--muted)]">{t("learn.info.2")}</p>
        </div>
      </section>

      <section className="grid gap-4 rounded-[1.8rem] border border-[#ffdede] bg-[#2a1717] p-6 text-center text-white shadow-[0_16px_36px_rgba(50,15,15,0.2)] md:p-8">
        <p className="font-serif text-5xl leading-none text-[var(--accent)] md:text-6xl">{t("learn.ctaTitle")}</p>
        <p className="mx-auto max-w-2xl text-sm uppercase tracking-[0.22em] text-[var(--accent-3)]">stylunique.fr</p>
        <div className="pt-1">
          <Link
            href="/boutique"
            className="inline-flex rounded-full bg-[var(--accent)] px-6 py-3 text-sm font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-[var(--accent-2)]"
          >
            {t("learn.ctaButton")}
          </Link>
        </div>
      </section>
    </div>
  );
}