// pages/PricingPage.jsx + AboutPage.jsx + ContactPage.jsx
function PricingPage({ setPage }) {
  const mob = useIsMobile();
  const plans = [
    { n: '01', t: 'One Pager', price: '£450', d: 'A single well-designed page. Great for trades, small services, personal sites.', includes: ['Bespoke design', 'Mobile responsive', 'Contact form', 'Basic SEO', 'Hosting & domain setup (first year)'] },
    { n: '02', t: 'Standard Site', price: 'From £950', d: 'Five-to-eight page site for small businesses, clubs, and independent practices.', photoCallout: 'Includes a professional half-day photo session — no extra cost.', paymentNote: 'Split into two payments — 50% on agreement, 50% on launch.', includes: ['Everything in One Pager', 'Up to 8 pages', 'Gallery / portfolio', 'Monthly traffic report'], featured: true },
    { n: '03', t: 'Full Build', price: 'From £1,800', d: 'Larger club or business sites with fixtures, members area, bookings, or a catalogue.', paymentNote: 'Split into two payments — 50% on agreement, 50% on launch.', includes: ['Everything in Standard', 'Unlimited pages', 'Full-day photo session', 'Custom features', '3 months Standard care included'] },
  ];
  return (
    <React.Fragment>
      <section className="section" style={{ paddingTop: mob ? 64 : 100, overflow: 'hidden' }}>
        {!mob && (
          <div style={{ position: 'absolute', top: -60, right: -60, pointerEvents: 'none' }}>
            <WireShape shape="icosahedron" size={640} speedY={0.28} speedX={0.10} strokeWidth={0.8} opacity={0.13} initY={1.2} initX={0.5}/>
          </div>
        )}
        <Reveal className="sec-eyebrow">Pricing</Reveal>
        <Reveal as="h1" className="sec-heading" delay={80} style={{ fontSize: mob ? 'clamp(44px, 12vw, 64px)' : 'clamp(56px, 8vw, 96px)' }}>Clear prices,<br/>written down.</Reveal>
        <Reveal delay={160} className="sec-lede" style={{ marginTop: 28 }}>
          Starting prices — every project is quoted in writing before work starts. <strong>No hourly rates, no surprise invoices.</strong> If what you need costs more or less than the band, I'll say so.
        </Reveal>
      </section>
      <section className="section">
        <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : 'repeat(3, 1fr)', gap: mob ? 16 : 20 }}>
          {plans.map((p, i) => (
            <Reveal key={p.n} delay={i * 100} className="card scale" style={{ padding: 32, position: 'relative', borderColor: p.featured ? 'var(--border-jade)' : undefined, background: p.featured ? 'var(--bg-raised)' : undefined }}>
              {p.featured && <div style={{ position: 'absolute', top: -10, left: 24, fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--alp-midnight)', background: 'var(--alp-jade)', padding: '4px 10px', borderRadius: 2 }}>Most common</div>}
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.15em', color: 'var(--alp-jade)', marginBottom: 12 }}>{p.n}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 32, textTransform: 'uppercase', margin: 0, color: 'var(--fg1)', lineHeight: 1 }}>{p.t}</h3>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 22, color: 'var(--alp-jade)', marginTop: 12, letterSpacing: '0.02em' }}>{p.price}</div>
              {p.photoCallout && (
                <div style={{ marginTop: 10, padding: '10px 14px', background: 'rgba(28,201,154,0.08)', border: '1px solid var(--border-jade)', borderRadius: 6, fontSize: 13, color: 'var(--alp-jade)', lineHeight: 1.55 }}>
                  ✦ {p.photoCallout}
                </div>
              )}
              <p style={{ fontSize: 14, color: 'var(--fg2)', lineHeight: 1.7, marginTop: 16 }}>{p.d}</p>
              <hr style={{ margin: '20px 0', borderTop: '1px solid var(--border)', border: 0 }} />
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {p.includes.map(x => (
                  <li key={x} style={{ display: 'flex', gap: 10, fontSize: 14, color: 'var(--fg1)' }}>
                    <span style={{ color: 'var(--alp-jade)' }}>✓</span>{x}
                  </li>
                ))}
              </ul>
              <button className={`btn ${p.featured ? 'btn-primary' : 'btn-ghost'}`} style={{ marginTop: 24, width: '100%', justifyContent: 'center' }} onClick={() => setPage('contact')}>Get a quote →</button>
              {p.paymentNote && (
                <p style={{ marginTop: 12, marginBottom: 0, fontSize: 12, color: 'var(--fg3)', textAlign: 'center', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em', lineHeight: 1.5 }}>{p.paymentNote}</p>
              )}
            </Reveal>
          ))}
        </div>
        <Reveal delay={300} style={{ marginTop: 28, padding: '22px 28px', border: '1px solid var(--border)', background: 'var(--bg-surface)', display: 'flex', flexDirection: mob ? 'column' : 'row', gap: 16, alignItems: 'start' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--alp-jade)', paddingTop: 2, whiteSpace: 'nowrap' }}>Hosting &amp; ownership</div>
          <div style={{ fontSize: 14, lineHeight: 1.75, color: 'var(--fg2)' }}>
            Hosting is on your own account, in your name — I manage the technical side, you own the keys. If we ever part ways, you keep the site, the domain, and everything on it. <strong style={{ color: 'var(--fg1)' }}>No lock-in, no year-two surprise invoice.</strong>
          </div>
        </Reveal>
      </section>
      <section className="section well">
        <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1fr', gap: mob ? 32 : 72, alignItems: 'start' }}>
          <div>
            <Reveal className="sec-eyebrow">Sports Clubs</Reveal>
            <Reveal as="h2" className="sec-heading" delay={80} style={{ fontSize: mob ? 'clamp(32px, 8vw, 48px)' : 'clamp(36px, 4vw, 52px)' }}>Running a<br/>sports club?</Reveal>
            <Reveal delay={160} className="sec-lede" style={{ marginTop: 20 }}>
              The Standard Site is built for clubs. Fixtures, galleries, committee info, membership enquiries — all in one place, looked after properly. Less admin for your committee. A better face for your club.
            </Reveal>
            <Reveal delay={240} style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={() => setPage('contact')}>Talk about your club →</button>
              <button className="btn btn-ghost" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>See Standard pricing ↑</button>
            </Reveal>
          </div>
          <Reveal delay={120}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--fg3)', marginBottom: 20, paddingBottom: 12, borderBottom: '1px solid var(--border)' }}>Often paired with Sports Club Care, which includes:</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 20 }}>
              {[
                { t: 'Fixtures & results updates', d: 'In-season schedule and results kept current — updated in the same week.' },
                { t: 'Match-day photo uploads', d: 'Send the gallery shots over; I\'ll have them live before your members check on Monday.' },
                { t: 'Seasonal photo refresh', d: 'New season, new look — squad shots and venue photography refreshed each year.' },
                { t: 'Committee page updates', d: 'Roles change. Faces change. Kept accurate without you raising a ticket.' },
              ].map(f => (
                <li key={f.t} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                  <span style={{ color: 'var(--alp-jade)', fontFamily: 'var(--font-mono)', fontSize: 13, marginTop: 2, flexShrink: 0 }}>✓</span>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg1)', marginBottom: 4 }}>{f.t}</div>
                    <div style={{ fontSize: 13, color: 'var(--fg2)', lineHeight: 1.6 }}>{f.d}</div>
                  </div>
                </li>
              ))}
            </ul>
            <div style={{ marginTop: 28, padding: '14px 18px', border: '1px solid var(--border-jade)', background: 'rgba(28,201,154,0.05)', borderRadius: 6, fontSize: 13, color: 'var(--fg2)', lineHeight: 1.65 }}>
              Same Standard Site pricing — <strong style={{ color: 'var(--fg1)' }}>from £950.</strong> No club surcharge. No separate quote needed.
            </div>
          </Reveal>
        </div>
      </section>
      <section className="section well">
        <Reveal className="sec-eyebrow">Care plans</Reveal>
        <Reveal as="h2" className="sec-heading" delay={80}>Keep it running.</Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : 'repeat(4, 1fr)', gap: mob ? 12 : 18, marginTop: 40 }}>
          {[
            { t: 'Basic',            p: '£25/mo',  ps: '£250/yr',   d: 'Hosting, backups, plugin updates. A safe pair of hands on the lights.' },
            { t: 'Standard',         p: '£50/mo',  ps: '£400/yr',   d: 'Everything in Basic, plus one hour of changes per month and priority reply.' },
            { t: 'Sports Club Care', p: '£75/mo',  ps: '£750/yr',   d: 'Built for clubs — keeps your site current through the season.', includes: ['Everything in Standard Care', 'Fixtures & results updates (in-season)', 'Match-day photo uploads to gallery', 'Seasonal photo refresh each season', 'Committee page updates as needed', 'Two hours of changes per month'] },
            { t: 'Active',           p: '£100/mo', ps: '£1,000/yr', d: 'Three hours of content updates per month — new pages, galleries, copy changes — plus a seasonal photo refresh.' },
          ].map((c, i) => (
            <Reveal key={c.t} delay={i * 80} className="card">
              <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, textTransform: 'uppercase', margin: 0 }}>{c.t}</h4>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginTop: 8 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, color: 'var(--alp-jade)' }}>{c.p}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg3)' }}>or {c.ps}</div>
              </div>
              <p style={{ fontSize: 14, color: 'var(--fg2)', lineHeight: 1.65, marginTop: 12 }}>{c.d}</p>
              {c.includes && (
                <React.Fragment>
                  <hr style={{ margin: '16px 0 14px', border: 0, borderTop: '1px solid var(--border)' }} />
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {c.includes.map(x => (
                      <li key={x} style={{ display: 'flex', gap: 10, fontSize: 13, color: 'var(--fg1)' }}>
                        <span style={{ color: 'var(--alp-jade)', flexShrink: 0 }}>✓</span>{x}
                      </li>
                    ))}
                  </ul>
                </React.Fragment>
              )}
            </Reveal>
          ))}
        </div>
      </section>
      <CTABand setPage={setPage} />
    </React.Fragment>
  );
}

function AboutPage({ setPage }) {
  const mob = useIsMobile();
  return (
    <React.Fragment>
      <section className="section" style={{ paddingTop: mob ? 64 : 100 }}>
        <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1.2fr 1fr', gap: mob ? 32 : 56, alignItems: 'center' }}>
          <div>
            <Reveal className="sec-eyebrow">About</Reveal>
            <Reveal as="h1" className="sec-heading" delay={80} style={{ fontSize: mob ? 'clamp(44px, 12vw, 64px)' : 'clamp(52px, 7vw, 88px)' }}>One person.<br/>One phone number.</Reveal>
            <Reveal delay={160} className="sec-lede" style={{ marginTop: 28 }}>
              <strong>I'm Andrew Price.</strong> I'm a professional photographer and digital creative based in Hendy. I shoot weddings and events across South Wales through Andrew L Price Photography, and I build websites for local businesses and sports clubs through ALP Digital.
            </Reveal>
            <Reveal delay={240} className="sec-lede" style={{ marginTop: 20 }}>
              That background matters. Most web designers hand you a site full of stock images and wish you luck. I can design the site, write the copy, and photograph your business or your team — so you get something genuinely yours rather than a template that could belong to anyone.
            </Reveal>
            <Reveal delay={320} className="sec-lede" style={{ marginTop: 20 }}>
              I'm not a faceless agency. I'm already in your area, I know the local business landscape, and I'm building something here for the long term.
            </Reveal>
          </div>
          <Reveal delay={120} className="img-slot" style={{ aspectRatio: '4 / 5', order: mob ? -1 : 0 }}>
            <img src="assets/hero-coast-sunset.jpg" alt="South Wales coastline at sunset" style={{ objectPosition: 'center center' }} />
            <div className="img-label">IMG · ABOUT-01 — Andrew L Price</div>
          </Reveal>
        </div>
      </section>
      <section className="section">
        <Reveal className="sec-eyebrow">Values</Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr 1fr' : 'repeat(4, 1fr)', gap: mob ? 12 : 16, marginTop: 32 }}>
          {[
            { w: 'Direct', d: 'One person. Clear pricing. No account managers.' },
            { w: 'Local', d: 'Based in Hendy. Shooting in the Gower. Already here.' },
            { w: 'Creative', d: 'Considered response, never a template pulled from a library.' },
            { w: 'Dependable', d: 'Deadlines are real. Calls get answered. Things get fixed.' },
          ].map((v, i) => (
            <Reveal key={v.w} delay={i * 80} className="card">
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, textTransform: 'uppercase', letterSpacing: '0.02em', color: 'var(--alp-jade)', marginBottom: 10 }}>{v.w}</div>
              <div style={{ fontSize: 13, color: 'var(--fg2)', lineHeight: 1.6 }}>{v.d}</div>
            </Reveal>
          ))}
        </div>
      </section>
      <section className="section well">
        <Reveal className="sec-eyebrow">Part of ALP Media</Reveal>
        <Reveal as="h2" className="sec-heading" delay={80} style={{ fontSize: 'clamp(36px, 4vw, 48px)' }}>One owner,<br/>three specialist brands.</Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : 'repeat(3, 1fr)', gap: mob ? 12 : 16, marginTop: 40 }}>
          {[
            { n: '01 / Photography', t: 'Andrew L Price Photography', d: 'Weddings and events across South Wales. Documentary-led.', c: 'var(--alp-amber)' },
            { n: '02 / Digital', t: 'ALP Digital', d: 'Websites for local businesses, clubs, and trades.', c: 'var(--alp-jade)' },
            { n: '03 / Marketplace', t: 'Own Your Wedding', d: 'Commission-only wedding supplier marketplace.', c: 'var(--alp-blush)' },
          ].map((b) => (
            <Reveal key={b.t} className="card" style={{ position: 'relative', paddingTop: 30 }}>
              <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: b.c }} />
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.15em', color: 'var(--fg3)', marginBottom: 12 }}>{b.n}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, textTransform: 'uppercase', color: b.c }}>{b.t}</div>
              <div style={{ fontSize: 13, color: 'var(--fg2)', lineHeight: 1.6, marginTop: 10 }}>{b.d}</div>
            </Reveal>
          ))}
        </div>
      </section>
      <CTABand setPage={setPage} />
    </React.Fragment>
  );
}

function ContactPage() {
  const mob = useIsMobile();
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', business: '', email: '', phone: '', service: 'Website build', deadline: '', message: '' });
  const upd = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const submit = async e => {
    e.preventDefault();
    setSending(true);
    await fetch('https://formspree.io/f/meevdalj', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify(form),
    });
    setSending(false);
    setSent(true);
  };
  return (
    <section className="section" style={{ paddingTop: mob ? 48 : 80, paddingBottom: mob ? 64 : 100, borderBottom: 0 }}>
      <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1.1fr', gap: mob ? 40 : 80, alignItems: 'start' }}>
        <div>
          <Reveal className="sec-eyebrow">Contact</Reveal>
          <Reveal as="h1" className="sec-heading" delay={80} style={{ fontSize: mob ? 'clamp(44px, 12vw, 64px)' : 'clamp(52px, 7vw, 88px)' }}>Tell me about<br/>your project.</Reveal>
          <Reveal delay={160} className="sec-lede" style={{ marginTop: 28 }}>
            <strong>I reply to everything within a working day.</strong> If what you need isn't a fit, I'll say so and point you at someone who does it better.
          </Reveal>
          <Reveal delay={240} style={{ marginTop: 40, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              ['Email', 'andrew@alpdigital.co.uk'],
              ['Mobile', '07786 604 347'],
              ['Based', 'Hendy, South Wales'],
              ['Hours', 'Mon–Fri · 9:00–17:30'],
            ].map(([k, v]) => (
              <div key={k} style={{ display: 'flex', gap: 20, paddingBottom: 12, borderBottom: '1px solid var(--border)' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--fg3)', width: 80, flexShrink: 0 }}>{k}</div>
                <div style={{ fontSize: 15, color: 'var(--fg1)' }}>{v}</div>
              </div>
            ))}
          </Reveal>
        </div>
        <Reveal delay={mob ? 0 : 120}>
          <form className="card" style={{ padding: mob ? 24 : 32, display: 'flex', flexDirection: 'column', gap: 18 }} onSubmit={submit}>
            {sent ? (
              <div style={{ padding: '40px 10px', textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--alp-jade)', marginBottom: 14 }}>Message sent</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 26, textTransform: 'uppercase', color: 'var(--fg1)', lineHeight: 1.2 }}>Thanks — I'll reply within a working day.</div>
              </div>
            ) : <React.Fragment>
              {[
                { k: 'name', l: 'Your name', p: 'Andrew Price' },
                { k: 'business', l: 'Business · optional', p: 'Coed-y-Parc RFC' },
                { k: 'email', l: 'Email', p: 'you@example.co.uk', type: 'email' },
                { k: 'phone', l: 'Phone · optional', p: '07…', type: 'tel' },
              ].map(f => (
                <div key={f.k} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  <label style={fieldLbl}>{f.l}</label>
                  <input type={f.type || 'text'} value={form[f.k]} onChange={upd(f.k)} placeholder={f.p} style={fieldInp} />
                </div>
              ))}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  <label style={fieldLbl}>Service</label>
                  <select value={form.service} onChange={upd('service')} style={fieldInp}>
                    <option>Website build</option><option>Photography</option><option>Care plan</option><option>Not sure yet</option>
                  </select>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  <label style={fieldLbl}>Deadline · optional</label>
                  <input type="date" value={form.deadline} onChange={upd('deadline')} style={fieldInp} />
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <label style={fieldLbl}>Tell me about it</label>
                <textarea value={form.message} onChange={upd('message')} rows={5} placeholder="A sentence or two about what you need." style={{ ...fieldInp, resize: 'vertical', minHeight: 110 }} />
              </div>
              <button type="submit" className="btn btn-primary" style={{ marginTop: 6 }}>Send message →</button>
            </React.Fragment>}
          </form>
        </Reveal>
      </div>
    </section>
  );
}

const fieldLbl = { fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--fg2)' };
const fieldInp = { background: 'var(--bg)', border: '1px solid var(--border-strong)', color: 'var(--fg1)', fontFamily: 'var(--font-body)', fontSize: 15, padding: '12px 14px', borderRadius: 6, outline: 0, width: '100%', boxSizing: 'border-box' };

window.PricingPage = PricingPage;
window.AboutPage = AboutPage;
window.ContactPage = ContactPage;