import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Logos preview",
  robots: { index: false, follow: false },
};

const PRIMARY = "#000000";
const GOLD = "#775a19";
const CREAM = "#f7f9ff";

const concepts = [
  {
    id: "01",
    name: "Wordmark · Période or",
    description:
      "Le simple : Socialex en serif, point final or comme accent typographique unique. Très éditorial, lisible à 16 px.",
    render: (
      <svg viewBox="0 0 600 200" className="w-full h-full">
        <text
          x="300"
          y="125"
          textAnchor="middle"
          fontFamily="var(--font-noto-serif), 'Noto Serif', serif"
          fontSize="84"
          fontWeight="600"
          fill={PRIMARY}
          letterSpacing="-2"
        >
          Socialex
        </text>
        <circle cx="468" cy="125" r="6" fill={GOLD} />
      </svg>
    ),
  },
  {
    id: "02",
    name: "Wordmark · Filet or sous le mot",
    description:
      "Wordmark + un filet or fin, comme une signature. Premium publishing.",
    render: (
      <svg viewBox="0 0 600 200" className="w-full h-full">
        <text
          x="300"
          y="115"
          textAnchor="middle"
          fontFamily="var(--font-noto-serif), 'Noto Serif', serif"
          fontSize="80"
          fontWeight="600"
          fill={PRIMARY}
          letterSpacing="-2"
        >
          Socialex
        </text>
        <line
          x1="200"
          y1="148"
          x2="400"
          y2="148"
          stroke={GOLD}
          strokeWidth="1.5"
        />
      </svg>
    ),
  },
  {
    id: "03",
    name: "Stacked · Wordmark + tagline",
    description:
      "Lockup formel : wordmark + petit caps en dessous. Pour papier en-tête, signature email.",
    render: (
      <svg viewBox="0 0 600 240" className="w-full h-full">
        <text
          x="300"
          y="115"
          textAnchor="middle"
          fontFamily="var(--font-noto-serif), 'Noto Serif', serif"
          fontSize="80"
          fontWeight="600"
          fill={PRIMARY}
          letterSpacing="-2"
        >
          Socialex
        </text>
        <line
          x1="240"
          y1="148"
          x2="360"
          y2="148"
          stroke={GOLD}
          strokeWidth="1"
        />
        <text
          x="300"
          y="180"
          textAnchor="middle"
          fontFamily="var(--font-inter), Inter, sans-serif"
          fontSize="14"
          fontWeight="600"
          fill={PRIMARY}
          letterSpacing="3"
        >
          CABINET JURIDIQUE
        </text>
      </svg>
    ),
  },
  {
    id: "04",
    name: "Monogram · Sx en cadre",
    description:
      "Monogramme géométrique pour favicon, app icon, sceau. S + x ligaturé visuellement, dans un cadre fin.",
    render: (
      <svg viewBox="0 0 240 240" className="w-full h-full">
        <rect
          x="20"
          y="20"
          width="200"
          height="200"
          fill="none"
          stroke={PRIMARY}
          strokeWidth="1.5"
        />
        <text
          x="120"
          y="158"
          textAnchor="middle"
          fontFamily="var(--font-noto-serif), 'Noto Serif', serif"
          fontSize="140"
          fontWeight="600"
          fill={PRIMARY}
          letterSpacing="-6"
        >
          Sx
        </text>
        <line
          x1="80"
          y1="190"
          x2="160"
          y2="190"
          stroke={GOLD}
          strokeWidth="1"
        />
      </svg>
    ),
  },
  {
    id: "05",
    name: "Sceau circulaire",
    description:
      "Inspiration sceau notarial revisité. Cercle fin, S central, texte circulaire en très petit caps.",
    render: (
      <svg viewBox="0 0 240 240" className="w-full h-full">
        <circle
          cx="120"
          cy="120"
          r="105"
          fill="none"
          stroke={PRIMARY}
          strokeWidth="1.2"
        />
        <circle
          cx="120"
          cy="120"
          r="80"
          fill="none"
          stroke={PRIMARY}
          strokeWidth="0.6"
          opacity="0.4"
        />
        <text
          x="120"
          y="148"
          textAnchor="middle"
          fontFamily="var(--font-noto-serif), 'Noto Serif', serif"
          fontSize="100"
          fontWeight="600"
          fill={PRIMARY}
        >
          S
        </text>
        <circle cx="120" cy="170" r="2.5" fill={GOLD} />
        <defs>
          <path
            id="circleText"
            d="M 120,120 m -90, 0 a 90,90 0 1,1 180,0 a 90,90 0 1,1 -180,0"
          />
        </defs>
        <text
          fontFamily="var(--font-inter), Inter, sans-serif"
          fontSize="9"
          fontWeight="600"
          fill={PRIMARY}
          letterSpacing="3"
        >
          <textPath href="#circleText" startOffset="14%">
            SOCIALEX · CABINET JURIDIQUE · RENNES
          </textPath>
        </text>
      </svg>
    ),
  },
  {
    id: "06",
    name: "Wordmark · § éditorial",
    description:
      "Wordmark précédé du signe paragraphe (§) en or, clin d'œil au registre juridique. Éditorial, distinctif.",
    render: (
      <svg viewBox="0 0 600 200" className="w-full h-full">
        <text
          x="180"
          y="125"
          textAnchor="middle"
          fontFamily="var(--font-noto-serif), 'Noto Serif', serif"
          fontSize="74"
          fontWeight="500"
          fontStyle="italic"
          fill={GOLD}
        >
          §
        </text>
        <text
          x="225"
          y="125"
          fontFamily="var(--font-noto-serif), 'Noto Serif', serif"
          fontSize="80"
          fontWeight="600"
          fill={PRIMARY}
          letterSpacing="-2"
        >
          Socialex
        </text>
      </svg>
    ),
  },
];

export default function LogosPreview() {
  return (
    <section className="pt-40 pb-32">
      <div className="container-page">
        <div className="max-w-3xl mb-16">
          <span className="eyebrow block mb-4">Preview interne</span>
          <h1 className="display-lg text-primary mb-6">Concepts logo</h1>
          <p className="body-lg text-on-surface-variant">
            6 concepts SVG générés en pur code, basés sur le design system
            Sovereign Precision. Chacun rendu sur fond clair et fond sombre,
            plus une miniature taille favicon. Choisis un numéro et je
            l'extrais vers <code className="font-mono text-sm">public/logo.svg</code>{" "}
            puis je l'intègre dans la nav et le footer.
          </p>
        </div>

        <div className="space-y-12">
          {concepts.map((c) => (
            <div
              key={c.id}
              className="bg-white border border-outline-variant/40"
            >
              {/* En-tête */}
              <div className="p-8 border-b border-outline-variant/40 flex justify-between items-start gap-6 flex-wrap">
                <div className="max-w-xl">
                  <p className="font-mono text-xs text-on-surface-variant mb-2">
                    Concept {c.id}
                  </p>
                  <h2 className="font-serif text-2xl text-primary mb-2">
                    {c.name}
                  </h2>
                  <p className="body-md text-on-surface-variant">
                    {c.description}
                  </p>
                </div>
              </div>

              {/* 3 affichages */}
              <div className="grid grid-cols-1 md:grid-cols-3">
                {/* Light */}
                <div
                  className="aspect-square flex items-center justify-center p-12 border-r border-outline-variant/40"
                  style={{ background: CREAM }}
                >
                  <div className="w-full max-w-[260px]">{c.render}</div>
                </div>
                {/* Dark */}
                <div
                  className="aspect-square flex items-center justify-center p-12 border-r border-outline-variant/40"
                  style={{ background: PRIMARY }}
                >
                  <div
                    className="w-full max-w-[260px]"
                    style={
                      {
                        // inverse pour version dark
                        ["--svg-fill" as string]: CREAM,
                      } as React.CSSProperties
                    }
                  >
                    <div
                      style={{
                        filter: "invert(1)",
                      }}
                    >
                      {c.render}
                    </div>
                  </div>
                </div>
                {/* Favicon */}
                <div
                  className="aspect-square flex flex-col items-center justify-center gap-4 p-12"
                  style={{ background: CREAM }}
                >
                  <div className="w-12 h-12">{c.render}</div>
                  <p className="font-mono text-[10px] uppercase tracking-widest text-on-surface-variant">
                    Favicon 48px
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-16 p-8 bg-surface-container-low border border-outline-variant/40">
          <p className="eyebrow mb-3">Note</p>
          <p className="body-md text-on-surface-variant">
            Ces concepts sont générés en pur SVG via Noto Serif (la police
            actuelle du site) et la palette Sovereign Precision. Ils sont
            techniquement utilisables tels quels en prod (vectoriel,
            redimensionnable à l'infini, ~2 KB par fichier). Pour quelque
            chose de plus pictural, utilise le prompt Midjourney/DALL-E plus
            haut.
          </p>
        </div>
      </div>
    </section>
  );
}