// Packages page — fully tweakable.

const PKG_DEFAULTS = (typeof window !== 'undefined' && window.TWEAK_DEFAULTS) || {};

function feature(text, i) {
  return (
    <li key={i}><svg viewBox="0 0 32 32"><use href="#i-check" /></svg>{text}</li>
  );
}

function PackagesPage() {
  const [t, setTweak] = useTweaks(PKG_DEFAULTS);
  const T = (k) => (v) => setTweak(k, v);

  // Build feature arrays from numbered keys (pkg1F1..pkg1F6 etc)
  const pkg1Features = [t.pkg1F1, t.pkg1F2, t.pkg1F3, t.pkg1F4, t.pkg1F5].filter(Boolean);
  const pkg2Features = [t.pkg2F1, t.pkg2F2, t.pkg2F3, t.pkg2F4, t.pkg2F5, t.pkg2F6].filter(Boolean);
  const pkg3Features = [t.pkg3F1, t.pkg3F2, t.pkg3F3, t.pkg3F4, t.pkg3F5, t.pkg3F6].filter(Boolean);
  const projectExamples = [t.proj1, t.proj2, t.proj3, t.proj4, t.proj5, t.proj6, t.proj7, t.proj8, t.proj9, t.proj10].filter(Boolean);
  const additionalExamples = [t.add1, t.add2, t.add3, t.add4].filter(Boolean);

  const faqs = [
    { q: t.faq1Q, a: t.faq1A },
    { q: t.faq2Q, a: t.faq2A },
    { q: t.faq3Q, a: t.faq3A },
    { q: t.faq4Q, a: t.faq4A },
    { q: t.faq5Q, a: t.faq5A },
    { q: t.faq6Q, a: t.faq6A },
    { q: t.faq7Q, a: t.faq7A },
    { q: t.faq8Q, a: t.faq8A },
  ].filter((f) => f.q && f.a);

  return (
    <div className="home-page">
      {/* Nav */}
      <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">{t.brandName}</div>
          <div className="navx__sub"><span className="navx__rule"></span>{t.brandTagline}<span className="navx__rule"></span></div>
        </div>
        <nav className="navx__links">
          <a href="/">Home</a>
          <a className="is-active">Packages</a>
          <a href="about.html">About</a>
          <a href="contact.html" className="btn btn--primary">{t.navCta}</a>
        </nav>
      </header>

      {/* Hero */}
      <section className="pkg-hero">
        <img className="pkg-hero__illo pkg-hero__illo--left" src="assets/illustrations/sprig-3.png" alt="" loading="lazy" decoding="async" />
        <img className="pkg-hero__illo pkg-hero__illo--right" src="assets/illustrations/sprig-1.png" alt="" loading="lazy" decoding="async" />
        <div className="pkg-hero__inner">
          <p className="pkg-hero__eyebrow">{t.heroEyebrow}</p>
          <h1>{t.heroHead}</h1>
          <div style={{display:'flex',justifyContent:'center',margin:'0 0 28px'}}>
            <svg viewBox="0 0 120 16" style={{width:160,color:'var(--sage-dark)',opacity:.7}}><use href="#flourish" /></svg>
          </div>
          <p className="pkg-hero__lede">{t.heroLede}</p>
        </div>
      </section>

      {/* Detailed cards */}
      <section className="pkg-detail-grid">
        <div className="pkg-detail-grid__inner">
          <article className="pkg-detail" id="foundations">
            <h2 className="pkg-detail__name">{t.pkg1Name}</h2>
            <p className="pkg-detail__price"><span className="pkg-detail__amt">{t.pkg1Price}</span><span className="pkg-detail__per">{t.pkg1Per}</span></p>
            <p className="pkg-detail__commit">{t.pkg1Commit}</p>
            <div className="pkg-detail__rule"></div>
            <p className="pkg-detail__tag">{t.pkg1Tag}</p>
            <p className="pkg-detail__lede">{t.pkg1Lede}</p>
            <p className="pkg-detail__sub">Includes</p>
            <ul className="pkg-detail__list">{pkg1Features.map(feature)}</ul>
            <a href="contact.html#foundations" className="btn btn--secondary">{t.pkg1Cta} <svg className="btn__arrow" viewBox="0 0 32 32"><use href="#i-arrow" /></svg></a>
          </article>

          <article className="pkg-detail pkg-detail--feature" id="growth">
            <div className="pkg-detail__pop">{t.pkg2Pop}</div>
            <h2 className="pkg-detail__name">{t.pkg2Name}</h2>
            <p className="pkg-detail__price"><span className="pkg-detail__amt">{t.pkg2Price}</span><span className="pkg-detail__per">{t.pkg2Per}</span></p>
            <p className="pkg-detail__commit">{t.pkg2Commit}</p>
            <div className="pkg-detail__rule"></div>
            <p className="pkg-detail__tag">{t.pkg2Tag}</p>
            <p className="pkg-detail__lede">{t.pkg2Lede}</p>
            <p className="pkg-detail__sub">Includes</p>
            <ul className="pkg-detail__list">{pkg2Features.map(feature)}</ul>
            <a href="contact.html#growth" className="btn btn--primary">{t.pkg2Cta} <svg className="btn__arrow" viewBox="0 0 32 32"><use href="#i-arrow" /></svg></a>
          </article>

          <article className="pkg-detail" id="partnership">
            <h2 className="pkg-detail__name">{t.pkg3Name}</h2>
            <p className="pkg-detail__price"><span className="pkg-detail__amt">{t.pkg3Price}</span><span className="pkg-detail__per">{t.pkg3Per}</span></p>
            <p className="pkg-detail__commit">{t.pkg3Commit}</p>
            <div className="pkg-detail__rule"></div>
            <p className="pkg-detail__tag">{t.pkg3Tag}</p>
            <p className="pkg-detail__lede">{t.pkg3Lede}</p>
            <p className="pkg-detail__sub">Includes</p>
            <ul className="pkg-detail__list">{pkg3Features.map(feature)}</ul>
            <a href="contact.html#partnership" className="btn btn--secondary">{t.pkg3Cta} <svg className="btn__arrow" viewBox="0 0 32 32"><use href="#i-arrow" /></svg></a>
          </article>
        </div>
      </section>

      {/* Project Support */}
      {t.showProjects && (
        <section className="pkg-info-block pkg-info-block--alt" id="projects">
          <div className="pkg-info-block__inner">
            <div className="pkg-info-block__head">
              <p className="pkg-info-block__eyebrow">{t.projectsEyebrow}</p>
              <h2>{t.projectsHead}</h2>
              <p className="pkg-info-block__lede">{t.projectsLede}</p>
            </div>
            <ul className="pkg-examples-grid">
              {projectExamples.map((x, i) => (
                <li key={i}><svg viewBox="0 0 40 64"><use href="#sprig-sm" /></svg>{x}</li>
              ))}
            </ul>
          </div>
        </section>
      )}

      {/* Additional Support */}
      {t.showAdditional && (
        <section className="pkg-info-block">
          <div className="pkg-info-block__inner">
            <div className="pkg-info-block__head">
              <p className="pkg-info-block__eyebrow">{t.additionalEyebrow}</p>
              <h2>{t.additionalHead}</h2>
              <p className="pkg-info-block__lede">{t.additionalLede}</p>
            </div>
            <ul className="pkg-examples-grid">
              {additionalExamples.map((x, i) => (
                <li key={i}><svg viewBox="0 0 40 64"><use href="#sprig-sm" /></svg>{x}</li>
              ))}
            </ul>
          </div>
        </section>
      )}

      {/* Package Information */}
      {t.showInfo && (
        <section className="pkg-info-block pkg-info-block--alt">
          <div className="pkg-info-block__inner">
            <div className="pkg-info-block__head">
              <p className="pkg-info-block__eyebrow">{t.infoEyebrow}</p>
              <h2>{t.infoHead}</h2>
              <p className="pkg-info-block__lede">{t.infoLede}</p>
            </div>
            <div className="pkg-info-paragraphs">
              <p>{t.info1}</p>
              <p>{t.info2}</p>
              <p>{t.info3}</p>
              <p>{t.info4}</p>
            </div>
          </div>
        </section>
      )}

      {/* FAQ */}
      {t.showFAQ && faqs.length > 0 && (
        <section className="pkg-faq" id="faq">
          <img className="pkg-faq__illo" src="assets/illustrations/sprig-4.png" alt="" loading="lazy" decoding="async" />
          <div className="pkg-faq__inner">
            <div className="pkg-faq__head">
              <p className="pkg-faq__eyebrow">{t.faqEyebrow}</p>
              <h2>{t.faqHead}</h2>
              <p>{t.faqLede}</p>
            </div>
            <div className="pkg-faq__list">
              {faqs.map((f, i) => (
                <details key={i} className="pkg-faq__item" open={i === 0}>
                  <summary className="pkg-faq__q">{f.q}</summary>
                  <p className="pkg-faq__a">{f.a}</p>
                </details>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Final CTA */}
      <section className="pkg-final">
        <img className="pkg-final__illo pkg-final__illo--left" src="assets/illustrations/sprig-4.png" alt="" loading="lazy" decoding="async" />
        <img className="pkg-final__illo pkg-final__illo--right" src="assets/illustrations/sprig-6.png" alt="" loading="lazy" decoding="async" />
        <div className="pkg-final__inner">
          <p className="pkg-final__eyebrow">{t.finalEyebrow}</p>
          <h2>{t.finalHead}</h2>
          <p>{t.finalBody}</p>
          <a href="contact.html" className="btn btn--ghost">{t.finalCta} <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">{t.brandName}</div>
            <div className="logo-tagline"><span className="logo-rule"></span>{t.brandTagline}<span className="logo-rule"></span></div>
          </div>
        </div>
        <div className="ftr__contacts">
          <span><svg viewBox="0 0 32 32"><use href="#i-envelope" /></svg>{t.footerEmail}</span>
          <span><svg viewBox="0 0 32 32"><use href="#i-globe" /></svg>{t.footerWeb}</span>
        </div>
        <div className="ftr__legal">
          <a href="privacy.html">Privacy</a>
        </div>
      </footer>
      <div className="ftr__base">{t.footerCopyright}</div>

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Sections" />
        <TweakToggle label="Project Support" value={t.showProjects} onChange={T('showProjects')} />
        <TweakToggle label="Additional Support" value={t.showAdditional} onChange={T('showAdditional')} />
        <TweakToggle label="Package information" value={t.showInfo} onChange={T('showInfo')} />
        <TweakToggle label="FAQ" value={t.showFAQ} onChange={T('showFAQ')} />

        <TweakSection label="Hero" />
        <TweakText label="Eyebrow" value={t.heroEyebrow} onChange={T('heroEyebrow')} />
        <TweakText label="Headline" value={t.heroHead} onChange={T('heroHead')} />
        <TweakText label="Lede" value={t.heroLede} onChange={T('heroLede')} />

        <TweakSection label="Package · Foundations" />
        <TweakText label="Name" value={t.pkg1Name} onChange={T('pkg1Name')} />
        <TweakText label="Price" value={t.pkg1Price} onChange={T('pkg1Price')} />
        <TweakText label="Period" value={t.pkg1Per} onChange={T('pkg1Per')} />
        <TweakText label="Commitment" value={t.pkg1Commit} onChange={T('pkg1Commit')} />
        <TweakText label="Tag-line" value={t.pkg1Tag} onChange={T('pkg1Tag')} />
        <TweakText label="Description" value={t.pkg1Lede} onChange={T('pkg1Lede')} />
        <TweakText label="CTA" value={t.pkg1Cta} onChange={T('pkg1Cta')} />
        <TweakText label="Feature 1" value={t.pkg1F1} onChange={T('pkg1F1')} />
        <TweakText label="Feature 2" value={t.pkg1F2} onChange={T('pkg1F2')} />
        <TweakText label="Feature 3" value={t.pkg1F3} onChange={T('pkg1F3')} />
        <TweakText label="Feature 4" value={t.pkg1F4} onChange={T('pkg1F4')} />
        <TweakText label="Feature 5" value={t.pkg1F5} onChange={T('pkg1F5')} />

        <TweakSection label="Package · Growth" />
        <TweakText label="Popular tag" value={t.pkg2Pop} onChange={T('pkg2Pop')} />
        <TweakText label="Name" value={t.pkg2Name} onChange={T('pkg2Name')} />
        <TweakText label="Price" value={t.pkg2Price} onChange={T('pkg2Price')} />
        <TweakText label="Period" value={t.pkg2Per} onChange={T('pkg2Per')} />
        <TweakText label="Commitment" value={t.pkg2Commit} onChange={T('pkg2Commit')} />
        <TweakText label="Tag-line" value={t.pkg2Tag} onChange={T('pkg2Tag')} />
        <TweakText label="Description" value={t.pkg2Lede} onChange={T('pkg2Lede')} />
        <TweakText label="CTA" value={t.pkg2Cta} onChange={T('pkg2Cta')} />
        <TweakText label="Feature 1" value={t.pkg2F1} onChange={T('pkg2F1')} />
        <TweakText label="Feature 2" value={t.pkg2F2} onChange={T('pkg2F2')} />
        <TweakText label="Feature 3" value={t.pkg2F3} onChange={T('pkg2F3')} />
        <TweakText label="Feature 4" value={t.pkg2F4} onChange={T('pkg2F4')} />
        <TweakText label="Feature 5" value={t.pkg2F5} onChange={T('pkg2F5')} />
        <TweakText label="Feature 6" value={t.pkg2F6} onChange={T('pkg2F6')} />

        <TweakSection label="Package · Partnership" />
        <TweakText label="Name" value={t.pkg3Name} onChange={T('pkg3Name')} />
        <TweakText label="Price" value={t.pkg3Price} onChange={T('pkg3Price')} />
        <TweakText label="Period" value={t.pkg3Per} onChange={T('pkg3Per')} />
        <TweakText label="Commitment" value={t.pkg3Commit} onChange={T('pkg3Commit')} />
        <TweakText label="Tag-line" value={t.pkg3Tag} onChange={T('pkg3Tag')} />
        <TweakText label="Description" value={t.pkg3Lede} onChange={T('pkg3Lede')} />
        <TweakText label="CTA" value={t.pkg3Cta} onChange={T('pkg3Cta')} />
        <TweakText label="Feature 1" value={t.pkg3F1} onChange={T('pkg3F1')} />
        <TweakText label="Feature 2" value={t.pkg3F2} onChange={T('pkg3F2')} />
        <TweakText label="Feature 3" value={t.pkg3F3} onChange={T('pkg3F3')} />
        <TweakText label="Feature 4" value={t.pkg3F4} onChange={T('pkg3F4')} />
        <TweakText label="Feature 5" value={t.pkg3F5} onChange={T('pkg3F5')} />
        <TweakText label="Feature 6" value={t.pkg3F6} onChange={T('pkg3F6')} />

        <TweakSection label="FAQ" />
        <TweakText label="Eyebrow" value={t.faqEyebrow} onChange={T('faqEyebrow')} />
        <TweakText label="Headline" value={t.faqHead} onChange={T('faqHead')} />
        <TweakText label="Lede" value={t.faqLede} onChange={T('faqLede')} />
        <TweakText label="Q1" value={t.faq1Q} onChange={T('faq1Q')} />
        <TweakText label="A1" value={t.faq1A} onChange={T('faq1A')} />
        <TweakText label="Q2" value={t.faq2Q} onChange={T('faq2Q')} />
        <TweakText label="A2" value={t.faq2A} onChange={T('faq2A')} />
        <TweakText label="Q3" value={t.faq3Q} onChange={T('faq3Q')} />
        <TweakText label="A3" value={t.faq3A} onChange={T('faq3A')} />
        <TweakText label="Q4" value={t.faq4Q} onChange={T('faq4Q')} />
        <TweakText label="A4" value={t.faq4A} onChange={T('faq4A')} />
        <TweakText label="Q5" value={t.faq5Q} onChange={T('faq5Q')} />
        <TweakText label="A5" value={t.faq5A} onChange={T('faq5A')} />
        <TweakText label="Q6" value={t.faq6Q} onChange={T('faq6Q')} />
        <TweakText label="A6" value={t.faq6A} onChange={T('faq6A')} />
        <TweakText label="Q7" value={t.faq7Q} onChange={T('faq7Q')} />
        <TweakText label="A7" value={t.faq7A} onChange={T('faq7A')} />
        <TweakText label="Q8" value={t.faq8Q} onChange={T('faq8Q')} />
        <TweakText label="A8" value={t.faq8A} onChange={T('faq8A')} />

        <TweakSection label="Final CTA" />
        <TweakText label="Eyebrow" value={t.finalEyebrow} onChange={T('finalEyebrow')} />
        <TweakText label="Headline" value={t.finalHead} onChange={T('finalHead')} />
        <TweakText label="Body" value={t.finalBody} onChange={T('finalBody')} />
        <TweakText label="CTA label" value={t.finalCta} onChange={T('finalCta')} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<PackagesPage />);