// B.A. Yogi — Sales site, offer sections (Offer, Testimonials, Guarantee, CTA, Footer, Modal)
const DSo = window.BAYogiDesignSystem_8dba86;
const { Button: Btn, Eyebrow: Eo, Badge: Bo, Divider: Dvo, PriceCard, Input: Inp } = DSo;
const ASSET_O = '../../assets';

function Offer({ onEnroll }) {
  const sec = { background: 'var(--surface-sand)', padding: '110px 40px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '44px' };
  const head = { textAlign: 'center', maxWidth: '660px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '16px' };
  const h2 = { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(30px,4.4vw,48px)', lineHeight: 1.08, color: 'var(--text-strong)', margin: 0 };
  const intro = { fontFamily: 'var(--font-body)', fontSize: '19px', lineHeight: 1.6, color: 'var(--text-muted)', margin: 0 };
  const layout = { display: 'grid', gridTemplateColumns: 'minmax(0,1.05fr) minmax(0,0.95fr)', gap: '34px', maxWidth: '980px', width: '100%', alignItems: 'start' };
  const stack = { background: 'var(--surface-card)', borderRadius: 'var(--radius-lg)', padding: '32px', boxShadow: 'var(--shadow-sm)', border: '1px solid var(--line-hairline)' };
  const stackTitle = { fontFamily: 'var(--font-label)', fontWeight: 500, fontSize: '12px', letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--text-gold)', margin: '0 0 18px' };
  const row = { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: '16px', padding: '14px 0', borderBottom: '1px solid var(--line-hairline)' };
  const rowLabel = { fontFamily: 'var(--font-body)', fontSize: '16px', color: 'var(--text-body)', lineHeight: 1.4 };
  const rowVal = { fontFamily: 'var(--font-body)', fontSize: '17px', fontWeight: 600, color: 'var(--text-strong)', whiteSpace: 'nowrap' };
  const totalRow = { ...row, borderBottom: 'none', paddingTop: '18px' };
  const stackItems = [
    ['One-year college-certified B.A. Yogi training', '$12,000'],
    ['Founding bonus: 21 days Tulum food & lodging', '$3,000'],
  ];
  return (
    <section style={sec} id="offer">
      <div style={head}>
        <Eo ruled align="center">The founding cohort</Eo>
        <h2 style={h2}>One transformational year</h2>
        <p style={intro}>Where others give a 200-hour weekend cert with no college standing, you get 500 hours, real accreditation, and a degree pathway.</p>
      </div>
      <div style={layout} className="offer-layout">
        <div style={stack}>
          <p style={stackTitle}>Everything included</p>
          {stackItems.map(([l, v]) => (
            <div style={row} key={l}><span style={rowLabel}>{l}</span><span style={rowVal}>{v}</span></div>
          ))}
          <div style={totalRow}>
            <span style={{ ...rowLabel, fontWeight: 600, color: 'var(--text-strong)' }}>Total offer value</span>
            <span style={{ ...rowVal, fontSize: '22px' }}>$15,000</span>
          </div>
          <Dvo variant="plain" />
          <p style={{ fontFamily: 'var(--font-body)', fontSize: '15px', lineHeight: 1.6, color: 'var(--text-muted)', margin: '18px 0 0' }}>
            Not included: flights, local transportation, books, excursions, and personal expenses.
          </p>
        </div>
        <PriceCard
          featured
          eyebrow="Founding Beta Enrollment"
          price="$5,497"
          strikePrice="$15,000"
          priceNote="Save $9,503 · Pay in full $4,997 · 3x $1,888 · 6x $1,008"
          badge="65% Off"
          ctaLabel="See If It's a Fit"
          features={[
            'Full year of structured online training',
            'Regular live online calls',
            '21-day Tulum immersion (Ashtanga · Bhakti · Kirtan)',
            '30 FVC credits · 1,320 hours · 500-hr eligible',
          ]}
        />
      </div>
    </section>
  );
}

function Testimonials() {
  const sec = { background: 'var(--surface-forest)', padding: '104px 40px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '40px' };
  const head = { textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '12px' };
  const h2 = { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(28px,4vw,44px)', color: 'var(--paper-50)', margin: 0 };
  const grid = { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '22px', maxWidth: '1080px', width: '100%' };
  const card = { background: 'rgba(246,238,222,0.06)', border: '1px solid rgba(238,217,154,0.2)', borderRadius: 'var(--radius-lg)', padding: '30px 28px', display: 'flex', flexDirection: 'column', gap: '16px' };
  const q = { fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400, fontSize: '21px', lineHeight: 1.4, color: 'var(--paper-50)', margin: 0 };
  const who = { fontFamily: 'var(--font-label)', fontSize: '11px', letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--gold-400)' };
  const quotes = [
    'This training gave me confidence and grounded me in real knowledge. It humbled me, then handed me a daily practice I actually keep.',
    'I had practiced for years and quietly felt like a fraud. Now I teach with authority and I know exactly why I am doing what I do.',
    'The Ashtanga rigor is the real thing, and the bhakti side fed a part of me nothing else had reached. Tulum was the best three weeks of my life.',
  ];
  return (
    <section style={sec}>
      <div style={head}>
        <Eo ruled align="center" tone="light">In their words</Eo>
        <h2 style={h2}>What graduates carry home</h2>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--sage-200)', fontStyle: 'italic' }}>Founding-cohort testimonials coming soon. Sample voice shown.</span>
      </div>
      <div style={grid}>
        {quotes.map((c, i) => (
          <div key={i} style={card}>
            <span style={{ color: 'var(--gold-400)', fontFamily: 'var(--font-display)', fontSize: '40px', lineHeight: 0.6, height: '18px' }}>&ldquo;</span>
            <p style={q}>{c}</p>
            <span style={who}>Founding Member</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function Guarantee({ onEnroll }) {
  const sec = { background: 'var(--surface-page)', padding: '108px 24px', display: 'flex', justifyContent: 'center' };
  const inner = { maxWidth: '700px', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '22px' };
  const h2 = { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(30px,4.4vw,46px)', lineHeight: 1.1, color: 'var(--text-strong)', margin: 0 };
  const p = { fontFamily: 'var(--font-body)', fontSize: '19px', lineHeight: 1.62, color: 'var(--text-body)', margin: 0 };
  const pm = { fontFamily: 'var(--font-body)', fontSize: '19px', lineHeight: 1.62, color: 'var(--text-muted)', margin: 0 };
  const gold = { fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 'clamp(21px,2.8vw,30px)', lineHeight: 1.35, color: 'var(--text-gold)', margin: 0 };
  return (
    <section style={sec}>
      <div style={inner}>
        <Eo ruled align="center">You could lose this opportunity</Eo>
        <h2 style={h2}>Why is an $18,682 training for $5,497?</h2>
        <p style={p}>Because this is the founding cohort...</p>
        <p style={pm}>...the very first group to do the full B.A. Yogi, Certified Yoga Teacher (Sādhaka Level).</p>
        <p style={p}>We only accepting a small and personal committed circle who'll go through this with us.</p>
        <p style={pm}>This limited group size gives us the space shape the program to exactly what is best for you.</p>
        <p style={p}>Your feedback shapes the final version.</p>
        <p style={p}>Your story becomes one of our first full testimonials...</p>
        <p style={pm}>...and some of you will go on to teach this very program.</p>
        <p style={p}>In return, for helping us build this.</p>
        <p style={p}>You get an enormous amount personal attention and guidance.</p>
        <p style={p}>Enabling you master the practice faster.</p>
        <p style={gold}>This trade only happens once.</p>
        <p style={p}>Plus.</p>
        <p style={p}>You get over $13,000 off, more than 70%.</p>
        <p style={pm}>This discount shrinks with every seat that fills...</p>
        <p style={pm}>...and the opportunity to join will disappear as soon as we are full.</p>
        <p style={p}>The paid-in-full early-bird price is only here this month.</p>
        <p style={pm}>So given that this is a fleeting opportunity....</p>
        <p style={gold}>Would it be a terrible idea to lock in your founding member seat &amp; discount before it&rsquo;s too late?</p>
        <Btn variant="onDark" size="lg" onClick={onEnroll} style={{ marginTop: '8px', fontSize: '16px', padding: '26px 72px', letterSpacing: '0.18em' }}>See If It's a Fit</Btn>
      </div>
    </section>
  );
}

function RiskAndGuarantee() {
  const sec = { background: 'var(--surface-dark)', padding: '110px 24px', display: 'flex', justifyContent: 'center' };
  const inner = { maxWidth: '660px', width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px', textAlign: 'center' };
  const p = { fontFamily: 'var(--font-body)', fontSize: '19px', lineHeight: 1.62, color: 'var(--paper-100)', margin: 0 };
  const pm = { fontFamily: 'var(--font-body)', fontSize: '19px', lineHeight: 1.62, color: 'var(--clay-300)', margin: 0 };
  const h2 = { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(30px,4.4vw,46px)', lineHeight: 1.1, color: 'var(--paper-50)', margin: 0 };
  const h3 = { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(26px,3.6vw,38px)', lineHeight: 1.1, color: 'var(--paper-50)', margin: 0 };
  const gold = { fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 'clamp(19px,2.4vw,26px)', lineHeight: 1.35, color: 'var(--gold-400)', margin: 0 };
  const bullets = ['health', 'vitality', 'mind', 'time', 'peace'];

  return (
    <section style={sec}>
      <div style={inner}>
        <Eo ruled align="center" tone="light">The biggest risk</Eo>
        <h2 style={h2}>The biggest risk is not taking action.</h2>

        <p style={pm}>Every day lived out of tune with your higher purpose is a day that cannot be redeemed.</p>
        <p style={p}>It is gone for good.</p>

        <p style={p}>You are either growing or dying.</p>
        <p style={pm}>On the upward spiral, or the downward one.</p>

        <p style={p}>What no one tells you is that it compounds.</p>
        <p style={pm}>Every step toward growth makes the next one richer and easier.</p>
        <p style={pm}>Every step toward stagnation hardens the body, dulls the mind, and makes the climb back that much steeper.</p>

        <p style={p}>Procrastination speeds up the very things yoga exists to heal.</p>

        <p style={pm}>The body ages.</p>
        <p style={pm}>The mind stiffens.</p>
        <p style={pm}>The heart grows hard.</p>
        <p style={pm}>Life loses its meaning.</p>

        <p style={p}>Money is the one thing here that comes back.</p>
        <p style={pm}>It comes and goes, it is spent and replenished again.</p>

        <p style={p}>Your time spent in substandard: health, vitality, mind, time, peace.</p>
        <p style={gold}>That does not return.</p>

        <Dvo variant="ornament" style={{ margin: '18px 0' }} />

        <Eo ruled align="center" tone="light">Our ironclad guarantee</Eo>
        <h3 style={h3}>We are confident enough to put it in writing.</h3>

        <p style={pm}>Take the full year. Do the quizzes, the tests, the practice. Follow it all, sincerely.</p>
        <p style={p}>If at the end you don&rsquo;t feel this was the finest yoga teacher training and the most transformative year of your life, contact us.</p>
        <p style={gold}>No questions asked. We return your money in full.</p>
        <p style={pm}>Including what you paid for your food and accommodation at the 21-day Tulum immersion.</p>
      </div>
    </section>
  );
}

function FAQ({ onEnroll }) {
  const faqs = [
    { q: 'Is this for me if I\u2019m already an advanced practitioner?', a: 'Yes. This goes to a genuinely high level, with the depth, meaning, and purpose most trainings never reach. Even practitioners with decades on the mat find new ground here. You\u2019ll be met at your level and taken further.' },
    { q: 'Is this for me if I\u2019m closer to a beginner?', a: 'Also yes. We start from the very beginning and hold your hand step by step along the way. If you bring a dedicated heart, you can do this. The small cohort exists precisely so no one gets left behind.' },
    { q: 'I\u2019ve practiced for years and still feel stuck. Why would this be any different?', a: 'Because you were almost certainly handed fragments, not the whole system. The B.A. Yogi System is built to close exactly that gap: the body through Ashtanga, the spirit through Bhakti, in the right order, taught by people who live it. Most people in your position aren\u2019t short on effort. They\u2019re short on a complete map.' },
    { q: 'Do I need to be flexible or strong already?', a: 'No. Flexibility and strength are results of the practice, not requirements to start it. We teach the alignment and adjustments that meet your body exactly where it is today.' },
    { q: 'I\u2019m not sure I have the discipline. What if I fall off like I have before?', a: 'That\u2019s the most common fear we hear, and the program is designed around it. You\u2019re not white-knuckling this alone. You get structure, live guidance, a small accountable group, and, as a founding member, lifetime access, so the practice has something to hold onto when motivation dips. The discipline lives in the container, not only on your shoulders.' },
    { q: 'How much time does this take? Will I actually be able to keep up?', a: 'The program is designed to be a life companion for someone with a busy work and life schedule. As a founding-cohort member you get lifetime access to the full year of materials, so you move at your own pace. Binge a stretch when life allows, ease off when it doesn\u2019t, and come back whenever you like. Later cohorts won\u2019t get this. The pressure to keep up simply isn\u2019t built into your experience.' },
    { q: 'What if the Tulum dates don\u2019t work for me?', a: 'The main training is online, so the immersion is flexible. You can attend a different year, or take it one week at a time: the first week one year, the next week another year, dividing the three weeks however suits your life. You go at your own pace here too.' },
    { q: 'What exactly is Ashtanga Yoga, and why Ashtanga over other styles?', a: 'Ashtanga is the rigorous, traditional, Mysore-style system in the direct lineage of K. Pattabhi Jois. It\u2019s the master system that most modern flowing styles were drawn from. Learn it properly and you can practice and teach virtually any style, because you understand the source. It\u2019s also what makes a yogi visibly, capably embodied.' },
    { q: 'Why Bhakti for the spiritual side, and why Kirtan?', a: 'Ashtanga builds the body. Bhakti feeds the heart. Bhakti is a lived devotional path that gives you a personal spiritual connection, a daily sadhana, and a framework that makes sense of the whole journey, instead of vague concepts. Kirtan is how that devotion becomes sound and community: chanting you can actually join and lead, which is one of the fastest ways people drop into real connection.' },
    { q: 'Is this a cult? Is it too religious?', a: 'No. This is authentic tradition, not coercion. Vishnu Swami was raised in both East and West precisely so he can separate cultural costume from essential spiritual truth. You keep your autonomy, your questions, and your own pace. We teach the practice and the philosophy. What you do with them is yours.' },
    { q: 'How do I know the teachers are actually legit?', a: 'Because the lineage is verifiable. Jayson trained directly under Tim Miller, the first Westerner certified by Pattabhi Jois, and helped certify 500 Ashtanga yogis. Vishnu Swami has been a monk for 30 years and is the youngest Gaudiya swami in the world. The program is certified through Florida Vedic College, official since 1989. This is not a self-appointed weekend guru.' },
    { q: 'It\u2019s the first cohort. Should I wait for something more established?', a: 'The founding cohort is the one time you get the deepest enrollment, the included Tulum food and lodging, lifetime access, and the most direct, personal attention the teachers will ever give. Waiting costs you all of that. And the teachers themselves are not new. They have decades of experience guiding people through exactly this material.' },
    { q: 'What about food and dietary needs?', a: 'Meals are vegetarian and vegan friendly, with conscious attention to protein and the nutrients a yogic lifestyle needs. We avoid seed oils and minimize chemicals and microplastics where we can, with gluten-free options available. Eggs are available if you want them, and you\u2019re welcome to bring your own protein powder.' },
    { q: 'Is it worth the investment?', a: 'This is a lifelong skill set and a real credential, not a weekend you forget. It\u2019s deeply discounted for the founding cohort, and payment plans are available if that helps you structure it. Weigh it against the real cost of staying where you are for another year. Money replenishes. The years spent overlooked and unsure do not.' },
    { q: 'What will I actually be able to do when I finish?', a: 'Teach and lead with real authority, hold a self-led daily practice, move into advanced asanas, guide kirtan, and carry a college-certified, RYT 500-eligible, half of an associate\u2019s degree, degree-track credential that others cannot fake. You walk out an embodied, confident yogi with a clear path to keep growing.' },
  ];

  const [openIdx, setOpenIdx] = React.useState(null);
  const toggle = (i) => setOpenIdx(openIdx === i ? null : i);

  const sec = { background: 'var(--surface-page)', padding: '108px 24px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '44px' };
  const head = { textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '14px' };
  const h2 = { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(30px,4.2vw,46px)', lineHeight: 1.1, color: 'var(--text-strong)', margin: 0 };
  const list = { width: '100%', maxWidth: '780px', display: 'flex', flexDirection: 'column' };
  const itemStyle = (i) => ({ borderTop: i === 0 ? '1px solid var(--line-hairline)' : 'none', borderBottom: '1px solid var(--line-hairline)' });
  const btnStyle = { width: '100%', background: 'none', border: 'none', cursor: 'pointer', display: 'grid', gridTemplateColumns: '1fr 28px', gap: '16px', alignItems: 'center', padding: '22px 0', textAlign: 'left' };
  const qStyle = { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(17px,2vw,21px)', lineHeight: 1.3, color: 'var(--text-strong)', margin: 0 };
  const answerStyle = { fontFamily: 'var(--font-body)', fontSize: '17px', lineHeight: 1.65, color: 'var(--text-body)', padding: '0 28px 24px 0', margin: 0 };

  return (
    <section style={sec}>
      <div style={head}>
        <Eo ruled align="center">Frequently asked questions</Eo>
        <h2 style={h2}>Questions &amp; answers</h2>
      </div>
      <div style={list}>
        {faqs.map((f, i) => (
          <div key={i} style={itemStyle(i)}>
            <button style={btnStyle} onClick={() => toggle(i)} aria-expanded={openIdx === i}>
              <span style={qStyle}>{f.q}</span>
              <span style={{ color: 'var(--text-gold)', fontSize: '20px', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'transform 220ms ease', transform: openIdx === i ? 'rotate(180deg)' : 'rotate(0deg)' }}>&#8964;</span>
            </button>
            {openIdx === i && <p style={answerStyle}>{f.a}</p>}
          </div>
        ))}
      </div>
      <Btn variant="onDark" size="lg" onClick={onEnroll} style={{ fontSize: '16px', padding: '26px 72px', letterSpacing: '0.18em' }}>See If It&rsquo;s a Fit</Btn>
    </section>
  );
}

function FinalCTA({ onEnroll }) {
  const sec = { position: 'relative', padding: '80px 24px', display: 'flex', justifyContent: 'center', textAlign: 'center', overflow: 'hidden' };
  const bg = { position: 'absolute', inset: 0, backgroundImage: `url(${ASSET_O}/img-hero-photo.jpg)`, backgroundSize: 'cover', backgroundPosition: 'center 22%' };
  const scrim = { position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(42,27,16,0.72), rgba(42,27,16,0.62))' };
  const inner = { position: 'relative', maxWidth: '700px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '24px' };
  const h2 = { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(28px,4.4vw,52px)', lineHeight: 1.1, color: 'var(--paper-50)', margin: 0 };
  const p = { fontFamily: 'var(--font-body)', fontSize: '19px', lineHeight: 1.62, color: 'var(--paper-100)', margin: 0 };
  const pm = { fontFamily: 'var(--font-body)', fontSize: '17px', lineHeight: 1.55, color: 'var(--paper-100)', margin: 0, opacity: 0.75 };
  return (
    <section style={sec}>
      <div style={bg} />
      <div style={scrim} />
      <div style={inner}>
        <h2 style={h2}>Is it a terrible idea to see if this program is right for you?</h2>
        <p style={p}>Click the &ldquo;See if it&rsquo;s a fit&rdquo; button below if you&rsquo;re not opposed to considering joining the founding cohort of the B.A. Yogi Certified Yoga Teacher (S&#257;dhaka Level) Program.</p>
        <Btn variant="onDark" size="lg" onClick={onEnroll}>See If It&rsquo;s a Fit</Btn>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', maxWidth: '580px' }}>
          <p style={pm}>The opportunity to join this program could close at any moment, and with it, your opportunity to become a fully embodied yogi.</p>
          <p style={pm}>If your heart has been pulling you toward the real thing for years.</p>
          <p style={pm}>And you value authentic, ancient yogic training at the highest level.</p>
          <p style={pm}>If you wish to ignite love, beauty, wisdom, and freedom within yourself and the world.</p>
          <p style={pm}>We humbly suggest you don&rsquo;t lose this once-in-a-lifetime opportunity.</p>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const f = { background: 'var(--surface-dark)', padding: '54px 40px 40px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px' };
  const mark = { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: '46px', color: 'var(--paper-50)', letterSpacing: '0.01em', lineHeight: 1 };
  const tag = { fontFamily: 'var(--font-label)', fontSize: '11px', letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--gold-400)' };
  const small = { fontFamily: 'var(--font-body)', fontSize: '13px', color: 'var(--clay-300)', textAlign: 'center', maxWidth: '540px', lineHeight: 1.6 };
  return (
    <footer style={f}>
      <div style={mark}>B<span style={{ color: 'var(--gold-400)' }}>.</span>A<span style={{ color: 'var(--gold-400)' }}>.</span> Yogi</div>
      <p style={tag}>Bhakti · Ashtanga · Yoga · Institute</p>
      <Dvo variant="center" />
      <p style={small}>In partnership with Florida Vedic College, an official Florida college since 1989. College-certified, bachelor's-track Ashtanga-Bhakti Yoga Teacher Training.</p>
      <p style={{ ...small, color: 'var(--brown-500)' }}>© 2026 Bhakti Ashtanga Yoga Institute. All rights reserved.</p>
    </footer>
  );
}

function NativeTextarea({ label, id, placeholder, required, value, onChange }) {
  const [focused, setFocused] = React.useState(false);
  const lab = { fontFamily: 'var(--font-label)', fontWeight: 500, fontSize: 'var(--label-sm)', letterSpacing: 'var(--tracking-label-sm)', textTransform: 'uppercase', color: 'var(--text-muted)', display: 'block', marginBottom: '8px' };
  const field = { fontFamily: 'var(--font-body)', fontSize: 'var(--text-md)', color: 'var(--text-body)', background: 'var(--paper-50)', border: `1px solid ${focused ? 'var(--gold-600)' : 'var(--line-soft)'}`, borderRadius: 'var(--radius-sm)', padding: '13px 16px', outline: 'none', boxShadow: focused ? '0 0 0 3px var(--focus-ring)' : 'none', transition: 'border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft)', width: '100%', resize: 'vertical', minHeight: '100px', boxSizing: 'border-box' };
  return (
    <label htmlFor={id} style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
      <span style={lab}>{label}{required && <span style={{ color: 'var(--gold-600)' }}> *</span>}</span>
      <textarea id={id} placeholder={placeholder} required={required} value={value} onChange={onChange} rows={4} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} style={field} />
    </label>
  );
}

function EnrollModal({ open, onClose }) {
  if (!open) return null;
  const overlay = { position: 'fixed', inset: 0, zIndex: 100, background: 'var(--overlay-warm)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px', animation: 'fadeIn 240ms var(--ease-soft)' };
  const modal = { background: 'var(--surface-page)', borderRadius: 'var(--radius-lg)', maxWidth: '440px', width: '100%', padding: '38px 36px', boxShadow: 'var(--shadow-lg)', position: 'relative', maxHeight: '90vh', overflowY: 'auto' };
  const close = { position: 'absolute', top: '18px', right: '20px', background: 'none', border: 'none', fontSize: '24px', color: 'var(--text-muted)', cursor: 'pointer', lineHeight: 1, fontFamily: 'var(--font-body)' };
  const h3 = { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: '30px', color: 'var(--text-strong)', margin: '0 0 6px' };
  const sub = { fontFamily: 'var(--font-body)', fontSize: '16px', color: 'var(--text-muted)', margin: '0 0 22px', lineHeight: 1.5 };
  const [done, setDone] = React.useState(false);
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const [notes, setNotes] = React.useState('');
  const [company, setCompany] = React.useState(''); // honeypot — must stay empty
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setError('');
    setSubmitting(true);
    try {
      const res = await fetch('/api/enroll', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, email, phone, notes, company }),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.ok) {
        setDone(true);
      } else {
        setError(data.error || 'Something went wrong. Please try again.');
      }
    } catch (err) {
      setError('Network error. Please check your connection and try again.');
    } finally {
      setSubmitting(false);
    }
  };

  const errStyle = { fontFamily: 'var(--font-body)', fontSize: '14px', color: '#b3261e', margin: '2px 0 0', lineHeight: 1.4 };
  const hiddenHoneypot = { position: 'absolute', left: '-9999px', width: '1px', height: '1px', overflow: 'hidden' };
  return (
    <div style={overlay} onClick={onClose}>
      <div style={modal} onClick={(e) => e.stopPropagation()}>
        <button style={close} onClick={onClose} aria-label="Close">&times;</button>
        {done ? (
          <div style={{ textAlign: 'center', padding: '20px 0' }}>
            <div style={{ fontSize: '32px', color: 'var(--gold-600)', marginBottom: '12px' }}>✦</div>
            <h3 style={h3}>Your seat is held</h3>
            <p style={sub}>We will be in touch within two days to welcome you to the founding cohort.</p>
            <Btn variant="primary" fullWidth onClick={onClose}>Close</Btn>
          </div>
        ) : (
          <React.Fragment>
            <Eo>Founding cohort</Eo>
            <h3 style={{ ...h3, marginTop: '10px' }}>Opposed to knowing more?</h3>
            <p style={sub}>Tell us where to send your enrollment details. Founding seats are strictly limited.</p>
            <form style={{ display: 'flex', flexDirection: 'column', gap: '16px' }} onSubmit={handleSubmit}>
              <Inp label="Full Name" id="m-name" placeholder="Your name" required value={name} onChange={(e) => setName(e.target.value)} />
              <Inp label="Email" id="m-email" type="email" placeholder="you@example.com" required value={email} onChange={(e) => setEmail(e.target.value)} />
              <Inp label="WhatsApp / Phone" id="m-phone" type="tel" placeholder="+1 (555) 000-0000" required value={phone} onChange={(e) => setPhone(e.target.value)} />
              <NativeTextarea label="Notes, questions or comments" id="m-notes" placeholder="Anything you'd like us to know before we reach out…" value={notes} onChange={(e) => setNotes(e.target.value)} />
              <div style={hiddenHoneypot} aria-hidden="true">
                <label htmlFor="m-company">Company</label>
                <input id="m-company" name="company" type="text" tabIndex={-1} autoComplete="off" value={company} onChange={(e) => setCompany(e.target.value)} />
              </div>
              {error && <p style={errStyle}>{error}</p>}
              <div style={{ marginTop: '6px' }}>
                <Btn variant="primary" size="lg" fullWidth type="submit" disabled={submitting}>{submitting ? 'Sending…' : "See If It's a Fit"}</Btn>
              </div>
            </form>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Offer, Testimonials, Guarantee, FAQ, RiskAndGuarantee, FinalCTA, Footer, EnrollModal });