TTikotok V4

greenlns-landing/components/seo/SeoFooter.tsx

@@ -0,0 +1,171 @@
+import Link from 'next/link'
+import type { Lang } from '@/lib/i18n'
+import { englishSeoPageSlugs, germanSeoPageSlugs, getSeoPageBySlug } from '@/lib/seoPages'
+import { spanishSeoPageProfiles } from '@/lib/spanishSeoPages'
+import { seoTemplateCopy } from '@/lib/seoTemplateCopy'
+import { siteConfig, hasIosStoreUrl, hasAndroidStoreUrl } from '@/lib/site'
+
+interface SeoFooterProps {
+  locale: Lang
+}
+
+function slugLinks(slugs: readonly string[]) {
+  return slugs
+    .map((slug) => getSeoPageBySlug(slug))
+    .filter((profile): profile is NonNullable<typeof profile> => Boolean(profile))
+    .map((profile) => ({ href: profile.canonical, label: profile.h1 }))
+}
+
+export default function SeoFooter({ locale }: SeoFooterProps) {
+  const copy = seoTemplateCopy[locale].footer
+
+  const useCaseLinks = [
+    ...slugLinks(englishSeoPageSlugs),
+    { href: '/vs/picturethis', label: 'vs PictureThis' },
+    { href: '/vs/plantum', label: 'vs Plantum' },
+    { href: '/vs/inaturalist', label: 'vs iNaturalist' },
+    { href: '/vs/google-lens', label: 'vs Google Lens' },
+  ]
+  const germanLinks = slugLinks(germanSeoPageSlugs)
+  const spanishLinks = Object.values(spanishSeoPageProfiles).map((profile) => ({
+    href: profile.canonical,
+    label: profile.h1,
+  }))
+
+  return (
+    <footer className="bg-ink-deep text-white pt-24 pb-8 font-body overflow-hidden" id="download">
+      <div className="max-w-[1200px] mx-auto px-6">
+        {/* CTA + Bild */}
+        <div className="flex flex-col lg:flex-row gap-12 mb-24 items-center">
+          <div className="flex-1">
+            <div className="text-primary-fixed font-bold tracking-widest text-xs mb-4 uppercase">{copy.downloadTag}</div>
+            <h2 className="text-5xl md:text-6xl font-bold font-display leading-tight mb-6">
+              {copy.ctaLine1}
+              <br />
+              {copy.ctaLine2}
+              <br />
+              <span className="italic text-primary-fixed">{copy.ctaEm}</span>
+            </h2>
+            <p className="text-white/80 max-w-md mb-10 text-sm leading-relaxed">{copy.ctaBody}</p>
+            <div className="flex flex-col sm:flex-row gap-4 mb-6">
+              {hasIosStoreUrl && (
+                <a
+                  href={siteConfig.iosAppStoreUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:opacity-80 transition-opacity"
+                >
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img src="/app-store.png" alt="Download on the App Store" className="h-12 w-auto" />
+                </a>
+              )}
+              {hasAndroidStoreUrl && (
+                <a
+                  href={siteConfig.androidPlayStoreUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:opacity-80 transition-opacity"
+                >
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img src="/play-store.png" alt="Get it on Google Play" className="h-12 w-auto" />
+                </a>
+              )}
+            </div>
+            <p className="text-xs text-white/60">
+              {copy.storeNote}{' '}
+              <Link href="/support" className="underline hover:text-white">
+                {copy.supportLabel}
+              </Link>
+            </p>
+          </div>
+          <div className="flex-1 w-full relative h-[300px] lg:h-[400px] rounded-3xl overflow-hidden shadow-2xl">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src="/hero.jpg" alt="GreenLens" className="w-full h-full object-cover" />
+            <div className="absolute inset-0 bg-gradient-to-r from-ink-deep via-transparent to-transparent"></div>
+          </div>
+        </div>
+
+        {/* Marken- und Legal-Spalten */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16 border-t border-white/10 pt-12">
+          <div>
+            <h3 className="font-display font-bold text-xl tracking-widest mb-4">GREENLENS</h3>
+            <p className="text-xs text-white/70 leading-relaxed max-w-xs">{copy.brandBody}</p>
+          </div>
+          <div>
+            <h4 className="text-[10px] font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.productTitle}</h4>
+            <ul className="space-y-4 text-xs text-white/80">
+              <li><a href="#advantage" className="hover:text-white">{seoTemplateCopy[locale].nav.features}</a></li>
+              <li><a href="#methodology" className="hover:text-white">{seoTemplateCopy[locale].nav.tech}</a></li>
+              <li><a href="#download" className="hover:text-white">{seoTemplateCopy[locale].nav.download}</a></li>
+              <li><Link href="/support" className="hover:text-white">{copy.supportLabel}</Link></li>
+            </ul>
+          </div>
+          <div>
+            <h4 className="text-[10px] font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.companyTitle}</h4>
+            <ul className="space-y-4 text-xs text-white/80">
+              <li><a href="#methodology" className="hover:text-white">{seoTemplateCopy[locale].nav.how}</a></li>
+              <li><a href="#faq" className="hover:text-white">FAQ</a></li>
+              <li><Link href="/support" className="hover:text-white">{copy.supportLabel}</Link></li>
+            </ul>
+          </div>
+          <div>
+            <h4 className="text-[10px] font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.legalTitle}</h4>
+            <ul className="space-y-4 text-xs text-white/80">
+              <li><Link href="/imprint" className="hover:text-white">{copy.imprint}</Link></li>
+              <li><Link href="/privacy" className="hover:text-white">{copy.privacy}</Link></li>
+              <li><Link href="/terms" className="hover:text-white">{copy.terms}</Link></li>
+            </ul>
+          </div>
+        </div>
+
+        {/* SEO-Link-Spalten (interne Verlinkung) */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-12 mb-24">
+          <div>
+            <h4 className="text-[10px] font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.useCasesTitle}</h4>
+            <ul className="space-y-3 text-xs text-white/70">
+              {useCaseLinks.map((link) => (
+                <li key={link.href}>
+                  <Link href={link.href} className="hover:text-white">{link.label}</Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div>
+            <h4 className="text-[10px] font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.germanTitle}</h4>
+            <ul className="space-y-3 text-xs text-white/70">
+              {germanLinks.map((link) => (
+                <li key={link.href}>
+                  <Link href={link.href} className="hover:text-white">{link.label}</Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div>
+            <h4 className="text-[10px] font-bold tracking-widest text-primary-fixed mb-6 uppercase">{copy.spanishTitle}</h4>
+            <ul className="space-y-3 text-xs text-white/70">
+              {spanishLinks.map((link) => (
+                <li key={link.href}>
+                  <Link href={link.href} className="hover:text-white">{link.label}</Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        {/* Riesiger Schriftzug */}
+        <div className="w-full overflow-hidden flex justify-center mb-12 border-t border-white/10 pt-16">
+          <div className="text-[10vw] leading-none font-display font-bold text-white/[0.03] tracking-tighter select-none whitespace-nowrap" aria-hidden="true">
+            GREENLENS
+          </div>
+        </div>
+
+        <div className="flex flex-col md:flex-row justify-between items-center text-[10px] text-white/50 border-t border-white/10 pt-8">
+          <p>{copy.copy}</p>
+          <div className="mt-4 md:mt-0 opacity-50">
+            <span className="font-bold tracking-widest">GREENLENS</span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

greenlns-landing/components/seo/SeoIcon.tsx

@@ -0,0 +1,67 @@
+/** Inline-SVG-Icons (ersetzen die Material-Symbols-Font des Design-Exports). */
+
+export type SeoIconName =
+  | 'check_circle'
+  | 'calendar'
+  | 'healing'
+  | 'sun'
+  | 'psychology'
+  | 'menu'
+  | 'close'
+
+const paths: Record<SeoIconName, React.ReactNode> = {
+  check_circle: (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="m9 12 2 2 4-4" />
+    </>
+  ),
+  calendar: (
+    <>
+      <rect x="3" y="5" width="18" height="16" rx="2" />
+      <path d="M8 3v4M16 3v4M3 10h18" />
+    </>
+  ),
+  healing: (
+    <>
+      <path d="M12 3v18M3 12h18" transform="rotate(45 12 12)" />
+      <path d="M8.5 8.5h.01M15.5 15.5h.01" />
+    </>
+  ),
+  sun: (
+    <>
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
+    </>
+  ),
+  psychology: (
+    <>
+      <path d="M12 4a7 7 0 0 1 7 7c0 2.4-1.2 4.5-3 5.7V20h-6v-2h-2a2 2 0 0 1-2-2v-2H4l1.6-2.7A7 7 0 0 1 12 4Z" />
+      <circle cx="12" cy="11" r="2.2" />
+    </>
+  ),
+  menu: <path d="M4 6h16M4 12h16M4 18h16" />,
+  close: <path d="M6 6l12 12M18 6L6 18" />,
+}
+
+interface SeoIconProps {
+  name: SeoIconName
+  className?: string
+}
+
+export default function SeoIcon({ name, className = 'w-6 h-6' }: SeoIconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      {paths[name]}
+    </svg>
+  )
+}

greenlns-landing/components/seo/SeoNavbar.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import Link from 'next/link'
+import { useState } from 'react'
+import LanguageSwitcher from '@/components/LanguageSwitcher'
+import SeoIcon from '@/components/seo/SeoIcon'
+import type { Lang } from '@/lib/i18n'
+import { localeHome } from '@/lib/localeRoutes'
+import { seoTemplateCopy } from '@/lib/seoTemplateCopy'
+
+interface SeoNavbarProps {
+  locale: Lang
+}
+
+export default function SeoNavbar({ locale }: SeoNavbarProps) {
+  const [menuOpen, setMenuOpen] = useState(false)
+  const copy = seoTemplateCopy[locale]
+
+  const links = [
+    { href: '#advantage', label: copy.nav.features },
+    { href: '#methodology', label: copy.nav.tech },
+    { href: '#faq', label: copy.nav.faq },
+    { href: '#methodology', label: copy.nav.how },
+    { href: '/support', label: copy.nav.support },
+  ]
+
+  return (
+    <nav className="fixed top-0 w-full z-50 bg-ink text-white border-b border-ink-line">
+      <div className="flex justify-between items-center px-6 py-4 max-w-[1200px] mx-auto">
+        <Link
+          href={localeHome[locale]}
+          className="font-display text-2xl font-bold tracking-widest text-white"
+          aria-label="GreenLens Home"
+        >
+          GREENLENS
+        </Link>
+
+        {/* Desktop */}
+        <div className="hidden lg:flex items-center gap-6">
+          {links.map((link) =>
+            link.href.startsWith('#') ? (
+              <a key={link.label} className="text-white/80 hover:text-white transition-colors text-sm font-semibold" href={link.href}>
+                {link.label}
+              </a>
+            ) : (
+              <Link key={link.label} className="text-white/80 hover:text-white transition-colors text-sm font-semibold" href={link.href}>
+                {link.label}
+              </Link>
+            ),
+          )}
+          <div className="ml-2">
+            <LanguageSwitcher variant="seo" />
+          </div>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <a
+            className="hidden md:inline-flex bg-white text-ink px-6 py-2 rounded-full font-bold shadow-lg hover:bg-gray-200 transition-colors duration-300"
+            href="#download"
+          >
+            {copy.nav.download}
+          </a>
+          <button
+            className="lg:hidden text-white p-2"
+            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
+            aria-expanded={menuOpen}
+            onClick={() => setMenuOpen((open) => !open)}
+          >
+            <SeoIcon name={menuOpen ? 'close' : 'menu'} className="w-6 h-6" />
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile */}
+      {menuOpen && (
+        <div className="lg:hidden bg-ink border-t border-ink-line px-6 py-6 flex flex-col gap-4">
+          {links.map((link) =>
+            link.href.startsWith('#') ? (
+              <a key={link.label} className="text-white/80 hover:text-white text-sm font-semibold" href={link.href} onClick={() => setMenuOpen(false)}>
+                {link.label}
+              </a>
+            ) : (
+              <Link key={link.label} className="text-white/80 hover:text-white text-sm font-semibold" href={link.href} onClick={() => setMenuOpen(false)}>
+                {link.label}
+              </Link>
+            ),
+          )}
+          <a className="text-white/80 hover:text-white text-sm font-semibold" href="#download" onClick={() => setMenuOpen(false)}>
+            {copy.nav.download}
+          </a>
+          <LanguageSwitcher variant="seo" />
+        </div>
+      )}
+    </nav>
+  )
+}

greenlns-landing/components/seo/SeoSections.tsx

@@ -0,0 +1,270 @@
+import Link from 'next/link'
+import SeoIcon, { type SeoIconName } from '@/components/seo/SeoIcon'
+import type { SeoPageProfile } from '@/lib/seoPages'
+import type { SeoTemplateCopy } from '@/lib/seoTemplateCopy'
+
+interface SectionProps {
+  profile: SeoPageProfile
+  copy: SeoTemplateCopy
+}
+
+export function SeoHero({ profile, copy }: SectionProps) {
+  return (
+    <section className="max-w-[1200px] mx-auto px-6 py-16 grid grid-cols-1 lg:grid-cols-12 gap-12 items-start mt-8">
+      <div className="lg:col-span-6 z-10 flex flex-col justify-center pt-8">
+        <div className="font-body text-xs font-semibold tracking-[0.1em] uppercase text-primary mb-6 seo-fade">
+          {copy.hero.eyebrow}
+        </div>
+        <h1 className="font-display font-bold text-[40px] leading-[1.2] tracking-[-0.01em] md:text-[56px] md:leading-[1.1] md:tracking-[-0.02em] text-primary mb-6 seo-fade seo-fade-1">
+          {profile.h1}
+        </h1>
+        <p className="font-body text-lg text-on-surface-variant mb-4 leading-relaxed seo-fade seo-fade-2">{profile.tagline}</p>
+        <p className="font-body text-base text-on-surface-variant mb-10 leading-relaxed seo-fade seo-fade-2">{profile.directAnswer}</p>
+        <div className="flex flex-col sm:flex-row gap-4 seo-fade seo-fade-3">
+          <a
+            className="inline-flex justify-center items-center px-8 py-3 bg-ink text-white rounded-full font-bold shadow-lg hover:bg-ink-soft transition-colors duration-300"
+            href="#download"
+          >
+            {copy.hero.ctaPrimary}
+          </a>
+          <a
+            className="inline-flex justify-center items-center px-8 py-3 bg-transparent border-2 border-ink text-ink rounded-full font-bold hover:bg-ink hover:text-white transition-colors duration-300"
+            href="#methodology"
+          >
+            {copy.hero.ctaSecondary}
+          </a>
+        </div>
+        <div className="mt-12 grid grid-cols-2 gap-6 pt-8 border-t border-surface-container-high seo-fade seo-fade-3">
+          <div>
+            <div className="font-display text-2xl font-semibold text-primary mb-1">{copy.hero.stat1Title}</div>
+            <div className="text-xs font-semibold tracking-[0.1em] uppercase text-on-surface-variant">{copy.hero.stat1Label}</div>
+          </div>
+          <div>
+            <div className="font-display text-2xl font-semibold text-primary mb-1">{copy.hero.stat2Title}</div>
+            <div className="text-xs font-semibold tracking-[0.1em] uppercase text-on-surface-variant">{copy.hero.stat2Label}</div>
+          </div>
+        </div>
+      </div>
+      <div className="lg:col-span-6 flex justify-center items-center seo-fade seo-fade-2">
+        <div className="relative w-full max-w-[320px] md:max-w-[380px] h-[550px] md:h-[650px] rounded-3xl overflow-hidden shadow-2xl border-[8px] border-surface-container">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img alt={copy.hero.imageAlt} className="w-full h-full object-cover" src="/hero.jpg" />
+          <div className="absolute bottom-6 left-1/2 -translate-x-1/2 w-[90%] bg-surface/95 backdrop-blur p-4 rounded-xl border border-surface-container-highest flex items-center gap-3 shadow-xl">
+            <div className="w-1.5 h-8 bg-primary rounded-full"></div>
+            <div>
+              <div className="font-display font-semibold text-sm text-primary mb-0.5">{copy.hero.floatTitle}</div>
+              <div className="text-[10px] font-semibold tracking-[0.1em] uppercase text-on-surface-variant">{copy.hero.floatLabel}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export function SeoAdvantage({ profile, copy }: SectionProps) {
+  return (
+    <section className="max-w-[1200px] mx-auto px-6 py-16 grid grid-cols-1 lg:grid-cols-3 gap-12 border-t border-surface-container-high" id="advantage">
+      <div className="lg:col-span-2">
+        <div className="mb-8">
+          <span className="text-xs font-semibold tracking-[0.1em] uppercase text-primary">{copy.advantage.eyebrow}</span>
+        </div>
+        <h2 className="font-display font-semibold text-[32px] leading-[1.3] text-primary mb-6">{copy.advantage.heading}</h2>
+        <p className="font-body text-lg text-on-surface-variant mb-6">{profile.definitionBlock}</p>
+        <div className="text-xs font-semibold tracking-[0.1em] uppercase text-on-surface-variant">
+          {copy.advantage.updated}: {profile.lastUpdated}
+        </div>
+      </div>
+      <div className="bg-surface-container rounded-xl p-8 seo-card">
+        <div className="flex items-center gap-3 mb-6">
+          <SeoIcon name="psychology" className="w-8 h-8 text-primary" />
+          <h3 className="font-display font-semibold text-2xl text-primary">{copy.didYouKnow.title}</h3>
+        </div>
+        <ul className="space-y-6">
+          {copy.didYouKnow.items.map((item, index) => (
+            <li key={item.title} className={index < copy.didYouKnow.items.length - 1 ? 'border-b border-outline-variant/30 pb-4' : ''}>
+              <strong className="block font-body text-primary mb-1">{item.title}</strong>
+              <span className="text-sm text-on-surface-variant">{item.body}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}
+
+export function SeoMethodology({ copy }: { copy: SeoTemplateCopy }) {
+  return (
+    <section className="bg-surface-container-low py-16 md:py-[120px]" id="methodology">
+      <div className="max-w-[1200px] mx-auto px-6">
+        <div className="text-center mb-16">
+          <span className="text-xs font-semibold tracking-[0.1em] uppercase text-primary block mb-4">{copy.methodology.eyebrow}</span>
+          <h2 className="font-display font-semibold text-[32px] md:text-[40px] leading-[1.2] text-primary">{copy.methodology.title}</h2>
+          <p className="font-body text-on-surface-variant max-w-2xl mx-auto mt-4">{copy.methodology.lead}</p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {copy.methodology.steps.map((step, index) => (
+            <div key={step.title} className="bg-surface p-8 rounded-xl shadow-sm border border-surface-container-high seo-card">
+              <div className="w-12 h-12 bg-primary-container text-on-primary-container rounded-full flex items-center justify-center font-display font-semibold text-xl mb-6">
+                {index + 1}
+              </div>
+              <h3 className="font-display font-semibold text-lg text-primary mb-3">{step.title}</h3>
+              <p className="font-body text-on-surface-variant text-sm">{step.body}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+const comparisonIcons: SeoIconName[] = ['check_circle', 'calendar', 'healing', 'sun']
+
+export function SeoComparison({ profile, copy }: SectionProps) {
+  const tipLink = profile.relatedLinks[0]
+
+  return (
+    <section className="py-16 md:py-24" id="comparison">
+      <div className="max-w-[1200px] mx-auto px-6 grid grid-cols-1 lg:grid-cols-12 gap-12">
+        <div className="lg:col-span-4">
+          <div className="lg:sticky lg:top-32">
+            <span className="text-xs font-semibold tracking-[0.1em] uppercase text-primary block mb-4">{copy.comparison.eyebrow}</span>
+            <h2 className="font-display font-semibold text-[32px] leading-[1.3] text-primary mb-6">{profile.featureTable.title}</h2>
+            <p className="font-body text-on-surface-variant mb-8">{copy.comparison.lead}</p>
+            {tipLink && (
+              <div className="bg-primary-container/20 p-6 rounded-lg border border-primary-container/30">
+                <h4 className="font-display font-semibold text-base text-primary mb-2">{copy.comparison.tipTitle}</h4>
+                <p className="text-sm text-on-surface-variant mb-3">{copy.comparison.tipBody}</p>
+                <Link className="text-primary text-xs font-semibold tracking-[0.1em] uppercase hover:underline" href={tipLink.href}>
+                  {tipLink.label} →
+                </Link>
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="lg:col-span-8 flex flex-col border-t border-surface-container-highest">
+          {profile.featureTable.rows.map((row, index) => (
+            <div key={row.feature} className="grid grid-cols-1 md:grid-cols-2 gap-8 py-8 border-b border-surface-container-highest items-start">
+              <div>
+                <div className="flex items-center gap-2 mb-2">
+                  <SeoIcon name={comparisonIcons[index % comparisonIcons.length]} className="w-5 h-5 text-primary" />
+                  <h3 className="font-display font-semibold text-lg text-primary">{row.feature}</h3>
+                </div>
+                <div className="text-xs font-semibold tracking-[0.1em] uppercase text-primary mb-2">{copy.comparison.greenlens}</div>
+                <p className="font-body text-on-surface-variant text-sm">{row.greenlens}</p>
+              </div>
+              <div className="md:pt-9">
+                <div className="text-xs font-semibold tracking-[0.1em] uppercase text-on-surface-variant/60 mb-2">
+                  {profile.featureTable.alternativeLabel}
+                </div>
+                <p className="font-body text-on-surface-variant/80 text-sm">{row.alternative}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export function SeoContentSections({ profile }: { profile: SeoPageProfile }) {
+  if (!profile.contentSections || profile.contentSections.length === 0) return null
+
+  return (
+    <section className="bg-surface-container-low py-16">
+      <div className="max-w-[1200px] mx-auto px-6 grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
+        {profile.contentSections.map((section) => (
+          <article key={section.title} className="bg-surface p-8 rounded-xl shadow-sm border border-surface-container-high seo-card">
+            <span className="text-xs font-semibold tracking-[0.1em] uppercase text-primary block mb-4">{section.eyebrow}</span>
+            <h2 className="font-display font-semibold text-2xl text-primary mb-4">{section.title}</h2>
+            <p className="font-body text-on-surface-variant text-sm mb-4">{section.body}</p>
+            {section.bullets && (
+              <ul className="space-y-3">
+                {section.bullets.map((item) => (
+                  <li key={item} className="flex items-start gap-2 text-sm text-on-surface-variant">
+                    <SeoIcon name="check_circle" className="w-4 h-4 mt-0.5 shrink-0 text-primary" />
+                    <span>{item}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </article>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export function SeoBestFit({ profile, copy }: SectionProps) {
+  return (
+    <section className="max-w-[1200px] mx-auto px-6 py-16 grid grid-cols-1 md:grid-cols-2 gap-8">
+      <article className="bg-secondary-container/40 rounded-xl p-8 border border-secondary-container">
+        <span className="text-xs font-semibold tracking-[0.1em] uppercase text-primary block mb-3">{copy.bestFit.chooseTag}</span>
+        <h2 className="font-display font-semibold text-2xl text-primary mb-6">{copy.bestFit.chooseTitle}</h2>
+        <ul className="space-y-4">
+          {profile.greenLensIf.map((item) => (
+            <li key={item} className="flex items-start gap-3 text-sm text-on-surface-variant">
+              <SeoIcon name="check_circle" className="w-5 h-5 mt-0.5 shrink-0 text-primary" />
+              <span>{item}</span>
+            </li>
+          ))}
+        </ul>
+      </article>
+      <article className="bg-surface-container rounded-xl p-8 border border-surface-container-high">
+        <span className="text-xs font-semibold tracking-[0.1em] uppercase text-on-surface-variant block mb-3">{copy.bestFit.notTag}</span>
+        <h2 className="font-display font-semibold text-2xl text-primary mb-6">{copy.bestFit.notTitle}</h2>
+        <ul className="space-y-4">
+          {profile.notBestIf.map((item) => (
+            <li key={item} className="flex items-start gap-3 text-sm text-on-surface-variant">
+              <span className="w-5 h-5 mt-0.5 shrink-0 rounded-full border border-outline-variant flex items-center justify-center text-[10px] text-on-surface-variant">
+                –
+              </span>
+              <span>{item}</span>
+            </li>
+          ))}
+        </ul>
+      </article>
+    </section>
+  )
+}
+
+export function SeoFaq({ profile, copy }: SectionProps) {
+  return (
+    <section className="bg-surface-container py-16 md:py-24" id="faq">
+      <div className="max-w-[900px] mx-auto px-6">
+        <div className="text-center mb-16">
+          <h2 className="font-display font-semibold text-[32px] leading-[1.3] text-primary">{copy.faq.title}</h2>
+        </div>
+        <div className="space-y-6">
+          {profile.faqs.map((item) => (
+            <div key={item.question} className="bg-surface rounded-lg p-6 shadow-sm">
+              <h3 className="font-display font-semibold text-base text-primary mb-2">{item.question}</h3>
+              <p className="font-body text-on-surface-variant text-sm">{item.answer}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export function SeoRelated({ profile, copy }: SectionProps) {
+  if (profile.relatedLinks.length === 0) return null
+
+  return (
+    <section className="max-w-[1200px] mx-auto px-6 py-16">
+      <div className="mb-10">
+        <span className="text-xs font-semibold tracking-[0.1em] uppercase text-primary block mb-3">{copy.related.tag}</span>
+        <h2 className="font-display font-semibold text-[32px] leading-[1.3] text-primary">{copy.related.title}</h2>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {profile.relatedLinks.map((link) => (
+          <Link key={link.href} href={link.href} className="bg-surface p-6 rounded-xl border border-surface-container-high seo-card block">
+            <h3 className="font-display font-semibold text-lg text-primary mb-2">{link.label}</h3>
+            <p className="text-sm text-on-surface-variant">{link.description}</p>
+          </Link>
+        ))}
+      </div>
+    </section>
+  )
+}