// pages/HomePage.jsx
const HERO_IMG = 'assets/about-portrait.png';

function HomePage({ setPage }) {
  const mob = useIsMobile();
  const sp = mob ? '48px 24px' : '56px 64px 100px';
  const imgRef = React.useRef(null);

  React.useEffect(() => {
    if (mob) return;
    if (imgRef.current) imgRef.current.style.transform = 'translate(0,0) scale(1.05)';
    const onMove = (e) => {
      if (!imgRef.current) return;
      const dx = (e.clientX / window.innerWidth  - 0.5) * -22;
      const dy = (e.clientY / window.innerHeight - 0.5) * -14;
      imgRef.current.style.transform = `translate(${dx}px, ${dy}px) scale(1.05)`;
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, [mob]);

  return (
    <React.Fragment>
      {/* HERO */}
      <section className="section hero-section" style={{ padding: sp, borderBottom: '1px solid var(--border)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1.15fr 1fr', gap: mob ? 32 : 56, alignItems: 'stretch' }}>
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', gap: mob ? 28 : 48, minHeight: mob ? 'auto' : 620 }}>
            <Reveal style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
              <MonogramMark size={56} />
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--alp-jade)' }}>ALP Digital</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--fg3)', marginTop: 4 }}>Websites · Photography · Care</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--fg3)', marginTop: 4 }}>Hendy, South Wales · Est. 2026</div>
              </div>
            </Reveal>
            <div>
              <Reveal as="h1" className="sec-heading" delay={80} style={{ fontSize: mob ? 'clamp(44px, 12vw, 64px)' : 'clamp(56px, 7.5vw, 96px)', lineHeight: 1.05, paddingBottom: 12, margin: 0 }}>
                Websites for<br/><span style={{ color: 'transparent', WebkitTextStroke: '2px var(--fg1)' }}>local</span> business.
              </Reveal>
              <Reveal delay={160} className="sec-lede" style={{ marginTop: 24 }}>
                <strong>One person. Clear pricing. Real photography.</strong> I design, build, and photograph the sites I put my name to — made specifically for your business, not a template that could belong to anyone.
              </Reveal>
              <Reveal delay={240} style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <button className="btn btn-primary" onClick={() => setPage('contact')}>Start a project</button>
                <button className="btn btn-ghost" onClick={() => setPage('services')}>See what I do →</button>
              </Reveal>
            </div>
          </div>
          {!mob && (
            <Reveal delay={120} className="img-slot" style={{ borderRadius: 0, minHeight: 620 }}>
              <img ref={imgRef} src={HERO_IMG} alt="South Wales coastline at sunset — photograph by Andrew L Price"
                style={{ transition: 'transform 700ms cubic-bezier(0.25,0.46,0.45,0.94)', willChange: 'transform' }} />
              <div className="img-label">IMG · HERO-01 — Andrew L Price</div>
            </Reveal>
          )}
        </div>
        {mob && (
          <Reveal delay={120} className="img-slot" style={{ borderRadius: 0, height: 260, marginTop: 32 }}>
            <img src={HERO_IMG} alt="South Wales coastline at sunset — photograph by Andrew L Price" />
            <div className="img-label">IMG · HERO-01 — Andrew L Price</div>
          </Reveal>
        )}
      </section>

      {/* SERVICES TEASER */}
      <section className="section">
        <Reveal className="sec-eyebrow">01 — Services</Reveal>
        <Reveal as="h2" className="sec-heading" delay={80}>Three things,<br/>done properly.</Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : 'repeat(3, 1fr)', gap: mob ? 12 : 18, marginTop: 36 }}>
          {[
            { n: '01', t: 'Websites', d: 'Custom-built, not templated. From a one-pager to a full club site with fixtures, galleries, and members.' },
            { n: '02', t: 'Photography', d: 'Your team, your venue, your products — shot properly. Something that couldn\'t belong to anyone else.' },
            { n: '03', t: 'Ongoing care', d: 'Updates, tweaks, match reports, new galleries. Sensible monthly rate. No tickets — just me.' },
          ].map((s, i) => (
            <Reveal key={s.n} delay={i * 750} className="card hover">
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.15em', color: 'var(--alp-jade)', marginBottom: 14 }}>{s.n}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, textTransform: 'uppercase', letterSpacing: '0.01em', margin: 0, color: 'var(--fg1)' }}>{s.t}</h3>
              <p style={{ fontSize: 14, color: 'var(--fg2)', lineHeight: 1.7, marginTop: 12, marginBottom: 0 }}>{s.d}</p>
            </Reveal>
          ))}
        </div>
        <Reveal delay={400} style={{ marginTop: 32 }}>
          <button className="btn btn-ghost" onClick={() => setPage('services')}>All services & process →</button>
        </Reveal>
      </section>

      {/* APPROACH */}
      <section className="section well" style={{ padding: mob ? '56px 24px' : '100px 64px' }}>
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'radial-gradient(circle at 50% 50%, rgba(28,201,154,0.05) 0%, transparent 60%)' }} />
        <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1.4fr', gap: mob ? 32 : 64, alignItems: 'start' }}>
          <Reveal>
            <div className="sec-eyebrow">02 — How I work</div>
            <h2 className="sec-heading" style={{ marginTop: 12 }}>No agency<br/>middle layer.</h2>
          </Reveal>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
            <Reveal delay={80} as="p" className="sec-lede" style={{ margin: 0 }}>
              <strong>Direct, local, dependable.</strong> You talk to the person doing the work. No account managers, no offshore build team, no ticket system. One phone number, one email, one invoice.
            </Reveal>
            <Reveal delay={160} style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : 'repeat(3, 1fr)', gap: mob ? 16 : 24, marginTop: 8 }}>
              {[
                { n: '01', t: 'Custom-designed', d: 'Every site is shaped around your business — not dragged out of a template library. Real code, deployed properly, yours to keep.' },
                { n: '02', t: 'Photography on tap', d: 'I shoot the photos too. Your team, your venue, your products — not stock imagery.' },
                { n: '03', t: 'Kept alive', d: 'Sites need looking after. Updates, fixtures, new galleries, tweaks — a sensible monthly rate, not a ticket queue.' },
              ].map(p => (
                <div key={p.n}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.15em', color: 'var(--alp-jade)', marginBottom: 10 }}>{p.n}</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--fg1)' }}>{p.t}</div>
                  <p style={{ fontSize: 13, color: 'var(--fg2)', lineHeight: 1.65, marginTop: 8, marginBottom: 0 }}>{p.d}</p>
                </div>
              ))}
            </Reveal>
          </div>
        </div>
      </section>

      {/* CTA BAND */}
      <section className="section" style={{ padding: mob ? '48px 24px' : '80px 64px', background: 'var(--bg-well)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1.2fr 1fr', gap: mob ? 24 : 40, alignItems: 'center' }}>
          <Reveal>
            <h2 className="sec-heading">Working on something?<br/>Let's talk.</h2>
            <p className="sec-lede" style={{ marginTop: 20 }}>Direct email, phone, or the form. I reply to everything within a working day.</p>
          </Reveal>
          <Reveal delay={120} style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: mob ? 'flex-start' : 'flex-end' }}>
            <button className="btn btn-primary" onClick={() => setPage('contact')}>Get in touch →</button>
            <button className="btn btn-ghost" onClick={() => setPage('pricing')}>See pricing</button>
          </Reveal>
        </div>
      </section>
    </React.Fragment>
  );
}

window.HomePage = HomePage;