import React from 'react';
import {
  BookOpen,
  Braces,
  Code2,
  Component,
  Figma,
  FileCode2,
  Github,
  Layers,
  Package,
  ShieldCheck,
  Sparkles,
  SquareTerminal,
  SwatchBook,
} from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { IsotypeDiagonal, IsotypeFrames, XerticaLogo } from 'xertica-ui/brand';
import {
  ComplianceBadgeRow,
  CTASection,
  FeatureRow,
  Hero,
  HowItWorksSteps,
  MarketingFooter,
  MarketingNavbar,
  SectionHeading,
  ServiceCardGrid,
  StatBand,
  TopAccentCards,
} from 'xertica-ui/blocks';

/**
 * Landing page — starter demo content.
 *
 * This is the same marketing composition Xertica UI uses for its own landing
 * page, given to you as an editable starting point. Replace the copy in
 * `src/locales/<lang>/pages/landing.json` and swap out sections/blocks below
 * to build your own page — everything here is yours to redesign.
 */
export function LandingPage() {
  const { t } = useTranslation();

  return (
    <div className="h-full w-full overflow-y-auto bg-background">
      <MarketingNavbar
        logo={<XerticaLogo className="h-8 w-auto text-primary dark:text-foreground" variant="theme" />}
        links={[
          { label: t('landing.nav.product'), href: '#' },
          { label: t('landing.nav.resources'), href: '#' },
          { label: t('landing.nav.pricing'), href: '#' },
          { label: t('landing.nav.contact'), href: '#' },
        ]}
        cta={{ label: t('landing.nav.login'), href: '#' }}
        openMenuLabel={t('landing.nav.openMenu')}
        closeMenuLabel={t('landing.nav.closeMenu')}
      />

      <Hero
        eyebrow={{ label: t('landing.hero.eyebrow'), icon: <Sparkles /> }}
        title={t('landing.hero.title')}
        description={t('landing.hero.description')}
        primaryCta={{ label: t('landing.hero.primaryCta'), href: '#' }}
        secondaryCta={{ label: t('landing.hero.secondaryCta'), href: '#' }}
        visual={<IsotypeDiagonal className="mx-auto w-full max-w-md" />}
      />

      <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 md:py-24">
        <TopAccentCards
          items={[
            {
              title: t('landing.framing.purpose.title'),
              body: t('landing.framing.purpose.body'),
              color: 'chart-4',
            },
            {
              title: t('landing.framing.problem.title'),
              body: t('landing.framing.problem.body'),
              bullets: [
                t('landing.framing.problem.bullet1'),
                t('landing.framing.problem.bullet2'),
                t('landing.framing.problem.bullet3'),
              ],
              color: 'chart-5',
            },
          ]}
        />
      </section>

      <section className="bg-card">
        <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 md:py-24">
          <SectionHeading
            title={t('landing.ecosystem.title')}
            accentColor="chart-1"
            className="mb-12"
          />

          <ServiceCardGrid
            variant="card"
            columns={4}
            items={[
              {
                icon: <Figma />,
                color: 'primary',
                title: t('landing.ecosystem.figma.title'),
                description: t('landing.ecosystem.figma.description'),
                bullets: [
                  t('landing.ecosystem.figma.bullet1'),
                  t('landing.ecosystem.figma.bullet2'),
                ],
              },
              {
                icon: <FileCode2 />,
                color: 'chart-1',
                title: t('landing.ecosystem.vscode.title'),
                description: t('landing.ecosystem.vscode.description'),
                bullets: [
                  t('landing.ecosystem.vscode.bullet1'),
                  t('landing.ecosystem.vscode.bullet2'),
                ],
              },
              {
                icon: <Component />,
                color: 'chart-5',
                title: t('landing.ecosystem.storybook.title'),
                description: t('landing.ecosystem.storybook.description'),
                bullets: [
                  t('landing.ecosystem.storybook.bullet1'),
                  t('landing.ecosystem.storybook.bullet2'),
                ],
              },
              {
                icon: <Github />,
                color: 'chart-2',
                title: t('landing.ecosystem.github.title'),
                description: t('landing.ecosystem.github.description'),
                bullets: [
                  t('landing.ecosystem.github.bullet1'),
                  t('landing.ecosystem.github.bullet2'),
                ],
              },
            ]}
          />
        </div>
      </section>

      <FeatureRow
        eyebrow={t('landing.features.theming.eyebrow')}
        title={t('landing.features.theming.title')}
        description={t('landing.features.theming.description')}
        bullets={[
          t('landing.features.theming.bullet1'),
          t('landing.features.theming.bullet2'),
          t('landing.features.theming.bullet3'),
        ]}
        visual={<IsotypeFrames variant="blue-magenta" className="mx-auto w-full max-w-md" />}
      />

      <FeatureRow
        tone="card"
        reverse
        eyebrow={t('landing.features.composition.eyebrow')}
        title={t('landing.features.composition.title')}
        description={t('landing.features.composition.description')}
        bullets={[
          t('landing.features.composition.bullet1'),
          t('landing.features.composition.bullet2'),
          t('landing.features.composition.bullet3'),
        ]}
        visual={<IsotypeDiagonal className="mx-auto w-full max-w-md" />}
      />

      <FeatureRow
        eyebrow={t('landing.features.onboarding.eyebrow')}
        title={t('landing.features.onboarding.title')}
        description={t('landing.features.onboarding.description')}
        bullets={[
          t('landing.features.onboarding.bullet1'),
          t('landing.features.onboarding.bullet2'),
          t('landing.features.onboarding.bullet3'),
        ]}
        visual={<IsotypeFrames variant="blue-yellow" className="mx-auto w-full max-w-md" />}
      />

      <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 md:py-24">
        <SectionHeading
          title={t('landing.useCases.title')}
          accentColor="chart-4"
          className="mb-12"
        />

        <ServiceCardGrid
          variant="card"
          columns={3}
          items={[
            {
              color: 'chart-2',
              title: t('landing.useCases.ecommerce.title'),
              description: t('landing.useCases.ecommerce.description'),
              checklist: [
                t('landing.useCases.ecommerce.check1'),
                t('landing.useCases.ecommerce.check2'),
              ],
              className: 'border',
            },
            {
              color: 'primary',
              title: t('landing.useCases.saas.title'),
              description: t('landing.useCases.saas.description'),
              checklist: [t('landing.useCases.saas.check1'), t('landing.useCases.saas.check2')],
              className: 'border',
            },
            {
              color: 'chart-4',
              title: t('landing.useCases.fintech.title'),
              description: t('landing.useCases.fintech.description'),
              checklist: [
                t('landing.useCases.fintech.check1'),
                t('landing.useCases.fintech.check2'),
              ],
              className: 'border',
            },
          ]}
        />
      </section>

      <section className="bg-sidebar text-sidebar-foreground">
        <div className="mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8 md:py-24">
          <SectionHeading
            title={t('landing.methodology.title')}
            tone="sidebar"
            accentColor="primary"
            className="mb-12"
          />

          <HowItWorksSteps
            items={[
              {
                icon: <SwatchBook />,
                title: t('landing.methodology.tokensFirst.title'),
                description: t('landing.methodology.tokensFirst.description'),
                color: 'chart-4',
              },
              {
                icon: <Layers />,
                title: t('landing.methodology.primitives.title'),
                description: t('landing.methodology.primitives.description'),
                color: 'chart-2',
              },
              {
                icon: <Braces />,
                title: t('landing.methodology.compositionBlocks.title'),
                description: t('landing.methodology.compositionBlocks.description'),
                color: 'chart-1',
              },
              {
                icon: <SquareTerminal />,
                title: t('landing.methodology.cliTemplates.title'),
                description: t('landing.methodology.cliTemplates.description'),
                color: 'warning',
              },
            ]}
          />
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 md:py-24">
        <div className="rounded-2xl border border-border bg-card p-8 md:p-12">
          <ComplianceBadgeRow
            badges={[
              {
                icon: <ShieldCheck />,
                label: t('landing.compliance.wcag.label'),
                description: t('landing.compliance.wcag.description'),
              },
              {
                icon: <Code2 />,
                label: t('landing.compliance.typescript.label'),
                description: t('landing.compliance.typescript.description'),
              },
              {
                icon: <Package />,
                label: t('landing.compliance.treeShakeable.label'),
                description: t('landing.compliance.treeShakeable.description'),
              },
              {
                icon: <BookOpen />,
                label: t('landing.compliance.themeable.label'),
                description: t('landing.compliance.themeable.description'),
              },
            ]}
          />

          <div className="my-10 border-t border-border" />

          <StatBand
            columns={3}
            stats={[
              { value: '99.9%', label: t('landing.stats.docsUptime'), color: 'success' },
              { value: '<24h', label: t('landing.stats.avgResponseTime'), color: 'info' },
              { value: '100%', label: t('landing.stats.typedComponents'), color: 'chart-5' },
            ]}
          />
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-4 pb-16 sm:px-6 lg:px-8 md:pb-24">
        <CTASection
          title={t('landing.cta.title')}
          description={t('landing.cta.description')}
          cta={{ label: t('landing.cta.primary'), href: '#' }}
          secondaryCta={{ label: t('landing.cta.secondary'), href: '#' }}
        />
      </section>

      <MarketingFooter
        logo={<XerticaLogo className="h-8 w-auto text-primary dark:text-foreground" variant="theme" />}
        tagline={t('landing.footer.tagline')}
        columns={[
          {
            heading: t('landing.footer.product.heading'),
            links: [
              { label: t('landing.footer.product.components'), href: '#' },
              { label: t('landing.footer.product.blocks'), href: '#' },
              { label: t('landing.footer.product.themes'), href: '#' },
            ],
          },
          {
            heading: t('landing.footer.resources.heading'),
            links: [
              { label: t('landing.footer.resources.docs'), href: '#' },
              { label: t('landing.footer.resources.cli'), href: '#' },
              { label: t('landing.footer.resources.changelog'), href: '#' },
            ],
          },
          {
            heading: t('landing.footer.company.heading'),
            links: [
              { label: t('landing.footer.company.about'), href: '#' },
              { label: t('landing.footer.company.contact'), href: '#' },
              { label: t('landing.footer.company.careers'), href: '#' },
            ],
          },
        ]}
        copyright={t('landing.footer.copyright')}
      />
    </div>
  );
}