import type { Metadata } from 'next'
import Link from 'next/link'
import Navbar from '@/components/Navbar'
import Hero from '@/components/Hero'
import Ticker from '@/components/Ticker'
import Features from '@/components/Features'
import BrownLeaf from '@/components/BrownLeaf'
import Intelligence from '@/components/Intelligence'
import HowItWorks from '@/components/HowItWorks'
import FAQ from '@/components/FAQ'
import CTA from '@/components/CTA'
import Footer from '@/components/Footer'

export const metadata: Metadata = {
  title: 'GreenLens - Pflanzen erkennen & Pflege planen',
  description:
    'Scanne Pflanzen per Foto, verstehe ihre Bedürfnisse und organisiere Pflege, Erinnerungen und Sammlung in einer App.',
  alternates: {
    canonical: '/',
    languages: {
      de: '/',
      es: '/es',
      'x-default': '/',
    },
  },
}

const howToSchema = {
  '@context': 'https://schema.org',
  '@type': 'HowTo',
  name: 'So erkennst du eine Pflanze mit GreenLens',
  step: [
    {
      '@type': 'HowToStep',
      position: 1,
      name: 'Pflanze fotografieren',
      text: 'Öffne die App, richte die Kamera auf deine Pflanze und tippe auf Scan.',
    },
    {
      '@type': 'HowToStep',
      position: 2,
      name: 'KI identifiziert sofort',
      text: 'In unter einer Sekunde erhältst du den Namen, die Art und die wichtigsten Eckdaten.',
    },
    {
      '@type': 'HowToStep',
      position: 3,
      name: 'Pflegeplan erhalten',
      text: 'GreenLens erstellt automatisch einen Pflegeplan passend zu deiner Pflanze und deinem Standort.',
    },
    {
      '@type': 'HowToStep',
      position: 4,
      name: 'Wachstum verfolgen',
      text: 'Dokumentiere Fotos, verfolge das Gießen und lass dich an wichtige Pflegetermine erinnern.',
    },
  ],
}

const faqSchema = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  mainEntity: [
    {
      '@type': 'Question',
      name: 'Wie erkennt GreenLens eine Pflanze?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'GreenLens analysiert das Pflanzenfoto und verbindet das Ergebnis mit Pflegehinweisen in der App, damit du schneller zu klaren nächsten Schritten kommst.',
      },
    },
    {
      '@type': 'Question',
      name: 'Ist GreenLens kostenlos?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'GreenLens bietet kostenlose Funktionen und zusätzlich kostenpflichtige Optionen wie Abos und Credit-Top-ups für erweiterte KI-Funktionen.',
      },
    },
    {
      '@type': 'Question',
      name: 'Kann ich GreenLens offline nutzen?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'Pflanzenidentifikation und Gesundheitscheck benötigen eine Internetverbindung. Deine gespeicherte Sammlung, Pflegenotizen und Gieß-Erinnerungen sind offline verfügbar.',
      },
    },
    {
      '@type': 'Question',
      name: 'Für welche Pflanzen kann ich GreenLens nutzen?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'GreenLens umfasst über 450 Pflanzenarten, darunter Zimmerpflanzen, Gartenpflanzen und Sukkulenten. Die App richtet sich an Pflanzenbesitzer, die Identifikation und Pflege an einem Ort wollen.',
      },
    },
    {
      '@type': 'Question',
      name: 'Wie starte ich meine Pflanzensammlung?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'Starte mit einem Scan, prüfe das Ergebnis und speichere die Pflanze in deiner Sammlung, damit Notizen, Erinnerungen und Pflege an einem Ort bleiben.',
      },
    },
  ],
}

export default function Home() {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(howToSchema) }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
      />
      <Navbar />
      <main>
        <Hero />
        <Ticker />
        <Features />
        <BrownLeaf />
        <Intelligence />
        <HowItWorks />
        <FAQ />
        <section className="comparison-links" aria-labelledby="homepage-guides-heading">
          <div className="container">
            <div className="comparison-section-head">
              <p className="tag">Guides</p>
              <h2 id="homepage-guides-heading">Pflanzen schneller erkennen und richtig handeln.</h2>
            </div>
            <div className="comparison-links-grid">
              <Link href="/blumen-scanner" className="comparison-link-card">
                <p className="comparison-mini-label">Blumen</p>
                <h3>Blumen Scanner</h3>
                <p>Blumen per Foto erkennen, Namen erhalten und direkt Pflegehinweise nutzen.</p>
              </Link>
              <Link href="/blumen-scanner" className="comparison-link-card">
                <p className="comparison-mini-label">Foto-Erkennung</p>
                <h3>Blumen per Foto erkennen</h3>
                <p>Ideal, wenn du eine Blume fotografiert hast und sofort wissen willst, was sie braucht.</p>
              </Link>
              <Link href="/pflanzen-bestimmen" className="comparison-link-card">
                <p className="comparison-mini-label">Pflanzen</p>
                <h3>Pflanzen bestimmen</h3>
                <p>Pflanze scannen, Artname sehen und den passenden Pflegeplan erhalten.</p>
              </Link>
              <Link href="/pflanzen-pflege-app" className="comparison-link-card">
                <p className="comparison-mini-label">Gießerinnerung</p>
                <h3>Pflanzen gießen Erinnerung</h3>
                <p>Pflegeplan, Push-Erinnerung und Gießrhythmus pro Pflanze verwalten.</p>
              </Link>
              <Link href="/vs/google-lens" className="comparison-link-card">
                <p className="comparison-mini-label">Google Lens</p>
                <h3>Google Pflanzen erkennen</h3>
                <p>Vergleiche Google Lens mit GreenLens für Pflanzenerkennung, Pflege und Diagnose.</p>
              </Link>
              <Link href="/identify-plant-photo" className="comparison-link-card">
                <p className="comparison-mini-label">English</p>
                <h3>Identify plant by photo</h3>
                <p>Use a plant photo or picture to get the name, care plan, and reminders.</p>
              </Link>
              <Link href="/pflanzen-krankheiten-erkennen" className="comparison-link-card">
                <p className="comparison-mini-label">Diagnose</p>
                <h3>Pflanzenkrankheiten erkennen</h3>
                <p>Gelbe Blätter, braune Spitzen oder weiche Stiele einordnen und den nächsten Schritt finden.</p>
              </Link>
            </div>
          </div>
        </section>
        <CTA />
      </main>
      <Footer />
    </>
  )
}