const hbV2Styles = {
  wrap: { padding: '120px 0', background: 'var(--paper)', position: 'relative' },
  bgTint: { position: 'absolute', top: 0, left: 0, right: 0, height: 380, background: 'linear-gradient(180deg, var(--helpbnk-tint) 0%, var(--paper) 100%)', zIndex: 0, pointerEvents: 'none' },

  head: { textAlign: 'center', maxWidth: 880, margin: '0 auto 64px', paddingBottom: 32, borderBottom: '1px solid var(--line)', position: 'relative', zIndex: 1 },
  brandRow: { display: 'inline-flex', alignItems: 'center', gap: 14, marginBottom: 26 },
  brandMark: { width: 48, height: 48, objectFit: 'contain', display: 'block' },
  brandWordmark: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 32, color: 'var(--ink)', letterSpacing: '-0.03em', lineHeight: 1 },
  chapterLabel: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--helpbnk-1)', marginBottom: 18 },
  chapter: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(48px, 7vw, 96px)', lineHeight: 1.0, color: 'var(--ink)', letterSpacing: '-0.035em' },
  highlight: { background: 'var(--helpbnk-1)', color: '#fff', padding: '0 10px', boxDecorationBreak: 'clone', WebkitBoxDecorationBreak: 'clone', borderRadius: 4 },
  dek: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 'clamp(18px, 2vw, 22px)', lineHeight: 1.5, color: 'var(--ink-soft)', marginTop: 24, maxWidth: 720, marginLeft: 'auto', marginRight: 'auto' },

  spread: { display: 'grid', gridTemplateColumns: '1fr 440px', gap: 56, alignItems: 'flex-start', position: 'relative', zIndex: 1 },
  body: { fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.7 },
  lead: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 600, fontSize: 22, color: 'var(--ink)', lineHeight: 1.45, marginBottom: 18, letterSpacing: '-0.015em' },
  pullquote: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(28px, 3.4vw, 42px)', lineHeight: 1.15, color: 'var(--ink)', letterSpacing: '-0.03em', padding: '28px 32px', margin: '36px 0', background: 'var(--helpbnk-tint)', borderRadius: 18, borderLeft: '4px solid var(--helpbnk-1)' },
  pullquoteEm: { color: 'var(--helpbnk-1)' },
  pullquoteAttrib: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--ink-soft)', marginTop: 14, opacity: 0.75 },

  phoneCol: { position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18 },

  whatsNew: { marginTop: 80, paddingTop: 40, borderTop: '1px solid var(--line)', position: 'relative', zIndex: 1 },
  whatsTitle: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--muted)', marginBottom: 28 },
  features: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 },
  feat: { padding: 22, background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 14, transition: 'border-color .2s ease' },
  featNum: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 22, color: 'var(--helpbnk-1)', marginBottom: 8, letterSpacing: '-0.02em' },
  featTitle: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 15, fontWeight: 700, color: 'var(--ink)', marginBottom: 8, letterSpacing: '-0.02em' },
  featBody: { fontSize: 13, color: 'var(--muted)', lineHeight: 1.55 },
};

function HelpBnkV2() {
  return (
    <section id="helpbnk" style={hbV2Styles.wrap}>
      <div style={hbV2Styles.bgTint}></div>
      <div className="container">
        <div style={hbV2Styles.head}>
          <div style={hbV2Styles.brandRow}>
            <img src="assets/helpbnk-mark.png" alt="HelpBnk" style={hbV2Styles.brandMark} />
            <span style={hbV2Styles.brandWordmark}>HelpBnk</span>
          </div>
          <div style={hbV2Styles.chapterLabel}>● Up close · the platform Dream is building first</div>
          <h2 style={hbV2Styles.chapter}>Your companion for <span style={hbV2Styles.highlight}>building a business.</span></h2>
          <p style={hbV2Styles.dek}>
            The tools, the community and the education to start and grow your business, all in one place, all free.
          </p>
        </div>

        <div style={hbV2Styles.spread} className="hb-spread">
          <div>
            <p style={hbV2Styles.lead}>
              HelpBnk is where you actually build your business, not just think about it. From your first idea to your hundredth customer, you get the tools to build, a global community to lean on, the education to know your next move, and live accelerators that take you from idea to first sale. Push a button and get help. Push a button and give it.
            </p>

            <div style={hbV2Styles.pullquote}>
              "You have a dream, you get help to make it happen. You've made your dream happen, so you <span style={hbV2Styles.pullquoteEm}>help the people</span> who want to make theirs."
              <div style={hbV2Styles.pullquoteAttrib}>- Simon Squibb, co-founder of HelpBnk</div>
            </div>

            <p style={hbV2Styles.body}>
              The mission is bigger than advice: a community of people who believe every dream is possible. HelpBnk gathers the world's business knowledge and gives it away free, so anyone can turn an idea into a business, whatever their background, money or network.
            </p>

            <p style={{ ...hbV2Styles.body, marginTop: 14 }}>
              Free to join, free to use, free forever.
            </p>
          </div>

          <div style={hbV2Styles.phoneCol}>
            <a href="https://helpbnk.com" target="_blank" rel="noopener" className="hb-phone-link" aria-label="Visit helpbnk.com" style={{
              display: 'block', textDecoration: 'none', cursor: 'pointer',
              width: 'min(390px, 86vw)', aspectRatio: '390 / 844',
              borderRadius: 'clamp(38px, 13vw, 54px)', overflow: 'hidden', position: 'relative', background: '#000',
              boxShadow: '0 30px 70px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.12), inset 0 0 0 8px #0B0F18',
            }}>
              <img src="assets/helpbnk-app-feed.png" alt="HelpBnk app feed" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              <div style={{ position: 'absolute', top: '1.3%', left: '50%', transform: 'translateX(-50%)', width: '31.3%', height: '4%', borderRadius: 24, background: '#000', zIndex: 50 }} />
              <div style={{ position: 'absolute', bottom: '1.1%', left: '50%', transform: 'translateX(-50%)', width: '34.4%', height: '0.6%', borderRadius: 100, background: 'rgba(0,0,0,.28)', zIndex: 60, pointerEvents: 'none' }} />
            </a>
            <a href="https://helpbnk.com" target="_blank" rel="noopener" className="btn" style={{ background: 'var(--helpbnk-1)', color: '#fff', marginTop: 8 }}>Visit helpbnk.com →</a>
          </div>
        </div>

        <div style={hbV2Styles.whatsNew}>
          <div style={hbV2Styles.whatsTitle}>● What you get on HelpBnk</div>
          <div style={hbV2Styles.features} className="hb-feats">
            <div style={hbV2Styles.feat}>
              <div style={hbV2Styles.featNum}>01</div>
              <div style={hbV2Styles.featTitle}>Free mentorship &amp; tools</div>
              <div style={hbV2Styles.featBody}>Real mentorship from experienced entrepreneurs, plus the tools you actually need to build. The world's business knowledge, given away free.</div>
            </div>
            <div style={hbV2Styles.feat}>
              <div style={hbV2Styles.featNum}>02</div>
              <div style={hbV2Styles.featTitle}>Live free accelerators</div>
              <div style={hbV2Styles.featBody}>Free, live accelerators that give you the knowledge and community to win your first customers. Idea to first sale, with help the whole way.</div>
            </div>
            <div style={hbV2Styles.feat}>
              <div style={hbV2Styles.featNum}>03</div>
              <div style={hbV2Styles.featTitle}>Community &amp; Q&amp;A</div>
              <div style={hbV2Styles.featBody}>Ask a business question and get answers from a global community of founders, experienced entrepreneurs and HelpBnk AI.</div>
            </div>
            <div style={hbV2Styles.feat}>
              <div style={hbV2Styles.featNum}>04</div>
              <div style={hbV2Styles.featTitle}>Events &amp; connections</div>
              <div style={hbV2Styles.featBody}>Online and in-person events that put you in a room with other founders and mentors, so you can learn from people who've actually done it.</div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .hb-phone-link { transition: transform .2s ease; }
        .hb-phone-link:hover { transform: translateY(-4px); }
        /* On touch / narrow screens, disable the whole-mock tap target so it doesn't fight scrolling. The "Visit helpbnk.com" button below still works */
        @media (max-width: 1100px) {
          .hb-spread { grid-template-columns: 1fr !important; gap: 48px !important; }
          .hb-feats { grid-template-columns: 1fr 1fr !important; }
          .hb-phone-link { pointer-events: none !important; }
          .hb-phone-link:hover { transform: none !important; }
        }
        @media (max-width: 520px) {
          .hb-feats { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}