import { useRef, useState, useEffect, useCallback } from 'react';
import { useFadeInRef } from '../hooks/useFadeIn';
import HexCanvas from './HexCanvas';

export default function HomePage({
  onOpenDashboard,
  theme = 'light',
}: {
  onOpenDashboard: () => void;
  theme?: 'light' | 'dark';
}) {
  const scrollRef = useRef<HTMLDivElement>(null);
  const [scrollProgress, setScrollProgress] = useState(0);

  const handleScroll = useCallback(() => {
    const el = scrollRef.current;
    if (!el) return;
    const max = el.scrollHeight - el.clientHeight;
    if (max <= 0) return;
    setScrollProgress(el.scrollTop / max);
  }, []);

  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    el.addEventListener('scroll', handleScroll, { passive: true });
    return () => el.removeEventListener('scroll', handleScroll);
  }, [handleScroll]);

  const heroRef = useFadeInRef();
  const problemRef = useFadeInRef();
  const filtersRef = useFadeInRef();
  const howRef = useFadeInRef();
  const numbersRef = useFadeInRef();
  const ctaRef = useFadeInRef();

  return (
    <div ref={scrollRef} className="flex-1 overflow-y-auto bg-warm-50 dark:bg-navy-950 relative">
      <HexCanvas scrollProgress={scrollProgress} isDark={theme === 'dark'} />

      <div className="relative" style={{ zIndex: 1 }}>
        {/* Hero */}
        <div className="max-w-3xl mx-auto px-6 pt-20 pb-24">
          <div
            ref={heroRef}
            className="fade-in-section backdrop-blur-sm bg-warm-50/60 dark:bg-navy-950/60 rounded-2xl p-8 -mx-2"
          >
            <p className="text-teal-600 font-semibold tracking-wide uppercase text-sm mb-4">
              Find where to live, not just what&apos;s for sale
            </p>
            <h1 className="text-5xl font-extrabold text-navy-950 dark:text-warm-100 mb-6 leading-[1.1] tracking-tight">
              Every neighbourhood
              <br />
              in England &amp; Wales.
              <br />
              <span className="text-teal-600">One map. Your&nbsp;rules.</span>
            </h1>
            <p className="text-xl text-warm-600 dark:text-warm-400 mb-8 leading-relaxed max-w-xl">
              Set the commute, budget, school rating, noise level, and crime threshold you&apos;ll
              accept. Narrowit shows you every area that qualifies &mdash; instantly.
            </p>
            <div className="flex items-center gap-4">
              <button
                onClick={onOpenDashboard}
                className="px-7 py-3.5 bg-coral-500 text-white rounded-lg font-semibold hover:bg-coral-600 transition-colors text-base shadow-lg shadow-coral-500/25"
              >
                Explore the map
              </button>
              <span className="text-warm-400 text-sm">
                No signup &middot; Free &middot; Open data
              </span>
            </div>
          </div>
        </div>

        {/* The flip */}
        <div className="max-w-3xl mx-auto px-6 pb-20">
          <div ref={problemRef} className="fade-in-section">
            <div className="rounded-2xl backdrop-blur-sm bg-warm-50/40 dark:bg-navy-800/40 border border-warm-200/50 dark:border-navy-700/50 p-8">
              <div className="grid md:grid-cols-2 gap-8">
                <div>
                  <h3 className="text-sm font-semibold text-warm-400 uppercase tracking-wide mb-2">
                    The old way
                  </h3>
                  <p className="text-warm-700 dark:text-warm-300 leading-relaxed">
                    Pick a postcode. Google the schools. Check crime stats on another site. Look up
                    commute times. Realise it&apos;s too expensive. Start over. Repeat 40 times.
                  </p>
                </div>
                <div>
                  <h3 className="text-sm font-semibold text-teal-600 uppercase tracking-wide mb-2">
                    With Narrowit
                  </h3>
                  <p className="text-warm-700 dark:text-warm-300 leading-relaxed">
                    Tell the map what you need. Every hexagon that lights up is a place worth
                    looking at. Drill into any one to see individual properties, prices, and energy
                    ratings.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Filter showcase */}
        <div className="max-w-4xl mx-auto px-6 pb-20">
          <div ref={filtersRef} className="fade-in-section">
            <h2 className="text-3xl font-bold text-navy-950 dark:text-warm-100 mb-2 text-center">
              12 datasets. One slider&nbsp;each.
            </h2>
            <p className="text-warm-500 dark:text-warm-400 text-center mb-10 max-w-lg mx-auto">
              Every filter narrows the map in real time. Combine as many as you like.
            </p>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
              {FILTERS.map((f) => (
                <div
                  key={f.label}
                  className="rounded-xl bg-white dark:bg-navy-800 border border-warm-200 dark:border-navy-700 p-4 shadow-sm hover:shadow-md hover:border-teal-300 dark:hover:border-teal-600 transition-all"
                >
                  <div className="text-2xl mb-2">{f.icon}</div>
                  <div className="font-semibold text-navy-950 dark:text-warm-100 text-sm">
                    {f.label}
                  </div>
                  <div className="text-xs text-warm-500 dark:text-warm-400 mt-0.5">{f.example}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* How it works */}
        <div className="max-w-3xl mx-auto px-6 pb-20">
          <div ref={howRef} className="fade-in-section">
            <h2 className="text-3xl font-bold text-navy-950 dark:text-warm-100 mb-10 text-center">
              Three clicks to clarity
            </h2>
            <div className="space-y-6">
              {STEPS.map((step, i) => (
                <div key={i} className="flex gap-5 items-start">
                  <span className="shrink-0 w-10 h-10 rounded-full bg-teal-600 text-white flex items-center justify-center text-lg font-bold">
                    {i + 1}
                  </span>
                  <div>
                    <h3 className="font-semibold text-navy-950 dark:text-warm-100 text-lg">
                      {step.title}
                    </h3>
                    <p className="text-warm-600 dark:text-warm-400 mt-0.5">{step.body}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Numbers */}
        <div className="max-w-3xl mx-auto px-6 pb-20">
          <div ref={numbersRef} className="fade-in-section">
            <div className="grid grid-cols-3 gap-6 text-center">
              {STATS.map((s) => (
                <div key={s.label}>
                  <div className="text-3xl font-extrabold text-teal-600">{s.value}</div>
                  <div className="text-sm text-warm-500 dark:text-warm-400 mt-1">{s.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Final CTA */}
        <div className="max-w-3xl mx-auto px-6 pb-24">
          <div ref={ctaRef} className="fade-in-section text-center">
            <h2 className="text-3xl font-bold text-navy-950 dark:text-warm-100 mb-3">
              Ready to narrow it down?
            </h2>
            <p className="text-warm-500 dark:text-warm-400 mb-8 max-w-md mx-auto">
              100% open data. No account required. Just set your filters and go.
            </p>
            <button
              onClick={onOpenDashboard}
              className="px-8 py-4 bg-coral-500 text-white rounded-lg font-semibold hover:bg-coral-600 transition-colors text-lg shadow-lg shadow-coral-500/25"
            >
              Open the map
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

const FILTERS = [
  { icon: '\u00A3', label: 'Sale price', example: 'e.g. under \u00A3400k' },
  { icon: '\uD83D\uDE86', label: 'Commute time', example: 'e.g. < 45 min to Bank' },
  { icon: '\uD83C\uDFEB', label: 'School quality', example: 'Ofsted Outstanding' },
  { icon: '\uD83D\uDEA8', label: 'Crime rate', example: 'Low burglary areas' },
  { icon: '\u26A1', label: 'Energy rating', example: 'EPC band A\u2013C' },
  { icon: '\uD83D\uDCCF', label: 'Floor area', example: 'e.g. 80+ sqm' },
  { icon: '\uD83D\uDD07', label: 'Road noise', example: 'Below 55 dB Lden' },
  { icon: '\uD83C\uDF10', label: 'Broadband speed', example: '100+ Mbps available' },
];

const STEPS = [
  {
    title: 'Add your deal-breakers',
    body: 'Slide the filters for everything you care about \u2014 price cap, max commute, school quality, noise. The map updates as you drag.',
  },
  {
    title: 'Spot the clusters',
    body: 'Hexagons light up where properties match. Zoom in and they split into finer cells. At street level you see individual postcode boundaries.',
  },
  {
    title: 'Dive into a neighbourhood',
    body: 'Click any hexagon to see every property inside it \u2014 sale prices, floor plans, energy ratings, tenure. Layer on cafes, GP surgeries, and parks from OpenStreetMap.',
  },
];

const STATS = [
  { value: '26M+', label: 'property records' },
  { value: '12', label: 'open datasets' },
  { value: '1.7M', label: 'postcodes mapped' },
];
