import React, { useEffect } from 'react';
import { motion } from 'framer-motion';
import SEO from '../../components/SEO';

interface LegalSection {
  title: string;
  body: string[];
}

interface LegalPageProps {
  title: string;
  description: string;
  canonicalUrl: string;
  eyebrow: string;
  intro: string;
  sections: LegalSection[];
}

const LegalPage: React.FC<LegalPageProps> = ({
  title,
  description,
  canonicalUrl,
  eyebrow,
  intro,
  sections,
}) => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  return (
    <>
      <SEO
        title={title}
        description={description}
        canonicalUrl={canonicalUrl}
        keywords={['Bay Area IT legal', 'privacy policy', 'terms of service']}
      />

      <div className="pt-20 min-h-screen bg-background-light dark:bg-background-dark relative overflow-x-hidden">
        <div className="absolute top-0 left-0 right-0 h-[720px] bg-[radial-gradient(ellipse_75%_50%_at_50%_-20%,rgba(255,255,255,0.08),rgba(255,255,255,0))] pointer-events-none" />
        <div className="absolute top-32 left-1/2 -translate-x-1/2 w-[760px] h-[420px] bg-white/5 rounded-full blur-[120px] pointer-events-none" />

        <section className="px-6 py-20 border-b border-white/10 relative z-10">
          <div className="max-w-4xl mx-auto">
            <motion.p
              initial={{ opacity: 0, y: 16 }}
              animate={{ opacity: 1, y: 0 }}
              className="text-xs uppercase tracking-[0.35em] text-gray-500 mb-6"
            >
              {eyebrow}
            </motion.p>
            <motion.h1
              initial={{ opacity: 0, y: 18 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.05 }}
              className="font-display text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6"
            >
              {title}
            </motion.h1>
            <motion.p
              initial={{ opacity: 0, y: 18 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 }}
              className="max-w-3xl text-lg md:text-xl leading-relaxed text-gray-600 dark:text-gray-300"
            >
              {intro}
            </motion.p>
          </div>
        </section>

        <section className="px-6 py-16 md:py-20 relative z-10">
          <div className="max-w-4xl mx-auto">
            <div className="grid gap-6">
              {sections.map((section, index) => (
                <motion.article
                  key={section.title}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true, margin: '-10%' }}
                  transition={{ delay: index * 0.04 }}
                  className="rounded-[2rem] border border-white/10 bg-white/5 backdrop-blur-sm p-8 md:p-10 shadow-[0_30px_80px_rgba(0,0,0,0.18)]"
                >
                  <h2 className="font-display text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-5">
                    {section.title}
                  </h2>
                  <div className="space-y-4 text-base md:text-lg leading-relaxed text-gray-600 dark:text-gray-300">
                    {section.body.map((paragraph, paragraphIndex) => {
                      const [before, after] = paragraph.split('support@bayarea-cc.com');

                      return (
                        <p key={`${section.title}-${paragraphIndex}`}>
                          {after !== undefined ? (
                            <>
                              {before}
                              <a
                                href="mailto:support@bayarea-cc.com"
                                className="text-gray-900 dark:text-white underline decoration-white/30 underline-offset-4 transition-opacity hover:opacity-75"
                              >
                                support@bayarea-cc.com
                              </a>
                              {after}
                            </>
                          ) : (
                            paragraph
                          )}
                        </p>
                      );
                    })}
                  </div>
                </motion.article>
              ))}
            </div>
          </div>
        </section>
      </div>
    </>
  );
};

export default LegalPage;