/* Club FRESH — The Door (FFB application, inside Shop) */
function CFDoor({ back }) {
  const { CF_Icon: Icon, CF_SHOP: SHOP } = window;
  const inside = [
    { t:'A room, not a course', d:'Twelve months with Tracy and a small cohort of women building the same way.' },
    { t:'The business, coached', d:'Club coaches the woman. FFB coaches the business. This is the business side.' },
    { t:'By application only', d:'We take women who are ready. That is what keeps the room what it is.' },
  ];
  return (
    <div className="cf-fade-in">
      {/* gold hero */}
      <div style={{ position: 'relative', overflow: 'hidden', minHeight: 300, background: 'linear-gradient(150deg, #6f5836 0%, #9c7c4c 48%, #cda969 100%)' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(60% 50% at 82% 12%, rgba(255,255,255,0.32), transparent 60%)' }} />
        <div className="cf-pad" style={{ position: 'relative', paddingTop: 8, display: 'flex', justifyContent: 'space-between' }}>
          <button className="cf-glass cf-icon-only" onClick={back}><Icon name="arrowL" size={19} /></button>
        </div>
        <div className="cf-pad" style={{ position: 'relative', paddingTop: 30, paddingBottom: 30 }}>
          <span style={{ fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.82)' }}>{SHOP.door.kicker}</span>
          <h1 style={{ fontFamily: 'var(--cf-head)', fontSize: 40, color: '#fff', margin: '14px 0 0', lineHeight: 1.04 }}>Freedom Filled<span style={{ fontSize: 20, verticalAlign: 'super' }}>®</span> Business</h1>
          <p style={{ fontFamily: 'var(--cf-head)', fontStyle: 'italic', fontSize: 19, color: 'rgba(255,255,255,0.92)', margin: '16px 0 0', maxWidth: '26ch', lineHeight: 1.4 }}>
            {SHOP.door.line}
          </p>
        </div>
      </div>

      {/* Tracy's voice */}
      <div className="cf-pad" style={{ marginTop: 24 }}>
        <p style={{ fontSize: 15.5, lineHeight: 1.65, color: 'var(--ink-b)', margin: 0 }}>
          Hi lovely. You have been living FRESH for a while now. If the rhythm is steady and the business is the next thing you want to build, by design, this is the room where we do that together.
        </p>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 16 }}>
          <span style={{ width: 28, height: 1, background: 'var(--gold)' }} />
          <span className="cf-script" style={{ fontSize: 26, color: 'var(--gold)' }}>Xx Tracy</span>
        </div>
      </div>

      {/* graduate story */}
      <div className="cf-pad" style={{ marginTop: 22 }}>
        <div className="cf-card" style={{ padding: '20px 20px', position: 'relative', overflow: 'hidden' }}>
          <span style={{ position: 'absolute', top: -6, right: 14, fontFamily: 'var(--cf-head)', fontStyle: 'italic', fontSize: 90, color: 'color-mix(in srgb, var(--gold) 26%, transparent)' }}>”</span>
          <p style={{ fontFamily: 'var(--cf-head)', fontSize: 20, lineHeight: 1.4, color: 'var(--ink-h)', margin: 0, maxWidth: '26ch' }}>
            FFB is the reason my business funds my actual life now.
          </p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginTop: 16 }}>
            <window.CF_Monogram name="Jess R" pillar="relationships" size={36} />
            <div>
              <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink-h)' }}>Jess R</div>
              <div style={{ fontSize: 12, color: 'var(--ink-m)' }}>FFB graduate, 2025 cohort</div>
            </div>
          </div>
        </div>
      </div>

      {/* what's inside */}
      <div className="cf-pad" style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 11 }}>
        {inside.map((x, i) => (
          <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
            <span style={{ width: 30, height: 30, borderRadius: 999, background: 'color-mix(in srgb, var(--gold) 18%, #fff)', color: 'var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontFamily: 'var(--cf-head)', fontSize: 15 }}>{i + 1}</span>
            <div>
              <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink-h)' }}>{x.t}</div>
              <p style={{ margin: '3px 0 0', fontSize: 13.5, color: 'var(--ink-b)', lineHeight: 1.5 }}>{x.d}</p>
            </div>
          </div>
        ))}
      </div>

      {/* apply CTA */}
      <div className="cf-pad" style={{ marginTop: 26 }}>
        <button className="cf-reset cf-tap" style={{ width: '100%' }}>
          <div style={{ height: 56, borderRadius: 999, background: 'linear-gradient(135deg, #7b623c 0%, #c9a46c 100%)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9, fontSize: 15.5, fontWeight: 600, boxShadow: '0 14px 30px rgba(123,98,60,0.34)' }}>
            Apply for the mastermind <Icon name="arrowUR" size={17} />
          </div>
        </button>
        <p style={{ textAlign: 'center', fontSize: 12, color: 'var(--ink-m)', margin: '12px 0 0' }}>Applications reviewed personally. No checkout, no countdown.</p>
      </div>
    </div>
  );
}

Object.assign(window, { CFDoor });