import {ArrowRight, Box, CheckCircle2, DoorOpen, Layers3, Plug, Settings2, ShoppingCart, Workflow} from 'lucide-react';
import type {Metadata} from 'next';
import Image from 'next/image';
import Link from 'next/link';
import {ButtonLink} from '@/components/ButtonLink';
import {Faq} from '@/components/Faq';
import {HeroVisual} from '@/components/HeroVisual';
import {SectionHeader} from '@/components/SectionHeader';
import {Stats} from '@/components/Stats';
import {homeContent, marketingFaq, orderedDemos} from '@/config/content';
import messages from '../../../messages/pl.json';

export const metadata: Metadata = {
  title: messages.metadata.homeTitle,
  description: messages.metadata.homeDescription
};

const platformIcons = [Settings2, Workflow, Plug, ShoppingCart];
const industryIcons = [Box, Layers3, CheckCircle2];

export default function HomePage() {
  return (
    <main>
      <section className="hero sectionBand sectionBand--light">
        <div className="container hero__grid">
          <div className="hero__content">
            <p className="eyebrow">{homeContent.hero.eyebrow}</p>
            <h1>{homeContent.hero.title}</h1>
            <p>{homeContent.hero.description}</p>
            <div className="buttonRow">
              <ButtonLink href="/pl/dema">{homeContent.hero.primaryCta}</ButtonLink>
              <ButtonLink href="#kontakt" variant="secondary">
                {homeContent.hero.secondaryCta}
              </ButtonLink>
            </div>
          </div>
          <HeroVisual />
        </div>
      </section>

      <section id="dema" className="sectionBand demosBand">
        <div className="container">
          <SectionHeader title={homeContent.demosTitle} description={homeContent.demosDescription} />
          <div className="demoCards">
            {orderedDemos.map(demo => (
              <article className="demoCard" key={demo.slug}>
                {demo.imageUrl ? (
                  <Image src={demo.imageUrl} alt="" width={420} height={420} />
                ) : (
                  <div className="demoCard__visual" aria-hidden="true">
                    <DoorOpen size={72} />
                  </div>
                )}
                <div>
                  <p className="eyebrow">{demo.eyebrow}</p>
                  <h3>{demo.title}</h3>
                  <p>{demo.intro}</p>
                  <Link href={`/pl/dema?demo=${demo.slug}`}>
                    {demo.openLabel}
                    <ArrowRight size={18} />
                  </Link>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section id="platforma" className="sectionBand sectionBand--tint">
        <div className="container splitSection">
          <SectionHeader title={homeContent.benefitsTitle} description={homeContent.benefitsDescription} />
          <div className="featureGrid">
            {homeContent.benefits.map((item, index) => {
              const Icon = platformIcons[index];
              return (
                <article className="featureItem" key={item.title}>
                  <Icon size={24} />
                  <h3>{item.title}</h3>
                  <p>{item.description}</p>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      <section className="sectionBand statsBand">
        <div className="container">
          <Stats stats={homeContent.stats} />
        </div>
      </section>

      <section className="sectionBand industriesBand">
        <div className="container">
          <SectionHeader title={homeContent.industriesTitle} />
          <div className="featureGrid featureGrid--three">
            {homeContent.industries.map((item, index) => {
              const Icon = industryIcons[index];
              return (
                <article className="featureItem" key={item.title}>
                  <Icon size={24} />
                  <h3>{item.title}</h3>
                  <p>{item.description}</p>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      <section id="funkcje" className="sectionBand sectionBand--dark">
        <div className="container splitSection splitSection--dark">
          <SectionHeader title={homeContent.featuresTitle} />
          <ul className="checkList">
            {homeContent.features.map(feature => (
              <li key={feature}>
                <CheckCircle2 size={20} />
                {feature}
              </li>
            ))}
          </ul>
        </div>
      </section>

      <section className="sectionBand">
        <div className="container">
          <SectionHeader title={homeContent.processTitle} />
          <div className="processGrid">
            {homeContent.process.map((item, index) => (
              <article key={item.title}>
                <span>{index + 1}</span>
                <h3>{item.title}</h3>
                <p>{item.description}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section id="faq" className="sectionBand sectionBand--tint">
        <div className="container narrow">
          <SectionHeader title="FAQ" />
          <Faq items={marketingFaq} />
        </div>
      </section>

      <section className="sectionBand">
        <div className="container finalCta">
          <h2>{homeContent.finalCta.title}</h2>
          <p>{homeContent.finalCta.description}</p>
          <ButtonLink href="#kontakt">
            {homeContent.finalCta.button}
          </ButtonLink>
        </div>
      </section>
    </main>
  );
}