// All sections of the WM Photos by Tom marketing site.
// Read window-scoped atoms from components.jsx.

const { Logo, Eyebrow, ScriptText, Button, Chip, Icons, wmTokens: T } = window;

// ---- HERO ----------------------------------------------------------------
function Hero({ go }) {
  return (
    <section data-screen-label="01 Hero" className="hero-sec" style={{ padding: '24px 64px 96px', position: 'relative' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="resp-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 56, alignItems: 'center', paddingTop: 32 }}>
          <div className="reveal">
            <Eyebrow tone="light" style={{ marginBottom: 22, color: 'rgba(255,255,255,0.85)' }}>
              WM Photos · est. 2018 · Erie, Colorado
            </Eyebrow>
            <h1 className="hero-h1" style={{
              fontFamily: 'var(--font-display)', fontSize: 88, lineHeight: 0.95,
              fontWeight: 500, letterSpacing: '-0.015em',
              color: T.white, margin: 0,
            }}>
              Capture your best <em style={{ fontWeight: 400, color: T.gold300 }}>moments</em>.
            </h1>
            <p style={{
              fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6,
              color: 'rgba(255,255,255,0.88)', marginTop: 28, maxWidth: '46ch',
            }}>
              I'm Tom Taylor — a local photographer making professional pictures for businesses, families, and the wild places in between. Headshots, team photos, events, real estate, and nature. Shot in your space or out in the field, anywhere around Erie.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 32, alignItems: 'center' }}>
              <Button variant="accent" onClick={() => go('contact')} icon={Icons.arrowRight}>Free consultation</Button>
              <Button variant="secondaryLight" onClick={() => go('portfolio')}>See the work</Button>
            </div>
            <div className="stats-row" style={{ display: 'flex', gap: 32, marginTop: 56 }}>
              <MiniStat n="25+" l="years in Erie" />
              <MiniStat n="$250" l="flat hourly rate" />
              <MiniStat n="1 day" l="usual reply time" />
            </div>
          </div>

          {/* Photo collage — three real frames stacked */}
          <div className="hero-collage" style={{ position: 'relative', height: 640 }}>
            <Frame src="images/06-hero-105-wells-sunrise.jpg" alt="105 Wells at sunrise" className="img-hover hero-img-a" style={{
              position: 'absolute', top: 0, right: 0, width: '78%', height: 360,
              borderRadius: 14, boxShadow: '0 32px 80px rgba(9,17,41,0.4)',
            }} />
            <Frame src="images/14-hero-jamie-rocks-dogs.jpg" alt="Jamie with rocks and dogs" className="img-hover hero-img-b" style={{
              position: 'absolute', bottom: 0, left: 0, width: '58%', height: 360,
              borderRadius: 14, boxShadow: '0 32px 80px rgba(9,17,41,0.4)',
            }}>
              <ScriptText size={48} color={T.white} style={{
                position: 'absolute', bottom: 18, left: 22,
                textShadow: '0 2px 12px rgba(0,0,0,0.5)',
              }}>by Tom</ScriptText>
            </Frame>
            <div className="hero-pill" style={{
              position: 'absolute', bottom: 22, right: 28,
              background: T.white, padding: '12px 18px', borderRadius: 999,
              fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              color: T.green800, boxShadow: '0 8px 24px rgba(9,17,41,0.18)',
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{ width: 7, height: 7, background: T.green500, borderRadius: 999 }} />
              Booking now
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function MiniStat({ n, l }) {
  return (
    <div>
      <div style={{
        fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 500,
        color: T.white, lineHeight: 1, letterSpacing: '-0.01em',
      }}>{n}</div>
      <div style={{
        fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 600,
        letterSpacing: '0.18em', textTransform: 'uppercase',
        color: 'rgba(255,255,255,0.7)', marginTop: 8,
      }}>{l}</div>
    </div>
  );
}

// Photo "Frame" — image with cover crop + optional overlay children
function Frame({ src, alt, style, children, className = 'img-hover' }) {
  return (
    <div className={className} style={{ position: 'relative', overflow: 'hidden', ...style }}>
      <img src={src} alt={alt} style={{
        width: '100%', height: '100%', objectFit: 'cover', display: 'block',
      }} />
      {children}
    </div>
  );
}

// ---- MARQUEE GALLERY STRIP ----------------------------------------------
const GALLERY_IMAGES = [
  { src: 'images/13-hero-balloon-glow.jpg', cap: 'Best of the balloon glow' },
  { src: 'images/03-hero-canyon-acoustics-brewfest.jpg', cap: 'Canyon Acoustics · Erie Brewfest' },
  { src: 'images/11-hero-balloons-row.jpg', cap: 'Hot-air balloons at dawn' },
  { src: 'images/07-hero-bootstrap-brewing.jpg', cap: 'Bootstrap Brewing' },
  { src: 'images/12-hero-standing-test-of-time.jpg', cap: 'Standing the test of time' },
  { src: 'images/14-hero-jamie-rocks-dogs.jpg', cap: 'Jamie · rocks & dogs' },
];

function GalleryStrip() {
  return (
    <section data-screen-label="02 Gallery" style={{ background: T.white, padding: '96px 64px 64px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 36 }} data-reveal>
          <div>
            <Eyebrow style={{ marginBottom: 14 }}>Recent frames</Eyebrow>
            <h2 className="sec-h2" style={{
              fontFamily: 'var(--font-display)', fontSize: 48, fontWeight: 500,
              margin: 0, letterSpacing: '-0.01em', color: T.indigo900, lineHeight: 1.05,
            }}>
              A working scrapbook,<br/>updated as I shoot.
            </h2>
          </div>
          <a href="#portfolio" className="tlink" style={{
            fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600,
            color: T.indigo900, display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>
            More photos {Icons.arrowRight}
          </a>
        </div>
      </div>
      <div className="resp-6" style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(6, 1fr)',
        gap: 4,
        margin: '0 -4px',
      }}>
        {GALLERY_IMAGES.map((it, i) => (
          <div key={i}
            data-reveal
            style={{ position: 'relative', cursor: 'zoom-in', transitionDelay: `${i * 60}ms` }}
            onClick={() => window.openLightbox(GALLERY_IMAGES, i)}>
            <Frame src={it.src} alt={it.cap} style={{
              aspectRatio: '3/4', borderRadius: 0,
            }} />
          </div>
        ))}
      </div>
    </section>
  );
}

// ---- SERVICES ------------------------------------------------------------
const SERVICES = [
  {
    name: 'Headshots',
    img: 'images/15-service-headshots.jpeg',
    blurb: 'LinkedIn, personal brand, casting — clean, confident portraits with quick turnaround. Studio or on-location.',
    bullet: '30 min per person',
  },
  {
    name: 'Team photos',
    img: 'images/16-service-team-photos.jpeg',
    blurb: 'Cohesive, vibrant photos of your team. Built for websites, marketing, and internal comms. Any size group.',
    bullet: 'Flexible scheduling',
  },
  {
    name: 'Events',
    img: 'images/17-service-event-kelly-bread-lady.jpg',
    blurb: 'Corporate or private — candid and posed, told as a single story. I move quietly and shoot wide.',
    bullet: 'Full delivery in 5 days',
  },
  {
    name: 'Family portraits',
    img: 'images/18-service-family-house-fountain.jpg',
    blurb: 'Indoor or out, warm and natural. I work to get a relaxed room — that\'s where the real smiles live.',
    bullet: 'Indoor or outdoor',
  },
  {
    name: 'Real estate',
    img: 'images/04-hero-105-wells-southeast.jpg',
    blurb: 'Crisp, well-lit frames that show a property at its best. Help your listings move — faster.',
    bullet: 'HDR exposures',
  },
  {
    name: 'Nature',
    img: 'images/19-service-nature-bugler.jpg',
    blurb: 'High-resolution landscapes, wildlife, and seasons. For prints, publications, or private collections.',
    bullet: 'Print-ready files',
  },
];

function Services({ go }) {
  return (
    <section id="services" data-screen-label="03 Services" style={{ background: T.white, padding: '32px 64px 96px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="resp-2" data-reveal style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64,
          alignItems: 'end', marginBottom: 56,
        }}>
          <div>
            <Eyebrow style={{ marginBottom: 16 }}>What I shoot</Eyebrow>
            <h2 className="sec-h2" style={{
              fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 500,
              margin: 0, letterSpacing: '-0.01em', color: T.indigo900, lineHeight: 1.02,
            }}>
              Services.
            </h2>
          </div>
          <p style={{
            fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.7,
            color: T.n600, margin: 0,
          }}>
            At WM Photos by Tom, I specialize in creating images that elevate your brand and tell your story honestly — from your team at work to the elk in the field. Same flat rate across every kind of shoot.
          </p>
        </div>

        <div className="resp-3" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20,
        }}>
          {SERVICES.map((s, i) => (
            <div key={i} data-reveal style={{ transitionDelay: `${i * 70}ms` }}>
              <ServiceCard idx={i + 1} {...s} onClick={() => go('contact')} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ idx, name, img, blurb, bullet, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={onClick}
      style={{
        background: T.white,
        borderRadius: 14, overflow: 'hidden',
        boxShadow: hover ? '0 16px 40px rgba(9,17,41,0.18)' : '0 4px 12px rgba(9,17,41,0.08)',
        transform: hover ? 'translateY(-2px)' : 'translateY(0)',
        transition: 'all 240ms var(--ease-out)',
        cursor: 'pointer',
        border: `1px solid ${T.n100}`,
        display: 'flex', flexDirection: 'column',
      }}
    >
      <Frame src={img} alt={name} className="img-hover" style={{ aspectRatio: '4/3' }} />
      <div style={{ padding: '22px 24px 24px' }}>
        <h3 style={{
          fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 500,
          color: T.indigo900, margin: 0, letterSpacing: '-0.01em',
        }}>{name}</h3>
        <p style={{
          fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.55,
          color: T.n600, margin: '8px 0 0',
        }}>{blurb}</p>
      </div>
    </article>
  );
}

// ---- PORTFOLIO (mixed grid) ---------------------------------------------
// Ordered list defines the lightbox sequence.
const PORTFOLIO_IMAGES = [
  { src: 'images/10-hero-danico-brewing.jpg',          cap: 'Danico Brewing' },
  { src: 'images/20-portfolio-ashley-maddy.jpg',       cap: 'Ashley & Maddy' },
  { src: 'images/22-portfolio-landline-doughnuts.jpg', cap: 'Landline Doughnuts' },
  { src: 'images/21-portfolio-family-willow.jpg',      cap: 'Family by the willow' },
  { src: 'images/09-hero-old-cadillac.jpg',            cap: 'The old Cadillac' },
  { src: 'images/05-hero-wagnaar-family.jpg',          cap: 'Jeff Wagnaar & family' },
  { src: 'images/12-hero-standing-test-of-time.jpg',   cap: 'Standing the test of time' },
];

function Portfolio() {
  const open = (i) => window.openLightbox(PORTFOLIO_IMAGES, i);
  return (
    <section id="portfolio" data-screen-label="04 Portfolio" style={{ background: T.white, padding: '32px 64px 96px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <hr data-reveal style={{ border: 'none', borderTop: `2px solid ${T.indigo900}`, margin: '0 0 32px', width: 64 }} />
        <div data-reveal style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 32, flexWrap: 'wrap', gap: 12 }}>
          <h2 className="sec-h2" style={{
            fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 500,
            margin: 0, letterSpacing: '-0.01em', color: T.indigo900,
          }}>From the portfolio.</h2>
          <span className="wm-pull hide-sm" style={{ color: T.n600, fontSize: 18, fontStyle: 'italic' }}>
            "Honest pictures of real businesses, families, and Colorado."
          </span>
        </div>

        <div className="resp-2" style={{
          display: 'grid',
          gridTemplateColumns: '2fr 1fr',
          gap: 16, marginBottom: 16,
        }}>
          <div data-reveal><PortfolioItem src={PORTFOLIO_IMAGES[0].src} alt={PORTFOLIO_IMAGES[0].cap} height={520} onClick={() => open(0)} /></div>
          <div data-reveal style={{ transitionDelay: '80ms' }}><PortfolioItem src={PORTFOLIO_IMAGES[1].src} alt={PORTFOLIO_IMAGES[1].cap} height={520} onClick={() => open(1)} /></div>
        </div>

        <div className="resp-3" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 16,
        }}>
          <div data-reveal><PortfolioItem src={PORTFOLIO_IMAGES[2].src} alt={PORTFOLIO_IMAGES[2].cap} onClick={() => open(2)} /></div>
          <div data-reveal style={{ transitionDelay: '80ms' }}><PortfolioItem src={PORTFOLIO_IMAGES[3].src} alt={PORTFOLIO_IMAGES[3].cap} onClick={() => open(3)} /></div>
          <div data-reveal style={{ transitionDelay: '160ms' }}><PortfolioItem src={PORTFOLIO_IMAGES[4].src} alt={PORTFOLIO_IMAGES[4].cap} onClick={() => open(4)} /></div>
        </div>

        <div className="resp-2" style={{
          display: 'grid',
          gridTemplateColumns: '1fr 2fr',
          gap: 16, marginTop: 16,
        }}>
          <div data-reveal><PortfolioItem src={PORTFOLIO_IMAGES[5].src} alt={PORTFOLIO_IMAGES[5].cap} height={420} onClick={() => open(5)} /></div>
          <div data-reveal style={{ transitionDelay: '80ms' }}><PortfolioItem src={PORTFOLIO_IMAGES[6].src} alt={PORTFOLIO_IMAGES[6].cap} height={420} onClick={() => open(6)} /></div>
        </div>
      </div>
    </section>
  );
}

function PortfolioItem({ src, alt, height, onClick }) {
  return (
    <a className="img-hover" onClick={onClick} style={{
      position: 'relative', display: 'block',
      borderRadius: 14, overflow: 'hidden',
      cursor: 'zoom-in',
      boxShadow: '0 4px 12px rgba(9,17,41,0.08)',
      aspectRatio: height ? undefined : '4/5',
      height: height || undefined,
    }}>
      <img src={src} alt={alt} style={{
        width: '100%', height: '100%', objectFit: 'cover', display: 'block',
      }} />
    </a>
  );
}

// ---- PRICING -------------------------------------------------------------
function Pricing({ go }) {
  const includes = [
    'Professional headshots',
    'Team photography sessions',
    'Office environment shoots',
    'Ownership of your photos',
    'Flexible booking times',
    'High-quality images',
    'Fast turnaround times',
    'Customized photo sessions',
  ];
  return (
    <section id="pricing" data-screen-label="05 Pricing" style={{ padding: '128px 64px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div className="resp-2" style={{
          display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64, alignItems: 'center',
        }}>
          <div data-reveal>
            <Eyebrow tone="light" style={{ marginBottom: 16, color: 'rgba(255,255,255,0.85)' }}>Pricing</Eyebrow>
            <h2 className="sec-h2" style={{
              fontFamily: 'var(--font-display)', fontSize: 64, fontWeight: 500,
              margin: 0, letterSpacing: '-0.01em', color: T.white, lineHeight: 1,
            }}>
              One rate. <em style={{ color: T.gold300, fontWeight: 400 }}>No guesswork.</em>
            </h2>
            <p style={{
              fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.7,
              color: 'rgba(255,255,255,0.85)', marginTop: 24, maxWidth: '50ch',
            }}>
              I charge an hourly rate for any type of photography — headshots, events, nature, real estate, families. Perfect for small businesses that need real numbers up front. You only pay for the hours you book.
            </p>
            <div style={{
              marginTop: 32, padding: '20px 24px',
              background: 'rgba(255,255,255,0.08)',
              border: '1px solid rgba(255,255,255,0.15)',
              borderRadius: 14,
              display: 'flex', alignItems: 'center', gap: 16,
              maxWidth: 460,
            }}>
              <span style={{ color: T.gold300, display: 'inline-flex' }}>{Icons.calendar}</span>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'rgba(255,255,255,0.92)' }}>
                Two-hour minimum. Travel inside Erie & Boulder County included.
              </span>
            </div>
          </div>

          <div className="price-card" data-reveal style={{
            background: T.white, borderRadius: 14, padding: '44px 44px 36px',
            boxShadow: '0 32px 80px rgba(9,17,41,0.28)', position: 'relative',
            transitionDelay: '120ms',
          }}>
            <div style={{
              position: 'absolute', top: -14, left: 36,
              background: T.gold500, color: T.white,
              padding: '7px 14px', borderRadius: 999,
              fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700,
              letterSpacing: '0.22em', textTransform: 'uppercase',
            }}>Flat rate</div>

            <Eyebrow style={{ marginBottom: 6 }}>Any type of shoot</Eyebrow>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span className="price-num" style={{
                fontFamily: 'var(--font-display)', fontSize: 96, fontWeight: 500,
                color: T.indigo900, lineHeight: 1, letterSpacing: '-0.02em',
              }}>$250</span>
              <span style={{
                fontFamily: 'var(--font-display)', fontSize: 24, fontStyle: 'italic',
                color: T.n600, fontWeight: 400,
              }}>/ hour</span>
            </div>
            <p style={{
              fontFamily: 'var(--font-body)', fontSize: 14,
              color: T.n600, marginTop: 6, marginBottom: 28,
            }}>Same rate for every service. Final invoice equals time on site.</p>

            <hr style={{ border: 'none', borderTop: `1px solid ${T.n100}`, margin: '0 0 20px' }} />

            <Eyebrow style={{ marginBottom: 16 }}>Every shoot includes</Eyebrow>
            <ul className="pricing-includes" style={{
              listStyle: 'none', margin: 0, padding: 0,
              display: 'grid', gridTemplateColumns: '1fr 1fr',
              gap: '12px 24px',
            }}>
              {includes.map((it, i) => (
                <li key={i} style={{
                  display: 'flex', gap: 10, alignItems: 'center',
                  fontFamily: 'var(--font-body)', fontSize: 14, color: T.indigo900,
                }}>
                  <span style={{ color: T.green500, display: 'inline-flex' }}>{Icons.check}</span>{it}
                </li>
              ))}
            </ul>

            <Button variant="accent" onClick={() => go('contact')} icon={Icons.arrowRight}
                    style={{ marginTop: 28, width: '100%', justifyContent: 'center' }}>
              Get started
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- ABOUT ---------------------------------------------------------------
function About({ go }) {
  return (
    <section id="about" data-screen-label="06 About" style={{ background: T.white, padding: '96px 64px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div className="resp-2" style={{
          display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 64, alignItems: 'center',
        }}>
          <div data-reveal style={{ position: 'relative' }}>
            <Frame
              src="images/23-about-tom-taylor.avif"
              alt="Tom Taylor — WM Photos by Tom"
              style={{ aspectRatio: '4/5', borderRadius: 14, boxShadow: '0 32px 80px rgba(9,17,41,0.18)' }}
            >
              <ScriptText size={56} color={T.white} style={{
                position: 'absolute', bottom: 24, left: 24,
                textShadow: '0 2px 12px rgba(0,0,0,0.55)',
              }}>Tom</ScriptText>
            </Frame>
            <div style={{
              position: 'absolute', top: -16, right: -16,
              background: T.gold500, color: T.white,
              padding: '14px 18px', borderRadius: 14,
              fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700,
              letterSpacing: '0.22em', textTransform: 'uppercase',
              boxShadow: '0 16px 40px rgba(9,17,41,0.18)', maxWidth: 200,
              lineHeight: 1.4,
            }}>
              Erie resident<br/>for 25+ years
            </div>
          </div>

          <div data-reveal style={{ transitionDelay: '120ms' }}>
            <Eyebrow style={{ marginBottom: 16 }}>Meet Tom · Your local photography expert</Eyebrow>
            <h2 className="sec-h2" style={{
              fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 500,
              margin: 0, letterSpacing: '-0.01em', color: T.indigo900, lineHeight: 1.02,
            }}>
              I make pictures for the businesses and families that <em style={{ fontWeight: 400, color: T.gold600 }}>built this town.</em>
            </h2>
            <p style={{
              fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.75,
              color: T.n600, marginTop: 24,
            }}>
              With years of experience in commercial photography, I'm dedicated to capturing the essence of local businesses. My passion is helping clients present themselves professionally through honest, well-made photographs.
            </p>
            <p style={{
              fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.75,
              color: T.n600, marginTop: 14,
            }}>
              I'm a member of the Erie Chamber of Commerce and VFW Post 1771. I've called Erie home for over 25 years. The studio is named "Windmill" after the song <em>Windmills of Your Mind</em> by Sting — it's been stuck in my head ever since.
            </p>

            <hr style={{ border: 'none', borderTop: `2px solid ${T.indigo900}`, margin: '36px 0 28px', width: 56 }} />

            <div className="resp-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, marginBottom: 36 }}>
              <Stat n="25+" l="Years in Erie" />
              <Stat n="$250" l="Flat hourly rate" />
              <Stat n="6" l="Services offered" />
            </div>

            <Button variant="primary" onClick={() => go('contact')} icon={Icons.arrowRight}>
              Get in touch
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({ n, l }) {
  return (
    <div>
      <div style={{
        fontFamily: 'var(--font-display)', fontSize: 40, fontWeight: 500,
        color: T.indigo900, lineHeight: 1, letterSpacing: '-0.01em',
      }}>{n}</div>
      <div style={{
        fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700,
        letterSpacing: '0.22em', textTransform: 'uppercase',
        color: T.n600, marginTop: 10,
      }}>{l}</div>
    </div>
  );
}

// ---- CONTACT -------------------------------------------------------------
function Contact() {
  const [form, setForm] = React.useState({ name: '', email: '', msg: '', agree: false, website: '' });
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value });
  const submit = async (e) => {
    e.preventDefault();
    if (!(form.agree && form.name && form.email) || submitting) return;
    setSubmitting(true);
    setError('');
    try {
      const r = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok) throw new Error(data.error || 'Something went wrong. Please try again.');
      setSent(true);
    } catch (err) {
      setError(err.message || 'Something went wrong. Please try again.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section id="contact" data-screen-label="07 Contact" style={{ background: T.white, padding: '32px 64px 96px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div className="resp-2 contact-card" style={{
          background: T.white, padding: '64px 56px', borderRadius: 14,
          boxShadow: '0 16px 40px rgba(9,17,41,0.12)',
          display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64,
        }}>
          <div data-reveal>
            <Eyebrow style={{ marginBottom: 16 }}>Free consultation</Eyebrow>
            <h2 className="sec-h2" style={{
              fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 500,
              margin: 0, letterSpacing: '-0.01em', color: T.indigo900, lineHeight: 1,
            }}>Let's talk.</h2>
            <p style={{
              fontFamily: 'var(--font-body)', fontSize: 16, color: T.n600,
              marginTop: 16, maxWidth: '50ch',
            }}>
              Tell me about the shoot — what it's for, when, and where. I usually reply within a day.
            </p>

            {sent ? (
              <div style={{
                marginTop: 36, padding: '28px 32px',
                background: T.green100, borderRadius: 14, color: T.green800,
                border: `1px solid ${T.green300}`,
              }}>
                <Eyebrow style={{ color: T.green800, marginBottom: 10 }}>Sent</Eyebrow>
                <div style={{
                  fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 500,
                  lineHeight: 1.15, color: T.indigo900, letterSpacing: '-0.01em',
                }}>
                  Thank you! Your submission has been received.
                </div>
                <ScriptText size={40} color={T.green800} style={{ display: 'block', marginTop: 16 }}>— Tom</ScriptText>
              </div>
            ) : (
              <form onSubmit={submit} style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 18 }}>
                <div aria-hidden="true" style={{
                  position: 'absolute', left: '-10000px', top: 'auto',
                  width: 1, height: 1, overflow: 'hidden',
                }}>
                  <label>
                    Website
                    <input type="text" name="website" tabIndex={-1} autoComplete="off"
                           value={form.website} onChange={set('website')} />
                  </label>
                </div>
                <Field label="Name" required>
                  <Input value={form.name} onChange={set('name')} placeholder="Your full name" required />
                </Field>
                <Field label="Email" required>
                  <Input type="email" value={form.email} onChange={set('email')} placeholder="you@yourbusiness.com" required />
                </Field>
                <Field label="Message">
                  <Textarea rows={5} value={form.msg} onChange={set('msg')}
                    placeholder="A little about the shoot — what kind, where, and roughly when." />
                </Field>
                <label style={{
                  display: 'flex', gap: 12, alignItems: 'flex-start',
                  fontFamily: 'var(--font-body)', fontSize: 14, color: T.n600,
                  cursor: 'pointer', userSelect: 'none', marginTop: 4,
                }}>
                  <input type="checkbox" checked={form.agree} onChange={set('agree')} required
                         style={{ marginTop: 3, accentColor: T.indigo500 }} />
                  <span>I agree to be contacted by WM Photos by Tom.</span>
                </label>
                {error && (
                  <div role="alert" style={{
                    padding: '12px 16px', borderRadius: 10,
                    background: '#fdecec', color: '#9b1c1c',
                    border: '1px solid #f5c2c2',
                    fontFamily: 'var(--font-body)', fontSize: 14,
                  }}>{error}</div>
                )}
                <Button variant="accent" type="submit" icon={Icons.arrowRight}
                        disabled={submitting}
                        style={{ alignSelf: 'flex-start', marginTop: 8, opacity: submitting ? 0.7 : 1 }}>
                  {submitting ? 'Sending…' : 'Submit'}
                </Button>
              </form>
            )}
          </div>

          <div data-reveal style={{ transitionDelay: '120ms', display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{
              background: T.indigo900, color: T.white,
              padding: '40px 36px', borderRadius: 14,
            }}>
              <Eyebrow style={{ marginBottom: 18, color: 'rgba(255,255,255,0.65)' }}>The studio</Eyebrow>
              <InfoRow icon={Icons.mail} label="Email">
                <a href="mailto:wmphotosbytom@gmail.com" className="tlink">wmphotosbytom@gmail.com</a>
              </InfoRow>
              <Divider />
              <InfoRow icon={Icons.calendar} label="Phone">
                <a href="tel:+13038172203" className="tlink">+1 (303) 817-2203</a>
              </InfoRow>
              <Divider />
              <InfoRow icon={Icons.pin} label="Based in">
                Erie, Colorado<br/>Available across the Front Range
              </InfoRow>
              <Divider />
              <InfoRow icon={Icons.instagram} label="Follow">
                <a href="https://www.instagram.com/tomtaylor3198/" className="tlink" target="_blank" rel="noreferrer">@tomtaylor3198 · Instagram</a><br/>
                <a href="https://www.facebook.com/WindmillPhotosbyTomTaylor" className="tlink" target="_blank" rel="noreferrer">Windmill Photos by Tom Taylor · Facebook</a>
              </InfoRow>
            </div>

            <Frame
              src="images/06-hero-105-wells-sunrise.jpg"
              alt="105 Wells at sunrise — Erie, Colorado"
              style={{ aspectRatio: '4/3', borderRadius: 14 }}
            >
              <div style={{
                position: 'absolute', inset: 0, padding: 24,
                display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
                background: 'linear-gradient(0deg, rgba(9,17,41,0.55), transparent 60%)',
              }}>
                <Eyebrow style={{ color: 'rgba(255,255,255,0.85)' }}>Local · Erie, CO</Eyebrow>
                <div style={{
                  fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 500,
                  color: T.white, letterSpacing: '-0.01em', lineHeight: 1.1, marginTop: 6,
                }}>
                  Shot at sunrise<br/>down on Wells Street.
                </div>
              </div>
            </Frame>
          </div>
        </div>
      </div>
    </section>
  );
}

function Field({ label, required, children }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <span style={{
        fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700,
        letterSpacing: '0.22em', textTransform: 'uppercase', color: T.n600,
      }}>
        {label}{required && <span style={{ color: T.gold500, marginLeft: 6 }}>*</span>}
      </span>
      {children}
    </label>
  );
}
const inputBase = {
  fontFamily: 'var(--font-body)', fontSize: 15,
  padding: '14px 14px',
  background: T.white,
  border: `1px solid ${T.n100}`,
  borderRadius: 4,
  color: T.indigo900,
  outline: 'none',
  width: '100%',
  transition: 'border-color 200ms var(--ease-out)',
};
function Input(props) {
  return <input {...props}
    onFocus={(e) => e.target.style.borderColor = T.indigo500}
    onBlur={(e) => e.target.style.borderColor = T.n100}
    style={{ ...inputBase, ...(props.style || {}) }} />;
}
function Textarea(props) {
  return <textarea {...props}
    onFocus={(e) => e.target.style.borderColor = T.indigo500}
    onBlur={(e) => e.target.style.borderColor = T.n100}
    style={{ ...inputBase, resize: 'vertical', fontFamily: 'var(--font-body)' }} />;
}
function InfoRow({ icon, label, children }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '24px 78px 1fr',
      gap: 16, alignItems: 'flex-start', padding: '16px 0',
    }}>
      <span style={{ color: T.gold300, display: 'inline-flex', marginTop: 2 }}>{icon}</span>
      <span style={{
        fontFamily: 'var(--font-body)', fontSize: 10, fontWeight: 700,
        letterSpacing: '0.22em', textTransform: 'uppercase',
        color: 'rgba(255,255,255,0.55)', marginTop: 4,
      }}>{label}</span>
      <span style={{
        fontFamily: 'var(--font-body)', fontSize: 14,
        color: T.white, lineHeight: 1.6,
      }}>{children}</span>
    </div>
  );
}
function Divider() {
  return <hr style={{ border: 'none', borderTop: '1px solid rgba(255,255,255,0.12)', margin: 0 }} />;
}

// ---- LIGHTBOX ------------------------------------------------------------
// Global helper: anywhere in the app can call
//   window.openLightbox(images, startIndex)
// where `images` is an array of { src, cap? }.
window.openLightbox = (images, start = 0) => {
  window.dispatchEvent(new CustomEvent('lightbox:open', { detail: { images, start } }));
};

function Lightbox() {
  const [state, setState] = React.useState({ open: false, images: [], index: 0 });

  React.useEffect(() => {
    const onOpen = (e) => setState({ open: true, images: e.detail.images || [], index: e.detail.start || 0 });
    window.addEventListener('lightbox:open', onOpen);
    return () => window.removeEventListener('lightbox:open', onOpen);
  }, []);

  const close = React.useCallback(() => setState((s) => ({ ...s, open: false })), []);
  const prev  = React.useCallback(() => setState((s) => ({ ...s, index: (s.index - 1 + s.images.length) % s.images.length })), []);
  const next  = React.useCallback(() => setState((s) => ({ ...s, index: (s.index + 1) % s.images.length })), []);

  React.useEffect(() => {
    if (!state.open) return;
    const onKey = (e) => {
      if (e.key === 'Escape') close();
      else if (e.key === 'ArrowLeft') prev();
      else if (e.key === 'ArrowRight') next();
    };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [state.open, close, prev, next]);

  if (!state.open || !state.images.length) return null;
  const img = state.images[state.index];

  return (
    <div
      onClick={close}
      style={{
        position: 'fixed', inset: 0, zIndex: 100,
        background: 'rgba(9, 17, 41, 0.94)',
        backdropFilter: 'blur(8px)',
        WebkitBackdropFilter: 'blur(8px)',
        display: 'flex', flexDirection: 'column',
        animation: 'reveal 240ms var(--ease-out) both',
      }}
      role="dialog" aria-modal="true" aria-label="Photo viewer"
    >
      {/* Top bar: counter + close */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '20px 28px', color: T.white, flexShrink: 0,
      }}>
        <span style={{
          fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 700,
          letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.7)',
        }}>
          {String(state.index + 1).padStart(2, '0')} / {String(state.images.length).padStart(2, '0')}
        </span>
        <LBButton onClick={(e) => { e.stopPropagation(); close(); }} label="Close (Esc)">
          {Icons.close}
        </LBButton>
      </div>

      {/* Image stage */}
      <div style={{
        flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: '0 80px', minHeight: 0, position: 'relative',
      }}>
        <img
          key={img.src}
          src={img.src}
          alt={img.cap || ''}
          onClick={(e) => e.stopPropagation()}
          style={{
            maxWidth: '100%', maxHeight: '100%', objectFit: 'contain',
            borderRadius: 6, boxShadow: '0 40px 100px rgba(0,0,0,0.5)',
            animation: 'reveal 320ms var(--ease-out) both',
          }}
        />

        {/* Prev (desktop) */}
        <div className="hide-sm" style={{ position: 'absolute', left: 20, top: '50%', transform: 'translateY(-50%)' }}>
          <LBButton onClick={(e) => { e.stopPropagation(); prev(); }} label="Previous">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
          </LBButton>
        </div>
        {/* Next (desktop) */}
        <div className="hide-sm" style={{ position: 'absolute', right: 20, top: '50%', transform: 'translateY(-50%)' }}>
          <LBButton onClick={(e) => { e.stopPropagation(); next(); }} label="Next">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="m9 6 6 6-6 6"/></svg>
          </LBButton>
        </div>
      </div>

      {/* Bottom bar: mobile arrows only */}
      <div onClick={(e) => e.stopPropagation()} style={{ padding: '18px 28px 24px', flexShrink: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8 }}>
          <LBButton onClick={(e) => { e.stopPropagation(); prev(); }} label="Previous">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
          </LBButton>
          <LBButton onClick={(e) => { e.stopPropagation(); next(); }} label="Next">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="m9 6 6 6-6 6"/></svg>
          </LBButton>
        </div>
      </div>
    </div>
  );
}

function LBButton({ children, onClick, label }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      type="button"
      aria-label={label}
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        width: 44, height: 44,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        background: hover ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.08)',
        border: '1px solid rgba(255,255,255,0.2)',
        borderRadius: 999,
        color: T.white,
        cursor: 'pointer',
        transition: 'background 200ms var(--ease-out)',
      }}
    >
      {children}
    </button>
  );
}

Object.assign(window, {
  Hero, GalleryStrip, Services, Portfolio, Pricing, About, Contact, Lightbox,
});