import {CheckCircle2, DoorOpen} from 'lucide-react';
import Image from 'next/image';
import {ButtonLink} from './ButtonLink';
import {DemoFrame} from './DemoFrame';
import {DemoSubnav} from './DemoSubnav';
import {Faq} from './Faq';
import {SectionHeader} from './SectionHeader';
import {Stats} from './Stats';
import {orderedDemos} from '@/config/content';
import type {DemoContent} from '@/types/content';

type DemoPageProps = {
  demo: DemoContent;
};

export function DemoPage({demo}: DemoPageProps) {
  return (
    <>
      <div className="demoSubnavBar">
        <div className="container">
          <DemoSubnav demos={orderedDemos} activeSlug={demo.slug} />
        </div>
      </div>

      <main>
      <section className="demoHero sectionBand sectionBand--light">
        <div className="container demoHero__grid">
          <div>
            <p className="eyebrow">{demo.eyebrow}</p>
            <h1>{demo.title}</h1>
            <p>{demo.intro}</p>
            <p>{demo.description}</p>
            <div className="buttonRow">
              <ButtonLink href="#podglad">Zobacz demo</ButtonLink>
              <ButtonLink href="#kontakt" variant="secondary">
                Porozmawiajmy
              </ButtonLink>
            </div>
          </div>
          {demo.imageUrl ? (
            <Image src={demo.imageUrl} alt="" width={640} height={640} priority />
          ) : (
            <div className="demoHero__visual" aria-hidden="true">
              <DoorOpen size={112} />
            </div>
          )}
        </div>
      </section>

      <section id="podglad" className="sectionBand">
        <div className="container">
          <DemoFrame title={demo.title} url={demo.iframeUrl} openLabel={demo.openLabel} />
        </div>
      </section>

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

      <section className="sectionBand">
        <div className="container">
          <SectionHeader title={demo.benefitsIntro} />
          <div className="featureGrid featureGrid--three">
            {demo.benefits.map(benefit => (
              <article className="featureItem" key={benefit.title}>
                <CheckCircle2 size={22} />
                <h3>{benefit.title}</h3>
                <p>{benefit.description}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="sectionBand sectionBand--dark">
        <div className="container finalCta finalCta--dark">
          <h2>{demo.cta.title}</h2>
          <p>{demo.cta.description}</p>
          <ButtonLink href="#kontakt">
            {demo.cta.button}
          </ButtonLink>
        </div>
      </section>

      <section className="sectionBand sectionBand--tint">
        <div className="container narrow">
          <SectionHeader title="FAQ" />
          <Faq items={demo.faq} />
        </div>
      </section>
      </main>
    </>
  );
}
