// Variation A — Editorial / Classical
// Updated: removed case studies, added Packages preview, weaved watercolour
// illustrations, removed duplicate hero CTA. Now tweakable.

const HOME_A_DEFAULTS = (typeof window !== 'undefined' && window.TWEAK_DEFAULTS) || {
  heroEyebrow: 'Calm. Practical. People-first.',
  heroHeadlineLine1: 'A more personal',
  heroHeadlineLine2: 'approach to HR.',
  heroSubcopy: "For organisations who'd rather be supported than sold to.",
  showAbout: true,
  aboutEyebrow: 'About Claire',
  aboutHead: 'Quiet expertise. Practical guidance. People at the centre.',
  aboutBody1: "I'm Claire — an HR specialist working with small businesses, charities and growing teams across the UK. After years in-house, I started Aspen HR to offer the kind of calm, considered HR support I'd always wanted to give.",
  aboutBody2: 'Less corporate language, more straight talk. Less pitching, more listening.',
  aboutSig: '— Claire, founder',
  showSectors: true,
  showServices: true,
  showTestimonials: true,
  showPackages: true,
  heroLeftSprig: 3,
  heroRightSprig: 1,
};

function HomeA() {
  const [t, setTweak] = useTweaks(HOME_A_DEFAULTS);

  return (
    <div className="home-page">
      {/* Navigation */}
      <header className="navx navx--a">
        <div className="navx__left">
          <svg viewBox="0 0 40 64" className="navx__sprig"><use href="#sprig-sm" /></svg>
        </div>
        <div className="navx__center">
          <div className="navx__name">Aspen HR</div>
          <div className="navx__sub"><span className="navx__rule"></span>Human Resources<span className="navx__rule"></span></div>
        </div>
        <nav className="navx__links">
          <a className="is-active">Home</a>
          <a href="packages.html">Packages</a>
          <a href="about.html">About</a>
          <a href="contact.html" className="btn btn--primary">Let's talk</a>
        </nav>
      </header>

      {/* Hero — type-only, watercolour ornaments */}
      <section className="hero hero--c">
        <img
          className="hero-c__illo hero-c__illo--left"
          src={`assets/illustrations/sprig-${t.heroLeftSprig}.png`}
          alt="" loading="lazy" decoding="async" />
        <img
          className="hero-c__illo hero-c__illo--right"
          src={`assets/illustrations/sprig-${t.heroRightSprig}.png`}
          alt="" loading="lazy" decoding="async" />
        <div className="hero-c__inner">
          <p className="script" style={{textAlign:'center'}}>{t.heroEyebrow}</p>
          <h1 style={{textAlign:'center',color:'var(--forest)'}}>
            {t.heroHeadlineLine1}<br />
            <em>{t.heroHeadlineLine2}</em>
          </h1>
          <div className="div-row" style={{justifyContent:'center'}}>
            <svg viewBox="0 0 120 16" style={{width:160,color:'var(--sage-dark)'}}><use href="#flourish" /></svg>
          </div>
          <p className="hero__sub" style={{textAlign:'center',maxWidth:600,margin:'24px auto 0'}}>
            {t.heroSubcopy}
          </p>
        </div>
      </section>

      {/* Narrative — What I do · How I work · Why work with me */}
      <section className="narrative">
        <div className="narrative__inner">
          <div className="narrative__row">
            <article className="narrative__beat">
              <div className="narrative__icon"><svg viewBox="0 0 32 32"><use href="#i-leaf-icon" /></svg></div>
              <h2 className="narrative__head">What I do</h2>
              <p className="narrative__copy">I provide practical, down-to-earth HR support to small and growing businesses. From day-to-day people matters to longer-term projects, I'm here to help you stay compliant, confident and focused on what you do best.</p>
            </article>

            <article className="narrative__beat">
              <div className="narrative__icon"><svg viewBox="0 0 32 32"><use href="#i-people" /></svg></div>
              <h2 className="narrative__head">How I work</h2>
              <p className="narrative__copy">I take the time to understand your business, your people and your goals. You'll get clear, straightforward advice and responsive support, tailored to your needs — without the jargon.</p>
            </article>

            <article className="narrative__beat">
              <div className="narrative__icon"><svg viewBox="0 0 32 32"><use href="#i-heart" /></svg></div>
              <h2 className="narrative__head">Why work with me</h2>
              <p className="narrative__copy">You'll work directly with me — not a call centre or account manager. I bring experience, empathy and a genuine passion for helping businesses create positive, productive workplaces.</p>
            </article>
          </div>

          <div className="narrative__cta">
            <a href="contact.html" className="btn btn--primary">Let's talk</a>
          </div>
        </div>
      </section>

      {/* About Claire */}
      {t.showAbout && (
        <section className="about">
          <div className="about__image" role="img" aria-label="Aspen HR notebook on a soft daylight desk"></div>
          <div className="about__text">
            <p className="about__eyebrow">{t.aboutEyebrow}</p>
            <h2 className="about__head">{t.aboutHead}</h2>
            <p className="about__body">{t.aboutBody1}</p>
            <p className="about__body">{t.aboutBody2}</p>
            <p className="about__sig">{t.aboutSig}</p>
          </div>
        </section>
      )}

      {/* Sectors */}
      {t.showSectors && (
        <section className="sectors section--alt">
          <div className="sectors__head">
            <p className="sectors__eyebrow">Who I work with</p>
            <h2>A range of sectors, one shared approach.</h2>
            <p>Each comes with its own rhythm, regulations and culture. I work with what's there — not against it.</p>
          </div>
          <div className="sector-grid sector-grid--2x2">
            <article className="sector-card">
              <div className="icon-ring"><svg viewBox="0 0 32 32"><use href="#i-briefcase" /></svg></div>
              <h3>Small &amp; Medium Businesses</h3>
              <p>Supporting SMEs to build strong foundations, manage people effectively and grow with confidence.</p>
            </article>
            <article className="sector-card">
              <div className="icon-ring"><svg viewBox="0 0 32 32"><use href="#i-heart" /></svg></div>
              <h3>Charities &amp; Not-for-Profits</h3>
              <p>Experience in the charity sector means I understand mission-led organisations and the people who drive them.</p>
            </article>
            <article className="sector-card">
              <div className="icon-ring"><svg viewBox="0 0 32 32"><use href="#i-doc" /></svg></div>
              <h3>Professional Services</h3>
              <p>Working with consultancies, agencies and professional teams to create clear, fair and compliant people processes.</p>
            </article>
            <article className="sector-card">
              <div className="icon-ring"><svg viewBox="0 0 32 32"><use href="#i-leaf-icon" /></svg></div>
              <h3>Growing Businesses</h3>
              <p>Helping businesses scale sustainably with the right people strategies and structures in place.</p>
            </article>
          </div>
        </section>
      )}

      {/* Services */}
      {t.showServices && (
        <section className="services">
          <div className="services__head">
            <p className="sectors__eyebrow">What I offer</p>
            <h2>Six ways I can help.</h2>
          </div>
          <div className="services-grid">
            <article className="service">
              <div className="icon-ring"><svg viewBox="0 0 32 32"><use href="#i-shield" /></svg></div>
              <h3>HR Strategy &amp; Planning</h3>
              <p>Practical HR strategies aligned with your business goals.</p>
            </article>
            <article className="service">
              <div className="icon-ring"><svg viewBox="0 0 32 32"><use href="#i-doc" /></svg></div>
              <h3>Policies &amp; Procedures</h3>
              <p>Clear, compliant documentation that protects your business and supports your people.</p>
            </article>
            <article className="service">
              <div className="icon-ring"><svg viewBox="0 0 32 32"><use href="#i-support" /></svg></div>
              <h3>Employee Relations Support</h3>
              <p>Guidance and support with people issues, conversations and resolutions.</p>
            </article>
            <article className="service">
              <div className="icon-ring"><svg viewBox="0 0 32 32"><use href="#i-people" /></svg></div>
              <h3>Recruitment Support</h3>
              <p>Attracting, hiring and onboarding the right people for your business.</p>
            </article>
            <article className="service">
              <div className="icon-ring"><svg viewBox="0 0 32 32"><use href="#i-leaf-icon" /></svg></div>
              <h3>Performance &amp; Development</h3>
              <p>Creating a culture of feedback, growth and continuous improvement.</p>
            </article>
            <article className="service">
              <div className="icon-ring"><svg viewBox="0 0 32 32"><use href="#i-clipboard" /></svg></div>
              <h3>General Admin Support</h3>
              <p>Reliable day-to-day administrative support so you can focus on what matters most.</p>
            </article>
          </div>
        </section>
      )}

      {/* Packages preview — links to /packages */}
      {t.showPackages && (
        <section className="packages section--alt">
          <img className="packages__illo" src="assets/illustrations/sprig-5.png" alt="" loading="lazy" decoding="async" />
          <div className="packages__head">
            <p className="sectors__eyebrow">Ways to work together</p>
            <h2>Three packages, scaled to where you are.</h2>
            <p>Flexible monthly support, with the freedom to grow as your organisation does. Pick the level that fits — each can flex up or down over time.</p>
          </div>
          <div className="grid grid--3 g-package g-package--tight">
            <article className="pkg">
              <div className="pkg__head">
                <div className="icon-ring icon-ring--lg icon-ring--default"><svg viewBox="0 0 32 32"><use href="#i-leaf-icon" /></svg></div>
              </div>
              <h3 className="pkg__name">Foundations</h3>
              <div className="pkg__price"><span className="pkg__amt">£225</span><span className="pkg__per">per month</span></div>
              <p className="pkg__commit">3-month minimum, rolling thereafter</p>
              <div className="pkg__rule"></div>
              <p className="pkg__lede">Ideal for smaller organisations needing lighter-touch HR and admin support.</p>
              <ul className="pkg__list">
                <li><svg className="pkg__tick" viewBox="0 0 32 32" style={{color:'var(--sage-dark)'}}><use href="#i-check" /></svg>Ongoing email support</li>
                <li><svg className="pkg__tick" viewBox="0 0 32 32" style={{color:'var(--sage-dark)'}}><use href="#i-check" /></svg>Routine HR &amp; admin guidance</li>
                <li><svg className="pkg__tick" viewBox="0 0 32 32" style={{color:'var(--sage-dark)'}}><use href="#i-check" /></svg>Basic document updates &amp; support</li>
              </ul>
              <a className="btn btn--text" href="packages.html#foundations">Learn more <svg className="btn__arrow" viewBox="0 0 32 32"><use href="#i-arrow" /></svg></a>
            </article>
            <article className="pkg pkg--feature">
              <div className="pkg__pop">MOST POPULAR</div>
              <div className="pkg__head">
                <div className="icon-ring icon-ring--lg icon-ring--selected"><svg viewBox="0 0 32 32"><use href="#i-tree" /></svg></div>
              </div>
              <h3 className="pkg__name">Growth</h3>
              <div className="pkg__price"><span className="pkg__amt">£450</span><span className="pkg__per">per month</span></div>
              <p className="pkg__commit">3-month minimum, rolling thereafter</p>
              <div className="pkg__rule"></div>
              <p className="pkg__lede">For growing organisations needing more regular support across people, processes and operations.</p>
              <ul className="pkg__list">
                <li><svg className="pkg__tick" viewBox="0 0 32 32" style={{color:'var(--sage-dark)'}}><use href="#i-check" /></svg>Regular ongoing HR &amp; admin support</li>
                <li><svg className="pkg__tick" viewBox="0 0 32 32" style={{color:'var(--sage-dark)'}}><use href="#i-check" /></svg>Recruitment &amp; onboarding guidance</li>
                <li><svg className="pkg__tick" viewBox="0 0 32 32" style={{color:'var(--sage-dark)'}}><use href="#i-check" /></svg>Monthly check-ins &amp; ongoing guidance</li>
                <li><svg className="pkg__tick" viewBox="0 0 32 32" style={{color:'var(--sage-dark)'}}><use href="#i-check" /></svg>Priority response times</li>
              </ul>
              <a className="btn btn--primary btn--sm" href="packages.html#growth">Learn more <svg className="btn__arrow" viewBox="0 0 32 32"><use href="#i-arrow" /></svg></a>
            </article>
            <article className="pkg">
              <div className="pkg__head">
                <div className="icon-ring icon-ring--lg icon-ring--default"><svg viewBox="0 0 32 32"><use href="#i-people" /></svg></div>
              </div>
              <h3 className="pkg__name">Partnership</h3>
              <div className="pkg__price"><span className="pkg__amt">£800</span><span className="pkg__per">per month</span></div>
              <p className="pkg__commit">3-month minimum, rolling thereafter</p>
              <div className="pkg__rule"></div>
              <p className="pkg__lede">For organisations wanting a more hands-on and responsive support partner.</p>
              <ul className="pkg__list">
                <li><svg className="pkg__tick" viewBox="0 0 32 32" style={{color:'var(--sage-dark)'}}><use href="#i-check" /></svg>Responsive ongoing HR &amp; admin support</li>
                <li><svg className="pkg__tick" viewBox="0 0 32 32" style={{color:'var(--sage-dark)'}}><use href="#i-check" /></svg>Support with processes &amp; structure</li>
                <li><svg className="pkg__tick" viewBox="0 0 32 32" style={{color:'var(--sage-dark)'}}><use href="#i-check" /></svg>Wellbeing &amp; culture support</li>
                <li><svg className="pkg__tick" viewBox="0 0 32 32" style={{color:'var(--sage-dark)'}}><use href="#i-check" /></svg>Priority support &amp; regular check-ins</li>
              </ul>
              <a className="btn btn--text" href="packages.html#partnership">Learn more <svg className="btn__arrow" viewBox="0 0 32 32"><use href="#i-arrow" /></svg></a>
            </article>
          </div>
          <div className="packages__cta">
            <a className="btn btn--secondary" href="packages.html">Compare packages <svg className="btn__arrow" viewBox="0 0 32 32"><use href="#i-arrow" /></svg></a>
          </div>
        </section>
      )}

      {/* Testimonials */}
      {t.showTestimonials && (
        <section className="testimonials">
          <div className="testimonials__head">
            <p className="sectors__eyebrow">What clients say</p>
            <h2>A trusted partner.</h2>
          </div>
          <div className="testimonials__inner">
            <div className="grid grid--2 g-testi">
              <article className="home-testi">
                <div className="home-testi__quote">"</div>
                <p className="home-testi__body">
                  Working closely with Claire for over two years, I always felt extremely supported and could rely on her knowledge around policies, procedures and staff matters whenever needed. Claire is an excellent communicator, highly productive and proactive in implementing new policies and processes.
                </p>
                <div className="home-testi__attr">
                  <div className="home-testi__avatar">S</div>
                  <div>
                    <div className="home-testi__name">Sam</div>
                    <div className="home-testi__role">General Manager, Charity Sector</div>
                  </div>
                </div>
              </article>
              <article className="home-testi">
                <div className="home-testi__quote">"</div>
                <p className="home-testi__body">
                  Working with Claire was a real blessing. Our charity HR and safeguarding needs were often challenging and complicated, but Claire always took it in her stride, staying calm and collected and going above and beyond repeatedly to ensure that all tasks were completed on time and to the highest standard. I'd highly recommend Claire's services to any business looking for responsive, professional and personal support.
                </p>
                <div className="home-testi__attr">
                  <div className="home-testi__avatar">R</div>
                  <div>
                    <div className="home-testi__name">Ruth</div>
                    <div className="home-testi__role">CEO, Charity Sector</div>
                  </div>
                </div>
              </article>
            </div>
          </div>
        </section>
      )}

      {/* Final CTA */}
      <section className="final-cta">
        <img className="final-cta__illo final-cta__illo--left" src="assets/illustrations/sprig-4.png" alt="" loading="lazy" decoding="async" />
        <img className="final-cta__illo final-cta__illo--right" src="assets/illustrations/sprig-6.png" alt="" loading="lazy" decoding="async" />
        <div className="final-cta__inner">
          <p className="final-cta__eyebrow">Ready to feel more confident managing your people?</p>
          <h2>Let's start a conversation.</h2>
          <p>Whether you need ongoing HR support or help with a one-off project, I'd love to hear more about your business and how I can help.</p>
          <a href="contact.html" className="btn btn--ghost">Get in touch <svg className="btn__arrow" viewBox="0 0 32 32"><use href="#i-arrow" /></svg></a>
        </div>
      </section>

      {/* Footer */}
      <footer className="ftr ftr--a">
        <div className="ftr__mark logo-lockup logo-lockup--primary logo-lockup--sm">
          <svg className="logo-sprig" viewBox="0 0 40 64"><use href="#sprig-sm" /></svg>
          <div className="logo-wordmark">
            <div className="logo-name">Aspen HR</div>
            <div className="logo-tagline"><span className="logo-rule"></span>Human Resources<span className="logo-rule"></span></div>
          </div>
        </div>
        <div className="ftr__contacts">
          <span><svg viewBox="0 0 32 32"><use href="#i-envelope" /></svg>claire@aspenhr.co.uk</span>
          <span><svg viewBox="0 0 32 32"><use href="#i-globe" /></svg>www.aspenhr.co.uk</span>
        </div>
        <div className="ftr__legal">
          <a href="privacy.html">Privacy</a>
        </div>
      </footer>
      <div className="ftr__base">© 2026 Aspen HR. All rights reserved.</div>

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero" />
        <TweakText
          label="Eyebrow"
          value={t.heroEyebrow}
          onChange={(v) => setTweak('heroEyebrow', v)}
        />
        <TweakText
          label="Headline · line 1"
          value={t.heroHeadlineLine1}
          onChange={(v) => setTweak('heroHeadlineLine1', v)}
        />
        <TweakText
          label="Headline · line 2 (italic)"
          value={t.heroHeadlineLine2}
          onChange={(v) => setTweak('heroHeadlineLine2', v)}
        />
        <TweakText
          label="Sub-headline"
          value={t.heroSubcopy}
          onChange={(v) => setTweak('heroSubcopy', v)}
        />
        <TweakSelect
          label="Left ornament"
          value={t.heroLeftSprig}
          options={[
            { value: 1, label: '01 · Long-leaf' },
            { value: 2, label: '02 · Broad-leaf' },
            { value: 3, label: '03 · Oval pairs' },
            { value: 4, label: '04 · Eucalyptus' },
            { value: 5, label: '05 · Olive' },
            { value: 6, label: '06 · Sage & buds' },
          ]}
          onChange={(v) => setTweak('heroLeftSprig', Number(v))}
        />
        <TweakSelect
          label="Right ornament"
          value={t.heroRightSprig}
          options={[
            { value: 1, label: '01 · Long-leaf' },
            { value: 2, label: '02 · Broad-leaf' },
            { value: 3, label: '03 · Oval pairs' },
            { value: 4, label: '04 · Eucalyptus' },
            { value: 5, label: '05 · Olive' },
            { value: 6, label: '06 · Sage & buds' },
          ]}
          onChange={(v) => setTweak('heroRightSprig', Number(v))}
        />

        <TweakSection label="Sections" />
        <TweakToggle label="About Claire" value={t.showAbout} onChange={(v) => setTweak('showAbout', v)} />
        <TweakToggle label="Sectors" value={t.showSectors} onChange={(v) => setTweak('showSectors', v)} />
        <TweakToggle label="Services" value={t.showServices} onChange={(v) => setTweak('showServices', v)} />
        <TweakToggle label="Packages preview" value={t.showPackages} onChange={(v) => setTweak('showPackages', v)} />
        <TweakToggle label="Testimonials" value={t.showTestimonials} onChange={(v) => setTweak('showTestimonials', v)} />

        <TweakSection label="About Claire" />
        <TweakText label="Eyebrow" value={t.aboutEyebrow} onChange={(v) => setTweak('aboutEyebrow', v)} />
        <TweakText label="Headline" value={t.aboutHead} onChange={(v) => setTweak('aboutHead', v)} />
        <TweakText label="Body · paragraph 1" value={t.aboutBody1} onChange={(v) => setTweak('aboutBody1', v)} />
        <TweakText label="Body · paragraph 2" value={t.aboutBody2} onChange={(v) => setTweak('aboutBody2', v)} />
        <TweakText label="Signature" value={t.aboutSig} onChange={(v) => setTweak('aboutSig', v)} />
      </TweaksPanel>
    </div>
  );
}

Object.assign(window, { HomeA });