/* Aevitan website — Supplements store + Partner onboarding. */
const DSx = window.AevitanDesignSystem_6a042d;
const PORTAL_URL_PARTNER = (typeof location !== 'undefined' && location.hostname === 'localhost')
  ? 'http://localhost:3001'
  : 'https://portal.aevitan.com';

function Store() {
  const { Kicker, ProductCard, Button } = DSx;
  const items = [
    ['AEVI NOVEN', 'NAD+ Strips · 30', 'Longevity', '$64'],
    ['Arcwell Glutathione', 'Oral strips · 30', 'Wellness', '$39'],
    ['AEVI AMAZON DAILY', 'NMN + Amazon actives', 'Longevity', '$58'],
  ];
  return (
    <section className="aevsite-band">
      <div className="aevsite-wrap aevsite-reveal">
        <Kicker>Supplements &amp; Strips</Kicker>
        <h2 className="aevsite-h2">Openly available. Same standard.</h2>
        <p className="muted">The publicly purchasable layer: Aevitan supplements and Arcwell strips.</p>
        <div className="aevsite-grid3" style={{ marginTop: 22 }}>
          {items.map(([name, sub, cat, price]) => (
            <ProductCard key={name} name={name} category={cat} subtitle={sub} status="available"
              footer={
                <React.Fragment>
                  <span className="aevsite-price">{price}</span>
                  <Button variant="gold" size="sm">Add</Button>
                </React.Fragment>
              } />
          ))}
        </div>
      </div>
    </section>
  );
}

function Partner() {
  const { Kicker, Card, Button } = DSx;
  const flow = [
    ['1 · Join free', 'Create the same Longevity Club membership available to every member.'],
    ['2 · Choose your type', 'Select health professional, clinic, or reseller during signup.'],
    ['3 · Complete your profile', 'Add the details relevant to your activities.'],
    ['4 · Record your declaration', 'Personally confirm the applicable professional, business, or reseller statement.'],
  ];
  return (
    <section className="aevsite-band aevsite-band--top">
      <div className="aevsite-wrap aevsite-reveal">
        <Kicker>Become a partner</Kicker>
        <h2 className="aevsite-h2">For health professionals, clinics, medspas &amp; resellers.</h2>
        <p className="muted">Professional and business members enter through the same free Club membership. Aevitan records your information and declaration; it does not approve or verify your professional or business status as a membership condition.</p>
        <div className="aevsite-flow">
          {flow.map(([t, d]) => (
            <div key={t} className="aevsite-fstep"><b>{t}</b><span className="muted">{d}</span></div>
          ))}
        </div>
        <div className="aevsite-form">
          <Card>
            <div className="aevsite-form__title">Start your membership</div>
            <p className="muted">Complete the common signup now. Persona-specific information and the separate declaration are completed securely inside your member account.</p>
            <Button variant="primary" block style={{ marginTop: 18 }} onClick={() => { window.location.href = PORTAL_URL_PARTNER + '/signup?persona=hcp'; }}>Join the Longevity Club</Button>
            <p className="muted aevsite-form__fine">A particular product or transaction may still require current documentation under the rules that apply to it.</p>
          </Card>
        </div>
      </div>
    </section>
  );
}

window.Store = Store;
window.Partner = Partner;