import React from 'react';
import { motion } from 'framer-motion';
type FormPageLayoutProps = {
  eyebrow: string;
  title: React.ReactNode;
  description: string;
  children: React.ReactNode;
};
export function FormPageLayout({
  eyebrow,
  title,
  description,
  children
}: FormPageLayoutProps) {
  return (
    <main>
      <section
        className="relative w-full overflow-hidden bg-brand-ink"
        aria-label={eyebrow}>
        
        <div
          className="pointer-events-none absolute inset-0"
          style={{
            backgroundImage:
            'linear-gradient(rgba(13,208,202,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(13,208,202,0.05) 1px, transparent 1px)',
            backgroundSize: '48px 48px'
          }}
          aria-hidden="true" />
        
        <div className="relative mx-auto max-w-3xl px-4 pb-40 pt-32 text-center sm:px-6 lg:pt-40">
          <motion.p
            initial={{
              opacity: 0,
              y: 16
            }}
            animate={{
              opacity: 1,
              y: 0
            }}
            transition={{
              duration: 0.5
            }}
            className="font-display text-xs font-semibold uppercase tracking-[0.2em] text-brand-bright">
            
            {eyebrow}
          </motion.p>
          <motion.h1
            initial={{
              opacity: 0,
              y: 20
            }}
            animate={{
              opacity: 1,
              y: 0
            }}
            transition={{
              duration: 0.6,
              delay: 0.1
            }}
            className="mt-4 font-display text-4xl font-extrabold leading-tight text-white sm:text-5xl">
            
            {title}
          </motion.h1>
          <motion.p
            initial={{
              opacity: 0,
              y: 20
            }}
            animate={{
              opacity: 1,
              y: 0
            }}
            transition={{
              duration: 0.6,
              delay: 0.2
            }}
            className="mx-auto mt-5 max-w-xl text-lg leading-relaxed text-white/70">
            
            {description}
          </motion.p>
        </div>
      </section>

      <section className="relative z-10 w-full bg-brand-mist lg:pb-28 pt-[40px] pb-[40px]">
        <div className="mx-auto -mt-12 max-w-2xl px-4 sm:px-6">
          <motion.div
            initial={{
              opacity: 0,
              y: 24
            }}
            animate={{
              opacity: 1,
              y: 0
            }}
            transition={{
              duration: 0.6,
              delay: 0.3
            }}
            className="rounded-2xl bg-white p-7 shadow-lift sm:p-10 pt-[40px] pb-[40px] mt-[0px] mb-[0px]">
            
            {children}
          </motion.div>
        </div>
      </section>
    </main>);

}