/* ===== Sibol app promo ===== */
const SIBOL_PLAY_URL = 'https://play.google.com/store/apps/details?id=com.healspace.sibol&pcampaignid=web_share';

function SibolBar() {
  const [open, setOpen] = React.useState(true);
  if (!open) return null;
  const go = (e) => { e.preventDefault(); const el = document.querySelector('#app'); if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: 'smooth' }); };
  return (
    <div style={{ background: 'var(--hs-teal)', color: '#fff', fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 500 }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '10px 32px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, position: 'relative', flexWrap: 'wrap', textAlign: 'center' }}>
        <span style={{ background: 'var(--hs-sprout)', color: 'var(--hs-teal)', fontWeight: 700, fontSize: 11, letterSpacing: '.12em', padding: '4px 10px', borderRadius: 'var(--r-pill)' }}>NEW</span>
        <span>Sibol, the HealSpace app, is now on Google Play. Coming soon to the App Store.</span>
        <a href="#app" onClick={go} style={{ color: 'var(--hs-gold)', fontWeight: 600, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 4 }}>Learn more <Icon name="arrow-right" size={15} /></a>
        <button onClick={() => setOpen(false)} aria-label="Dismiss" style={{ position: 'absolute', right: 20, background: 'none', border: 0, color: 'rgba(255,255,255,.7)', cursor: 'pointer', display: 'flex' }}><Icon name="x" size={18} /></button>
      </div>
    </div>
  );
}

function SibolApp() {
  const features = [
    ['smile', 'Daily mood check-in', 'One tap to capture how you truly feel. No long forms, no judgment.'],
    ['wind', 'A small activity for the day', 'A breathing exercise, a journal prompt, or a moment of gratitude.'],
    ['sprout', 'A growing companion', 'A little plant that grows when you show up. Miss a day and it simply rests.'],
    ['lock', 'A private journal', 'Your reflections, encrypted and stored on your phone only.'],
  ];
  const shot = (n, st) => (
    <img src={window.asset('./assets/sibol/s' + n + '.jpg')} alt={'Sibol app screen ' + n}
      style={{ position: 'absolute', width: 200, height: 'auto', borderRadius: 26, border: '6px solid #fff', boxShadow: 'var(--shadow-lg)', ...st }} />
  );
  return (
    <Section id="app" style={{ padding: '40px 0 24px' }}>
      <div className="hs-app-grid" style={{ position: 'relative', overflow: 'hidden', background: 'var(--hs-sprout-soft)', borderRadius: 'var(--r-xl)', padding: '52px 52px', display: 'grid', gridTemplateColumns: '1.2fr .8fr', gap: 40, alignItems: 'center' }}>
        <Confetti items={[
          { type: 'sq', x: '92%', y: 22, c: 'var(--hs-sky)', r: 10 },
          { type: 'dot', x: '96%', y: 110, c: 'var(--hs-gold)', s: 10 },
          { type: 'dash', x: '2%', y: '92%', c: 'var(--hs-coral)', r: -20 },
        ]} />
        <div style={{ position: 'relative', zIndex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
            <img src={window.asset('./assets/sibol/icon.png')} alt="Sibol app icon" style={{ width: 56, height: 56, borderRadius: 14, boxShadow: 'var(--shadow-sm)' }} />
            <div>
              <Eyebrow color="var(--hs-sprout-deep)">New · The Sibol app</Eyebrow>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--hs-ink-2)', marginTop: 3 }}>Sibol: Mental Wellness · by HealSpace</div>
            </div>
          </div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(28px,3vw,40px)', color: 'var(--hs-teal)', margin: '0 0 12px', lineHeight: 1.12 }}>Keep growing between sessions</h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: 'var(--hs-ink-2)', margin: '0 0 24px', maxWidth: 520 }}>
            Your daily companion for mental wellness, designed for Filipinos by HealSpace. A gentle two-minute ritual that keeps you company between the hard days, and stands beside your therapist when you have one.
          </p>
          <div className="hs-app-feats" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px 22px', marginBottom: 22 }}>
            {features.map(([ic, t, d]) => (
              <div key={t} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <div style={{ width: 36, height: 36, flex: '0 0 auto', borderRadius: 'var(--r-sm)', background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={ic} size={18} color="var(--hs-sprout-deep)" /></div>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, color: 'var(--hs-teal)' }}>{t}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.45, color: 'var(--hs-ink-2)', marginTop: 2 }}>{d}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 24 }}>
            {[['shield-check', 'No account, no cloud'], ['wifi-off', 'Works offline'], ['phone', 'Crisis hotlines built in']].map(([ic, t]) => (
              <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 12.5, color: 'var(--hs-teal)', background: '#fff', padding: '6px 12px', borderRadius: 'var(--r-pill)' }}><Icon name={ic} size={14} color="var(--hs-sprout-deep)" />{t}</span>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
            <a href={SIBOL_PLAY_URL} target="_blank" rel="noopener" aria-label="Get Sibol on Google Play" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, height: 56, padding: '0 20px 0 16px', borderRadius: 12, background: 'var(--hs-teal)', color: '#fff', textDecoration: 'none', boxSizing: 'border-box', boxShadow: 'var(--shadow-md)' }}>
              <img src={window.asset('./assets/badges/google-play-logo.svg')} alt="" style={{ height: 26, width: 'auto' }} />
              <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1 }}>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 600, letterSpacing: '.02em' }}>Get it on</span>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 600 }}>Google Play</span>
              </span>
            </a>
            <span aria-label="Coming soon to the App Store" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, height: 56, padding: '0 20px 0 16px', borderRadius: 12, border: '1.5px dashed var(--hs-teal)', background: 'rgba(255,255,255,.7)', color: 'var(--hs-teal)', boxSizing: 'border-box' }}>
              <img src={window.asset('./assets/badges/apple-logo.svg')} alt="" style={{ height: 26, width: 'auto' }} />
              <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1 }}>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 600, letterSpacing: '.02em' }}>Coming soon to the</span>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 600 }}>App Store</span>
              </span>
            </span>
          </div>
          <div style={{ marginTop: 18, maxWidth: 460 }}>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--hs-ink-2)', marginBottom: 10 }}><b style={{ color: 'var(--hs-teal)' }}>On iPhone?</b> Message us and we’ll let you know when Sibol launches on the App Store.</div>
            <Btn kind="warm" icon="message-circle" onClick={() => window.open('https://m.me/healspacelipa', '_blank', 'noopener')}>Message us on Facebook</Btn>
          </div>
        </div>
        <div className="hs-app-shots" style={{ position: 'relative', zIndex: 1, height: 520 }}>
          {shot(3, { left: '0%', top: 60, transform: 'rotate(-6deg)', width: 180, opacity: .96 })}
          {shot(4, { right: '0%', top: 60, transform: 'rotate(6deg)', width: 180, opacity: .96 })}
          {shot(1, { left: '50%', top: 0, transform: 'translateX(-50%)', zIndex: 2 })}
        </div>
      </div>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--hs-ink-3)', textAlign: 'center', margin: '14px auto 0', maxWidth: 720 }}>Sibol is a wellness companion, not a replacement for therapy, a medical device, or an emergency service. If you are in crisis, please contact a Philippine crisis hotline or 911. <a href="./sibolapp-privacypolicy/" style={{ color: 'var(--hs-teal)', fontWeight: 600, textDecoration: 'underline', textUnderlineOffset: 3 }}>Privacy policy</a></p>
    </Section>
  );
}
Object.assign(window, { SibolBar, SibolApp });