/* global React, useReveal, PH, CTABanner */
const { useState: useStateP, useEffect: useEffectP } = React;

/* ═════════════════════════════════════════════════════════
   HOME
   ═════════════════════════════════════════════════════════ */
function HomePage({ go }) {
  const ref = useReveal();
  return (
    <div className="page page-enter" id="page-home" data-screen-label="01 Home" ref={ref}>

      <section className="home-hero">
        <div className="home-hero-content">
          <p className="eyebrow reveal" data-spec="eyebrow · 10/0.28em uppercase · warm-grey">
            Specialist Speech Therapy for your Voice · North London &amp; Online
          </p>
          <h1 className="reveal reveal-d1" data-spec="h1 · Cormorant 300 · clamp(44,7vw,88) · 1.05">
            Find Your<br /><em>Voice</em><br />Again
          </h1>
          <p className="hero-sub reveal reveal-d2" data-spec="body · Jost 300 · 15/1.85 · max-w 400">
            Private Speech and Language Therapy for adults experiencing Voice difficulties — or simply wanting to speak with greater confidence.
          </p>
          <div className="hero-actions reveal reveal-d3">
            <button className="btn-primary" onClick={() => go('contact')} data-spec="btn-primary · charcoal · 14/34 · letter-spacing 0.2em">
              Book a Consultation
            </button>
            <button className="btn-ghost" onClick={() => go('services')} data-spec="btn-ghost · arrow icon · hover gap shift">
              View Services
            </button>
          </div>
          <div className="hero-footer-note reveal reveal-d4">
            <span>Qualified SALT · 2010</span>
          </div>
        </div>
        <div className="home-hero-image" data-spec="image-slot · hero · 16:9-ish · client-supplied portrait">
          <img src={(typeof window !== 'undefined' && window.__resources && window.__resources.heroImg) || 'assets/hero.png'} alt="Calm interior with dried pampas grass on a wooden table, a soft armchair with a sage throw, and morning light through the window" />
        </div>
      </section>

      <section>
        <div className="home-intro">
          <div className="home-intro-grid">
            <div className="reveal">
              <p className="eyebrow">About Pippa</p>
              <div className="divider" />
              <p className="intro-quote" data-spec="pull-quote · serif italic · clamp(20,2.2vw,30)">
                "Your voice is one of your most valuable assets — and with the right Speech Therapy support, it can be restored."
              </p>
            </div>
            <div className="divider-col" />
            <div className="intro-text reveal reveal-d1">
              <p>I qualified as a Speech and Language Therapist in 2010 and have extensive clinical experience supporting adults with a wide range of communication difficulties, with a specialist interest in Voice Disorders.</p>
              <p>Working closely alongside ENT and surgical teams, I provide private Speech Therapy tailored entirely to your needs, goals and lifestyle — in North London and online.</p>
              <button className="btn-ghost" onClick={() => go('about')} style={{ marginTop: 32 }}>More About Me</button>
            </div>
          </div>
        </div>
      </section>

      <section className="home-cards-wrap">
        <div className="home-cards-head reveal">
          <p className="eyebrow">How I Can Help</p>
          <div className="divider" />
          <h2>Voice Therapy &amp; Communication Support</h2>
        </div>
        <div className="cards-grid">
          {[
            { num: '01', title: 'Voice Difficulties', body: 'Specialist Speech and Language Therapy for hoarseness, vocal fatigue, voice loss, persistent throat tension, and recovery following surgery.' },
            { num: '02', title: 'Functional Voice Disorders', body: 'Compassionate support for functional voice disorders, muscle tension dysphonia, and post-ENT assessment.' },
            { num: '03', title: 'Confidence & Communication', body: 'Targeted Speech Therapy for wedding speeches, professional presentations, interviews and public speaking events.' },
          ].map((c, i) => (
            <div key={c.num} className={'card reveal reveal-d' + (i + 1)} onClick={() => go('services')} data-spec="card · clickable · num + serif h3 + body + arrow cta">
              <div className="card-num">{c.num}</div>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
              <span className="card-cta">Learn More →</span>
            </div>
          ))}
        </div>
      </section>

      <section className="why-section">
        <div className="why-inner">
          <div className="reveal">
            <p className="eyebrow">Why Private Therapy?</p>
            <div className="divider" />
            <p className="why-quote" data-spec="quote · serif italic · left-bordered · sage rule">
              "Voice difficulties are often complex and deeply personal. Specialist Speech and Language Therapy provides the time and expertise needed for meaningful, lasting improvement."
            </p>
          </div>
          <div className="reveal reveal-d1">
            <ul className="why-list">
              {[
                'Dedicated personal support',
                'Longer appointment times',
                'Individually tailored therapy plans',
                'Genuine continuity of care',
                'Flexible daytime and evening availability',
              ].map((t) => <li key={t}>{t}</li>)}
            </ul>
          </div>
        </div>
      </section>

      <CTABanner title="Ready to invest in your voice?" button="Book a Consultation" go={go} />
    </div>
  );
}

/* ═════════════════════════════════════════════════════════
   ABOUT
   ═════════════════════════════════════════════════════════ */
function AboutPage({ go }) {
  const ref = useReveal();
  return (
    <div className="page page-enter" id="page-about" data-screen-label="02 About" ref={ref}>
      <div className="about-hero">
        <p className="eyebrow reveal">Speech &amp; Language Therapist</p>
        <div className="divider reveal" />
        <h1 className="reveal reveal-d1">About<br />Me</h1>
        <p className="reveal reveal-d2">
          Specialist Speech and Language Therapy for your voice that is grounded in clinical expertise and delivered with warmth and patience.
        </p>
      </div>

      <div className="about-body">
        <div className="about-two-col">
          <div className="reveal">
            <p className="eyebrow">My Story</p>
            <div className="divider" />
          </div>
          <div className="about-bio reveal reveal-d1">
            <p>I qualified as a Speech and Language Therapist in 2010 and have built extensive clinical experience supporting adults with a wide range of voice and communication difficulties. Throughout my career I have worked closely alongside ENT and surgical teams, developing a thorough understanding of the medical context behind voice difficulties and how to provide the most effective therapy.</p>
            <p>I established my private practice to offer something different — longer appointments, genuine continuity of care, and a calm, unhurried space where clients feel truly listened to and understood.</p>
            <p>My approach is clinically rigorous but always warm and collaborative. Whether you are recovering from a complex voice disorder or preparing for a once-in-a-lifetime speech, I will tailor my support entirely around you, your goals and your life.</p>
            <button className="btn-ghost" onClick={() => go('contact')} style={{ marginTop: 36 }}>Get In Touch</button>
          </div>
        </div>

        <div className="creds-grid">
          {[
            ['Qualified', '2010'],
            ['Specialisation', 'Adult Voice Disorders'],
            ['Registration', 'HCPC Registered'],
            ['Membership', 'RCSLT Member'],
            ['Works Alongside', 'ENT & Surgical Teams'],
            ['Available', 'N. London & Online'],
          ].map(([l, v]) => (
            <div key={l} className="cred-item reveal" data-spec="credential cell · label + serif value">
              <div className="cred-label">{l}</div>
              <div className="cred-value">{v}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="about-quote-band">
        <div className="about-quote-inner reveal">
          <p className="eyebrow" style={{ marginBottom: 20 }}>My Approach</p>
          <p>"I combine specialist voice therapy techniques with a calm, supportive environment where you can speak for yourself."</p>
        </div>
      </div>

      <CTABanner title="Find out if therapy could help" button="Get In Touch" go={go} />
    </div>
  );
}

/* ═════════════════════════════════════════════════════════
   SERVICES
   ═════════════════════════════════════════════════════════ */
function ServicesPage({ go }) {
  const ref = useReveal();
  return (
    <div className="page page-enter" id="page-services" data-screen-label="03 Services" ref={ref}>
      <div style={{ maxWidth: 'var(--max-w)', margin: '0 auto' }}>
        <div className="svc-hero">
          <p className="eyebrow reveal">What I Offer</p>
          <div className="divider reveal" />
          <h1 className="reveal reveal-d1">Specialist Voice<br />Therapy for Adults</h1>
          <p className="reveal reveal-d2">Private, one-to-one Speech and Language Therapy tailored to your needs, goals and lifestyle — in North London and online.</p>
        </div>
      </div>

      <div className="svc-cols">
        <div className="svc-block reveal">
          <p className="eyebrow">Primary Service</p>
          <div className="divider" />
          <h2>Voice Therapy</h2>
          <p style={{ marginTop: 16, fontSize: 14, color: 'var(--charcoal-mid)' }}>
            Specialist therapy for adults experiencing a wide range of voice difficulties.
          </p>
          <ul className="svc-list">
            {['Voice loss or reduced vocal strength', 'Hoarseness and vocal strain', 'Vocal fatigue', 'Throat tension or discomfort', 'Functional voice disorders', 'Anxiety surrounding public speaking', 'Recovery following surgery', 'Support after ENT assessment', 'Chronic cough', 'Persistent throat clearing'].map((t) => <li key={t}>{t}</li>)}
          </ul>
        </div>
        <div className="svc-block alt reveal reveal-d1">
          <p className="eyebrow">Additional Support</p>
          <div className="divider" />
          <h2>Confidence &amp; Communication</h2>
          <p style={{ marginTop: 16, fontSize: 14, color: 'var(--charcoal-mid)' }}>
            Support for adults preparing for important personal or professional speaking situations.
          </p>
          <ul className="svc-list">
            {['Wedding speeches', 'Public speaking and presentations', 'Professional interviews', 'Workplace communication', 'Everyday speaking confidence'].map((t) => <li key={t}>{t}</li>)}
          </ul>
        </div>
      </div>

      <div className="expect-wrap">
        <p className="eyebrow reveal">The Process</p>
        <div className="divider reveal" />
        <h2 className="reveal reveal-d1">What to Expect</h2>
        <div className="expect-cols">
          <div className="expect-col reveal reveal-d2">
            <h4>Your Initial Assessment</h4>
            <ul className="svc-list">
              {['Your voice symptoms and history', 'How your voice affects daily life and work', 'Breathing, vocal habits and vocal use', 'Your goals for therapy and recovery'].map((t) => <li key={t}>{t}</li>)}
            </ul>
          </div>
          <div className="expect-col reveal reveal-d3">
            <h4>Your Therapy Plan May Include</h4>
            <ul className="svc-list">
              {['Voice modification', 'Vocal coordination work', 'Breathing exercises', 'Techniques for clearer, confident speaking', 'Strategies to reduce everyday strain', 'Knowledge to identify vocal fatigue', 'Daily vocal hygiene advice'].map((t) => <li key={t}>{t}</li>)}
            </ul>
          </div>
        </div>
        <div className="session-note reveal">
          <p>"Sessions are enjoyable, supportive and always paced to suit you."</p>
        </div>
      </div>

      <div className="appt-band">
        <div className="appt-inner-grid">
          <div className="reveal"><div className="appt-label">In-Person</div><p className="appt-val">North London<br />Private clinic setting</p></div>
          <div className="reveal reveal-d1"><div className="appt-label">Online</div><p className="appt-val">Available across the UK<br />Video appointments</p></div>
          <div className="reveal reveal-d2"><div className="appt-label">Availability</div><p className="appt-val">Flexible daytime &amp;<br />evening appointments</p></div>
        </div>
      </div>

      <CTABanner title="Ready to take the first step?" button="Book a Consultation" go={go} />
    </div>
  );
}

/* ═════════════════════════════════════════════════════════
   CONTACT — full form state, validation, async submit
   ═════════════════════════════════════════════════════════ */
function ContactPage() {
  const [form, setForm] = useStateP({ name: '', email: '', message: '', contact: 'Email' });
  const [errors, setErrors] = useStateP({});
  const [touched, setTouched] = useStateP({});
  const [status, setStatus] = useStateP('idle'); // idle | submitting | success

  const validate = (f) => {
    const e = {};
    if (!f.name.trim()) e.name = 'Please tell me your name';
    if (!f.email.trim()) e.email = 'Please share an email';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email)) e.email = 'That email looks off';
    if (!f.message.trim() || f.message.trim().length < 8) e.message = 'A sentence or two helps me prepare';
    return e;
  };

  const set = (k, v) => {
    const next = { ...form, [k]: v };
    setForm(next);
    if (touched[k]) setErrors(validate(next));
  };
  const blur = (k) => {
    setTouched({ ...touched, [k]: true });
    setErrors(validate(form));
  };

  const submit = async () => {
    const e = validate(form);
    setErrors(e);
    setTouched({ name: true, email: true, message: true, contact: true });
    if (Object.keys(e).length) return;
    setStatus('submitting');
    await new Promise((r) => setTimeout(r, 1100));
    setStatus('success');
  };

  const reset = () => {
    setForm({ name: '', email: '', message: '', contact: 'Email' });
    setErrors({}); setTouched({}); setStatus('idle');
  };

  const fieldClass = (k) => 'form-group' + (errors[k] && touched[k] ? ' invalid' : '');

  return (
    <div className="page page-enter" id="page-contact" data-screen-label="04 Contact">
      <div className="contact-layout">
        <div className="contact-left">
          <p className="eyebrow">Get In Touch</p>
          <div className="divider" />
          <h1>Let's Talk<br />About <em>Your</em><br />Voice</h1>
          <p className="contact-intro">If you'd like to arrange an initial consultation or find out whether voice therapy could help, please get in touch.</p>

          <div className="contact-details">
            <div className="cd-row">
              <div className="cd-label">Email</div>
              <div className="cd-val"><a href="mailto:saltspeechtherapy@gmail.com">saltspeechtherapy@gmail.com</a></div>
            </div>
            <div className="cd-row">
              <div className="cd-label">Location</div>
              <div className="cd-val">In-person — North London<br />Online — Available across the UK</div>
            </div>
            <div className="cd-row">
              <div className="cd-label">Availability</div>
              <div className="cd-val">Flexible daytime &amp; evening appointments</div>
            </div>
          </div>

          <div className="confidence-note">
            <p>All enquiries are treated in complete confidence.</p>
          </div>
        </div>

        <div className="contact-right">
          {status === 'success' ? (
            <div className="form-success" data-spec="form-success state · check ring + reset">
              <div className="check">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                  <path d="M4 12l5 5L20 6" />
                </svg>
              </div>
              <p className="eyebrow" style={{ marginBottom: 14 }}>Message Sent</p>
              <h3>Thank you, {form.name.split(' ')[0] || 'I have your note'}.</h3>
              <p style={{ marginTop: 12 }}>I'll be in touch within one working day. In the meantime, please do rest your voice.</p>
              <button className="btn-ghost" style={{ marginTop: 28 }} onClick={reset}>Send another</button>
            </div>
          ) : (
            <>
              <p className="eyebrow" style={{ marginBottom: 36 }}>Send a Message</p>

              <div className={fieldClass('name')}>
                <label>Your Name</label>
                <input
                  type="text" placeholder="Full name"
                  value={form.name}
                  onChange={(e) => set('name', e.target.value)}
                  onBlur={() => blur('name')}
                />
                {errors.name && touched.name && <p className="form-error">{errors.name}</p>}
              </div>

              <div className={fieldClass('email')}>
                <label>Email Address</label>
                <input
                  type="email" placeholder="your@email.com"
                  value={form.email}
                  onChange={(e) => set('email', e.target.value)}
                  onBlur={() => blur('email')}
                />
                {errors.email && touched.email && <p className="form-error">{errors.email}</p>}
              </div>

              <div className={fieldClass('message')}>
                <label>How Can I Help?</label>
                <textarea
                  placeholder="Tell me a little about what you're looking for…"
                  value={form.message}
                  onChange={(e) => set('message', e.target.value)}
                  onBlur={() => blur('message')}
                />
                {errors.message && touched.message && <p className="form-error">{errors.message}</p>}
              </div>

              <div className="form-group">
                <label>Preferred Contact Method</label>
                <select value={form.contact} onChange={(e) => set('contact', e.target.value)}>
                  <option>Email</option>
                  <option>Phone call</option>
                  <option>Video call</option>
                </select>
              </div>

              <button
                className="btn-primary"
                style={{ width: '100%', padding: '16px 0', marginTop: 8, fontSize: 11 }}
                onClick={submit}
                disabled={status === 'submitting'}
              >
                {status === 'submitting' ? 'Sending…' : 'Send Enquiry →'}
              </button>
              <p className="form-privacy">
                By submitting this form you agree to being contacted regarding your enquiry. Your details will not be shared with third parties.
              </p>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HomePage, AboutPage, ServicesPage, ContactPage });