// Flywheel ABA - High-Converting LP (Hormozi structure, Flywheel brand)
// Real reviews from flywheelcenters.com, matched to their actual visual system.
// MOBILE-FIXED VERSION

const C = {
  coral: '#f08a6e',
  coralDeep: '#dc6c4e',
  coralSoft: '#fbe3e0',
  navy: '#1b2b5e',
  navy2: '#0f1d47',
  cream: '#fbf6ee',
  creamDeep: '#f5ecd9',
  blueGray: '#e8ebf3',
  blueGrayDeep: '#d9dfeb',
  mintSoft: '#d4ebde',
  peachSoft: '#fbd8b9',
  pinkSoft: '#fbe3e0',
  paper: '#ffffff',
  ink: '#1b2b5e',
  muted: '#5b6385',
  line: 'rgba(27,43,94,0.12)',
  green: '#1f8a5b',
  yellow: '#f4b740',
  phone: '(973) 582-8866',
  phoneRaw: '+19735828866',
  city: 'Charlotte',
  state: 'NC',
  stateName: 'North Carolina',
  zip: '28217',
  address1: '4944 Parkway Plaza Blvd',
  address2: 'Charlotte, NC 28217'
};

const Mono = { fontFamily: '"JetBrains Mono", ui-monospace, monospace' };
const Serif = { fontFamily: '"Newsreader", Georgia, serif' };

// ============ RESPONSIVE HOOK ============
const useIsMobile = (breakpoint = 768) => {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= breakpoint);
  React.useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth <= breakpoint);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, [breakpoint]);
  return isMobile;
};
window.FLY_useIsMobile = useIsMobile;

// Inline SVG icons (no emoji)
const PhoneIcon = ({ size = 16, color = 'currentColor' }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
  </svg>;

const CheckIcon = ({ size = 12, color = '#fff' }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>;

const LockIcon = ({ size = 12, color = 'currentColor' }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>;

// Flywheel curl logomark SVG
const FlywheelMark = ({ size = 18, color = '#f08a6e' }) =>
<svg width={size} height={size * 1.1} viewBox="0 0 28 30" fill="none" stroke={color} strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M2 18 C 2 8, 12 4, 18 8 C 22 11, 22 16, 18 18 C 14 20, 9 17, 11 13" />
    <circle cx="11" cy="13" r="2.2" fill={color} stroke="none" />
  </svg>;

window.FLY_Mark = FlywheelMark;
window.FLY_PhoneIcon = PhoneIcon;
window.FLY_CheckIcon = CheckIcon;
window.FLY_LockIcon = LockIcon;

// Decorative big watermark used in section backgrounds
const BigCurl = ({ color, size = 480, style = {} }) =>
<svg width={size} height={size * 1.05} viewBox="0 0 200 210" style={{ position: 'absolute', ...style }} aria-hidden="true">
    <path d="M20 130 C 20 60, 90 30, 130 55 C 165 78, 165 115, 130 130 C 95 145, 65 120, 80 95"
  fill="none" stroke={color} strokeWidth="22" strokeLinecap="round" strokeLinejoin="round" />
    <circle cx="80" cy="95" r="16" fill={color} />
  </svg>;

window.FLY_BigCurl = BigCurl;

// ============ HEADER ============
const Header = () => {
  const m = useIsMobile();
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(255,255,255,0.95)', backdropFilter: 'blur(10px)',
      borderBottom: `1px solid ${C.line}`,
      padding: m ? '12px 16px' : '14px 40px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between'
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <img src="https://flywheelcenters.com/wp-content/uploads/2025/02/flywheel-logo.svg" alt="Flywheel Centers" style={{ height: m ? 28 : 36 }} />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: m ? 12 : 22 }}>
        {!m && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: C.muted, fontWeight: 600 }}>
            <span style={{ width: 8, height: 8, borderRadius: 99, background: '#22c55e', boxShadow: '0 0 0 4px rgba(34,197,94,0.2)' }} />
            Live specialist available now
          </div>
        )}
        <a href="#form" className="desktop-cta" style={{
          background: C.navy, color: '#fff', textDecoration: 'none',
          padding: '12px 22px', borderRadius: 99, fontWeight: 800, fontSize: 13,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10, letterSpacing: '0.06em'
        }}>
          SCHEDULE FREE CONSULTATION
        </a>
        <a href={`tel:${C.phoneRaw}`} className="mobile-cta" style={{
          background: C.navy, color: '#fff', textDecoration: 'none',
          padding: '10px 18px', borderRadius: 99, fontWeight: 800, fontSize: 12,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, letterSpacing: '0.06em'
        }}>
          <PhoneIcon size={13} /> {C.phone}
        </a>
      </div>
    </header>
  );
};


// ============ HERO ============
const Hero = () => {
  const m = useIsMobile();
  return (
    <section style={{ background: '#fff', padding: m ? '32px 20px 24px' : '64px 40px 40px', position: 'relative', overflow: 'hidden' }}>
      {/* Watermark curls */}
      <BigCurl color={C.coralSoft} size={m ? 300 : 520} style={{ top: -120, left: -160, opacity: 0.55 }} />
      <BigCurl color={C.blueGray} size={m ? 260 : 460} style={{ bottom: -180, right: -140, opacity: 0.7 }} />

      <div style={{ maxWidth: 1240, margin: '0 auto', display: m ? 'flex' : 'grid', flexDirection: 'column', gridTemplateColumns: m ? undefined : '1.15fr 1fr', gap: m ? 28 : 56, position: 'relative', zIndex: 2 }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgb(255, 255, 255)', padding: '6px 14px', borderRadius: 99, fontSize: m ? 11 : 14, fontWeight: 800, color: C.navy, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
            <span style={{ width: 6, height: 6, borderRadius: 99, background: C.coralDeep }} />
            {m ? `NOW ENROLLING · ${C.city}, ${C.state}` : `NOW ENROLLING FOR ABA THERAPY · ${C.city}, ${C.state}`}
          </div>
          <h1 style={{
            margin: '16px 0 6px', fontSize: m ? 40 : 72, fontWeight: 800,
            letterSpacing: '-0.025em', lineHeight: 1.0, color: C.navy,
            textTransform: 'uppercase', textWrap: 'balance'
          }}>
            Your child deserves<br />
            <span style={{ color: C.coral }}>real progress.</span>
          </h1>
          <p style={{ fontSize: m ? 16 : 20, color: C.navy, lineHeight: 1.45, margin: m ? '16px 0 20px' : '24px 0 28px', maxWidth: 560, fontWeight: 500 }}>
            ABA therapy at our beautiful {C.city}, {C.state} center. Full-day preschool program. BCBA-supervised, individualized plans. <strong style={{ background: C.coralSoft, padding: '2px 8px', borderRadius: 6, fontWeight: 800, color: C.navy }}>No waitlist.</strong>
          </p>
          <ul style={{ margin: '0 0 24px', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: m ? 10 : 12 }}>
            {[
              'Full-day Autism Preschool Program',
              'BCBA-supervised, individualized treatment plans',
              'Insurance verification and billing handled for you',
              'Parents are partners, not sidelined',
              'North Carolina Medicaid and most commercial insurance accepted'].
              map((x, i) =>
              <li key={i} style={{ display: 'flex', gap: m ? 10 : 14, alignItems: 'center', fontSize: m ? 14 : 16.5, color: C.navy, fontWeight: 600 }}>
                <span style={{ width: m ? 20 : 24, height: m ? 20 : 24, borderRadius: 99, background: C.navy, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><CheckIcon size={m ? 10 : 13} /></span>
                {x}
              </li>
            )}
          </ul>

          <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
            <a href={`tel:${C.phoneRaw}`} style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              background: C.navy, color: '#fff', textDecoration: 'none',
              padding: m ? '14px 22px' : '18px 28px', borderRadius: 99, fontWeight: 800, fontSize: m ? 12 : 14,
              letterSpacing: '0.12em', textTransform: 'uppercase',
              width: m ? '100%' : 'auto'
            }}>
              <PhoneIcon size={m ? 14 : 16} />
              CALL NOW - LIVE SPECIALIST AVAILABLE
            </a>
          </div>
          <div style={{ marginTop: 12, fontSize: m ? 12 : 13.5, color: C.muted, fontWeight: 500 }}>
            Or fill out the form. A care manager calls back within 1 business hour.
          </div>
        </div>

        <div>
          <FormCard />
        </div>
      </div>

      {/* trust badges row */}
      <div style={{
        maxWidth: 1240, margin: m ? '32px auto 0' : '56px auto 0',
        display: 'grid',
        gridTemplateColumns: m ? '1fr 1fr' : 'repeat(5, 1fr)',
        gap: 0,
        background: '#fff', border: `1px solid ${C.line}`, borderRadius: 16, overflow: 'hidden',
        position: 'relative', zIndex: 2
      }}>
        {[
          { eyebrow: 'Rating', t: '4.9 / 5', s: '120+ Google reviews', star: true },
          { eyebrow: 'Coverage', t: m ? 'NC Medicaid + more' : 'North Carolina Medicaid + most insurance', s: 'Benefits verified up front' },
          { eyebrow: 'Timing', t: 'No waitlist', s: 'Most families start within weeks' },
          { eyebrow: 'Care team', t: 'BCBA-supervised', s: 'Every session, every plan' },
          { eyebrow: 'Location', t: `${C.city}, ${C.state}`, s: C.address1 }].
          map((b, i) =>
          <div key={i} style={{
            padding: m ? '16px 14px' : '22px 22px',
            borderLeft: m ? (i % 2 === 1 ? `1px solid ${C.line}` : 'none') : (i > 0 ? `1px solid ${C.line}` : 'none'),
            borderTop: m && i >= 2 ? `1px solid ${C.line}` : 'none',
            display: 'flex', flexDirection: 'column', gap: m ? 3 : 5,
            ...(m && i === 4 ? { gridColumn: '1 / -1', borderTop: `1px solid ${C.line}`, borderLeft: 'none' } : {})
          }}>
            <div style={{ fontSize: m ? 10 : 12, color: C.muted, fontWeight: 800, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{b.eyebrow}</div>
            <div style={{ fontSize: m ? 14 : 18, fontWeight: 800, color: C.navy, display: 'flex', alignItems: 'center', gap: 8 }}>
              {b.star && <span style={{ color: C.yellow, letterSpacing: 1, fontSize: m ? 11 : 13 }}>★★★★★</span>}
              {b.t}
            </div>
            <div style={{ fontSize: m ? 12 : 14, color: C.muted, fontWeight: 500 }}>{b.s}</div>
          </div>
        )}
      </div>
    </section>
  );
};


// ============ FORM CARD ============
const FormCard = () => {
  const m = FLY_useIsMobile();
  React.useEffect(() => {
    const s = document.createElement('script');
    s.src = 'https://js.hsforms.net/forms/v2.js';
    s.onload = () => {
      if (window.hbspt) {
        window.hbspt.forms.create({
          portalId: '47483612',
          formId: 'e2ae87c5-5233-42a3-a0fe-2a6cd94a274b',
          region: 'na1',
          target: '#hs-form-target',
        });
      }
    };
    document.head.appendChild(s);
  }, []);

  return (
    <div id="form" style={{
      background: '#fff', borderRadius: 20, padding: m ? 24 : 32,
      boxShadow: '0 30px 60px -28px rgba(27,43,94,0.22), 0 0 0 1px rgba(27,43,94,0.06)',
      position: 'relative', border: `1px solid ${C.line}`
    }}>
      <div style={{ position: 'absolute', top: -14, left: m ? 20 : 28, background: C.coral, color: '#fff', padding: '6px 14px', borderRadius: 99, fontWeight: 800, letterSpacing: '0.18em', fontSize: "12px" }}>
        FREE · NO COMMITMENT
      </div>
      <h3 style={{ margin: '8px 0 6px', fontSize: m ? 22 : 26, color: C.navy, fontWeight: 800, letterSpacing: '-0.015em', lineHeight: 1.1, textTransform: 'uppercase' }}>
        See if your child<br />qualifies
      </h3>
      <p style={{ margin: '0 0 18px', fontSize: m ? 13 : 14, color: C.muted, lineHeight: 1.55 }}>
        A care manager will call you within <strong style={{ color: C.navy }}>1 business hour</strong>. Real answers, zero pressure.
      </p>
      <div id="hs-form-target" style={{ minHeight: 200 }}></div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: m ? 11 : 12, color: C.muted, justifyContent: 'center', marginTop: 12 }}>
        <LockIcon size={12} color={C.muted} /> HIPAA-secure · We never share or sell your info
      </div>
    </div>
  );
};


// ============ IDENTIFICATION ============
const Identification = () => {
  const m = useIsMobile();
  const items = [
    { t: "You've been on a waitlist for months.", d: 'Other centers told you 6 to 12 months. Your child needs help now, not next year.' },
    { t: 'Calls go unreturned.', d: "Voicemails. Forms. Silence. You're chasing providers just to get an answer." },
    { t: "You want real preschool readiness, not two hours and a goodbye.", d: 'You need a program that actually prepares your child for what comes next.' }
  ];

  return (
    <section style={{ background: C.blueGray, padding: m ? '56px 20px' : '96px 40px', position: 'relative', overflow: 'hidden' }}>
      <BigCurl color="rgba(255,255,255,0.5)" size={m ? 240 : 420} style={{ top: -100, left: -100 }} />
      <BigCurl color="rgba(255,255,255,0.4)" size={m ? 220 : 380} style={{ bottom: -120, right: -100 }} />
      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative', zIndex: 2 }}>
        <div style={{ textAlign: 'center', marginBottom: m ? 28 : 48 }}>
          <h2 style={{ margin: 0, fontSize: m ? 28 : 52, fontWeight: 800, color: C.navy, letterSpacing: '-0.02em', lineHeight: 1.05, textTransform: 'uppercase', textWrap: 'balance' }}>
            If any of this sounds familiar,<br />
            <span style={{ color: C.coral }}>we built Flywheel for you.</span>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: m ? 12 : 20 }}>
          {items.map((it, i) => {
            const isLastOdd = i === items.length - 1 && items.length % 2 === 1 && !m;
            return (
            <div key={i} style={{ background: '#fff', padding: m ? '20px 20px' : '26px 28px', borderRadius: 16, border: `1px solid ${C.line}`, display: 'flex', flexDirection: 'column', gap: 8, gridColumn: isLastOdd ? '1 / -1' : undefined, maxWidth: isLastOdd ? 'calc(50% - 10px)' : undefined, margin: isLastOdd ? '0 auto' : undefined }}>
              <span style={{ fontSize: 12, color: C.coralDeep, fontWeight: 800, letterSpacing: '0.16em' }}>{String(i + 1).padStart(2, '0')} ·</span>
              <h4 style={{ margin: 0, fontSize: m ? 18 : 24, color: C.navy, fontWeight: 800, letterSpacing: '-0.01em', lineHeight: 1.3 }}>{it.t}</h4>
              <p style={{ margin: '2px 0 0', fontSize: m ? 15 : 17, color: C.muted, lineHeight: 1.6 }}>{it.d}</p>
            </div>
          );})}
        </div>
        <div style={{ textAlign: 'center', marginTop: m ? 24 : 40, fontSize: m ? 16 : 19, color: C.navy, fontWeight: 600 }}>
          We've heard every story. <strong style={{ color: C.coralDeep, fontWeight: 800 }}>And we move differently.</strong>
        </div>
      </div>
    </section>
  );
};


window.FLY_C = C;
window.FLY_Header = Header;
window.FLY_Hero = Hero;
window.FLY_Identification = Identification;