// Eric's Story — the founder's long-form bio page
function EricStoryPage() {
  const [modal, setModal] = React.useState(false);
  const onCTA = () => setModal(true);

  return (
    <>
      <NavBar onCTA={onCTA}/>
      <main style={{ background: '#0A0608', color: '#fff', minHeight: '100vh' }}>
        <StoryHero onCTA={onCTA}/>
        <StoryChapters/>
        <StoryPullQuote/>
        <StoryStats/>
        <FinalCTA onCTA={onCTA}/>
      </main>
      <Footer/>

      {modal && <IClosedModal onClose={() => setModal(false)}/>}
    </>
  );
}
window.EricStoryPage = EricStoryPage;

// ---------- HERO ----------
function StoryHero({ onCTA }) {
  return (
    <section data-mf="story-hero" style={{
      position: 'relative', overflow: 'hidden',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
    }}>
      {/* Red wine backdrop */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, zIndex: 0,
        background: `
          radial-gradient(ellipse 70% 60% at 20% 50%, rgba(232,18,60,0.22) 0%, transparent 55%),
          radial-gradient(ellipse 120% 80% at 0% 50%, #5A0A24 0%, #45091E 22%, #1F080D 55%, #120609 90%)
        `,
      }}/>
      <div data-mf="story-hero-inner" style={{
        position: 'relative', zIndex: 1,
        maxWidth: 1280, margin: '0 auto', padding: '100px 44px 110px',
        display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center',
      }}>
        <div>
          <Eyebrow tone="red">The Founder's Story</Eyebrow>
          <h1 style={{
            fontFamily: 'Poppins', fontWeight: 800,
            fontSize: 'clamp(52px, 6.4vw, 104px)',
            lineHeight: 0.98, letterSpacing: '-0.025em',
            margin: '26px 0 24px', color: '#fff',
          }}>
            Meet <span style={{ color: '#E8123C', textShadow: '0 0 40px rgba(232,18,60,0.4)' }}>Eric Deeran.</span>
          </h1>
          <p style={{
            fontFamily: 'Poppins', fontSize: 19, lineHeight: 1.5,
            color: 'rgba(255,255,255,0.78)', maxWidth: 560, margin: '0 0 14px', fontWeight: 400,
          }}>
            10+ years running a marketing agency. 3 years documenting what works.
            One mission — <b style={{ color: '#fff' }}>help high ticket business owners build businesses they actually love running.</b>
          </p>
          <div style={{
            fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.5)', fontWeight: 600, marginTop: 28,
          }}>CEO & Founder · Deeran Films</div>
          <div style={{ display: 'flex', gap: 14, marginTop: 36, flexWrap: 'wrap' }}>
            <Button size="lg" onClick={onCTA}>Schedule Demo</Button>
            <a href="/case-studies" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '16px 28px', borderRadius: 999,
              background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.14)',
              color: '#fff', textDecoration: 'none',
              fontFamily: 'Poppins', fontWeight: 600, fontSize: 15,
            }}>See the case studies →</a>
          </div>
        </div>

        <div data-mf="story-hero-photo" style={{
          position: 'relative', aspectRatio: '1/1', borderRadius: 28,
          overflow: 'hidden', border: '1px solid rgba(255,255,255,0.08)',
          boxShadow: '0 24px 60px rgba(0,0,0,0.55)',
        }}>
          <img
            src="./assets/eric-portrait.jpg"
            alt="Eric Deeran, CEO and founder of Deeran Films"
            width={1170} height={1170} fetchpriority="high" decoding="async"
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%', display: 'block' }}
          />
          <div aria-hidden style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, transparent 55%, rgba(10,6,8,0.85) 100%)',
          }}/>
          <div style={{
            position: 'absolute', left: 24, right: 24, bottom: 22,
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <span style={{
              width: 8, height: 8, borderRadius: '50%',
              background: '#E8123C', boxShadow: '0 0 8px rgba(232,18,60,0.8)',
            }}/>
            <span style={{
              fontFamily: 'Poppins', fontWeight: 700, fontSize: 12,
              letterSpacing: '0.14em', textTransform: 'uppercase', color: '#fff',
            }}>Eric Deeran · Atlanta, GA</span>
          </div>
        </div>
      </div>
    </section>
  );
}
window.StoryHero = StoryHero;

// ---------- CHAPTERS ----------
function StoryChapters() {
  const chapters = [
    {
      n: '01',
      kicker: 'It started with Deeran Films',
      sub: 'Building a marketing agency from zero.',
      body: (
        <>
          <p>
            Over a decade ago, Eric started <b style={{ color: '#fff' }}>Deeran Films</b>, a marketing agency,
            with a laptop and a stubborn belief that a small team could serve big brands.
          </p>
          <p>
            Within a few years, Deeran Films was working with <b style={{ color: '#fff' }}>Georgia Power,
            Mercedes-Benz Stadium, Epic</b>, and a long list of national clients — the kind of logo-heavy roster
            most agencies spend a decade chasing.
          </p>
        </>
      ),
    },
    {
      n: '02',
      kicker: 'Then the questions started',
      sub: 'Other high ticket businesses kept asking for the playbook.',
      body: (
        <>
          <p>
            As Deeran Films grew, so did the DMs. Videographers, marketers, designers, and
            high ticket businesses of every kind kept asking the same three questions:
          </p>
          <ul style={{ margin: '8px 0 0', paddingLeft: 20, color: 'rgba(255,255,255,0.85)' }}>
            <li style={{ marginBottom: 6 }}><i>How are you landing these clients?</i></li>
            <li style={{ marginBottom: 6 }}><i>How are you getting paid what you're worth?</i></li>
            <li><i>How are you keeping retainers on the books instead of chasing one-off projects?</i></li>
          </ul>
          <p style={{ marginTop: 16 }}>
            Eric answered them one-on-one at first. Then he realized there was a real system
            underneath all of it — he'd just never written it down.
          </p>
        </>
      ),
    },
    {
      n: '03',
      kicker: 'Three years. One system. Zero shortcuts.',
      sub: 'Documenting what actually works.',
      body: (
        <>
          <p>
            Eric spent the next three years stripping his agency down to its components:
            how leads came in, how sales calls got closed, how projects were scoped, how retainers were
            structured, how teams were staffed.
          </p>
          <p>
            What came out the other side is <b style={{ color: '#fff' }}>the Inbound System</b> — the installation
            program that high ticket businesses now use to do in months what took Eric years.
          </p>
        </>
      ),
    },
    {
      n: '04',
      kicker: 'Today',
      sub: 'Helping as many high ticket businesses as he can.',
      body: (
        <>
          <p>
            Eric's mission is simple: give high ticket businesses the sales, marketing, and
            fulfillment systems they need to build a beautiful business doing the work they love.
          </p>
          <p>
            <b style={{ color: '#fff' }}>828+ operators and counting</b> rely on the Inbound System to scale.
            Eric is still shipping the work.
          </p>
        </>
      ),
    },
  ];

  return (
    <section data-mf="story-chapters" style={{
      background: '#0A0608', padding: '120px 44px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ maxWidth: 980, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 80 }}>
        {chapters.map((c) => (
          <article key={c.n} data-mf="story-chapter" style={{
            display: 'grid', gridTemplateColumns: '180px 1fr', gap: 48, alignItems: 'start',
          }}>
            <div style={{
              fontFamily: 'Poppins', fontWeight: 800, fontSize: 72,
              color: 'rgba(232,18,60,0.18)', lineHeight: 0.9, letterSpacing: '-0.04em',
            }}>{c.n}</div>
            <div>
              <div style={{ marginBottom: 10 }}>
                <SectionMark num={c.n} tone="red">Chapter</SectionMark>
              </div>
              <h2 style={{
                fontFamily: 'Poppins', fontWeight: 800,
                fontSize: 'clamp(32px, 3.6vw, 48px)',
                lineHeight: 1.05, letterSpacing: '-0.02em',
                margin: '18px 0 10px', color: '#fff',
              }}>{c.kicker}</h2>
              <div style={{
                fontSize: 16, color: '#E8123C', fontWeight: 600, letterSpacing: '-0.005em',
                marginBottom: 24,
              }}>{c.sub}</div>
              <div style={{
                fontFamily: 'Poppins', fontSize: 17, lineHeight: 1.65,
                color: 'rgba(255,255,255,0.72)',
                display: 'flex', flexDirection: 'column', gap: 14,
              }}>{c.body}</div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}
window.StoryChapters = StoryChapters;

// ---------- PULL QUOTE ----------
function StoryPullQuote() {
  return (
    <section data-mf="story-quote" style={{
      position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(180deg, #0A0608 0%, #15070B 100%)',
      padding: '100px 44px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 60% 70% at 50% 50%, rgba(232,18,60,0.18) 0%, transparent 60%)',
      }}/>
      <blockquote style={{
        position: 'relative', maxWidth: 900, margin: '0 auto',
        textAlign: 'center',
      }}>
        <div aria-hidden style={{
          fontFamily: 'Poppins', fontWeight: 900, fontSize: 120, lineHeight: 0.8,
          color: 'rgba(232,18,60,0.22)', marginBottom: -24,
        }}>"</div>
        <p style={{
          fontFamily: 'Poppins', fontWeight: 700,
          fontSize: 'clamp(26px, 3vw, 38px)',
          lineHeight: 1.25, letterSpacing: '-0.015em',
          color: '#fff', margin: 0,
        }}>
          I didn't want to teach theory. I wanted to hand over the{' '}
          <span style={{ color: '#E8123C' }}>same system that built my business</span> — the unedited version.
        </p>
        <footer style={{
          marginTop: 28, fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase',
          fontWeight: 700, color: 'rgba(255,255,255,0.55)',
        }}>— Eric Deeran</footer>
      </blockquote>
    </section>
  );
}
window.StoryPullQuote = StoryPullQuote;

// ---------- STATS ----------
function StoryStats() {
  const stats = [
    { value: 10, suffix: '+', label: 'Years running a marketing agency', hint: 'Deeran Films, est. 2015' },
    { value: 828, suffix: '+', label: 'High ticket businesses on the system', hint: 'Across the US, Canada, UK, AU' },
    { value: 3, suffix: '', label: 'Years spent documenting what works', hint: 'The Inbound System playbook' },
  ];
  return (
    <section data-mf="story-stats" style={{
      background: '#0A0608', padding: '110px 44px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div style={{ display: 'inline-block' }}><Eyebrow tone="red">By the Numbers</Eyebrow></div>
          <h2 style={{
            fontFamily: 'Poppins', fontWeight: 800,
            fontSize: 'clamp(34px, 4vw, 56px)',
            lineHeight: 1.05, letterSpacing: '-0.02em',
            margin: '18px auto 0', color: '#fff', maxWidth: 760,
          }}>
            Built from the <span style={{ color: '#E8123C' }}>inside</span> of a real agency.
          </h2>
        </div>
        <div data-mf="story-stats-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
        }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              background: '#120609', border: '1px solid rgba(255,255,255,0.08)',
              borderRadius: 22, padding: 36,
            }}>
              <div style={{
                fontFamily: 'Poppins', fontWeight: 800, fontSize: 88,
                lineHeight: 1, letterSpacing: '-0.035em', color: '#fff',
              }}>
                <Counter to={s.value} suffix={s.suffix}/>
              </div>
              <div style={{
                fontSize: 15, color: 'rgba(255,255,255,0.85)', marginTop: 14, lineHeight: 1.5,
                fontWeight: 600,
              }}>{s.label}</div>
              <div style={{
                fontSize: 12, color: 'rgba(255,255,255,0.45)', marginTop: 6,
                letterSpacing: '0.02em',
              }}>{s.hint}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.StoryStats = StoryStats;

// ---------- iClosed modal (scoped to this page) ----------
function IClosedModal({ onClose }) {
  React.useEffect(() => {
    if (!document.querySelector('script[src*="app.iclosed.io/assets/widget.js"]')) {
      const s = document.createElement('script');
      s.src = 'https://app.iclosed.io/assets/widget.js';
      s.async = true;
      document.body.appendChild(s);
    } else if (window.iClosed && typeof window.iClosed.init === 'function') {
      try { window.iClosed.init(); } catch(e) {}
    }
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener('keydown', onKey);
    };
  }, [onClose]);

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.85)',
      display: 'flex', alignItems: 'flex-start', justifyContent: 'center', zIndex: 300,
      backdropFilter: 'blur(8px)', padding: 20,
      overflowY: 'auto', WebkitOverflowScrolling: 'touch',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: 'min(980px, 100%)', margin: 'auto', background: '#1A0A10',
        border: '1px solid rgba(255,255,255,0.1)', borderRadius: 20,
        position: 'relative', overflow: 'hidden',
        boxShadow: '0 40px 120px rgba(0,0,0,0.7)',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '18px 22px', borderBottom: '1px solid rgba(255,255,255,0.08)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{
              width: 8, height: 8, borderRadius: '50%', background: '#E8123C',
              boxShadow: '0 0 8px rgba(232,18,60,0.8)',
            }}/>
            <div style={{
              fontFamily: 'Poppins', fontWeight: 700, fontSize: 14,
              letterSpacing: '0.08em', color: '#fff', textTransform: 'uppercase',
            }}>Schedule Your Roadmap Call</div>
          </div>
          <button onClick={onClose} style={{
            width: 34, height: 34, border: 'none',
            background: 'rgba(255,255,255,0.08)', borderRadius: '50%',
            color: '#fff', fontSize: 18, cursor: 'pointer', lineHeight: 1,
          }}>×</button>
        </div>
        <div
          className="iclosed-widget"
          data-url="https://app.iclosed.io/e/Edeeran/master-filmmaker-roadmap-call"
          title="Apply Now"
          style={{ width: '100%', height: 620 }}
        />

        <div style={{
          padding: '16px 22px 20px',
          borderTop: '1px solid rgba(255,255,255,0.08)',
          fontFamily: 'Poppins', fontSize: '8pt', lineHeight: 1.5,
          color: 'rgba(255,255,255,0.55)',
        }}>
          By submitting your information, you agree to receive marketing calls and text messages (including calls and texts sent using automated technology), and emails from Deeran Films LLC d/b/a Master Filmmaker at the contact information provided. This includes communications about this offer, related products or services, training content, and promotional updates. Consent is not a condition of purchase. Message and data rates may apply. You may unsubscribe from emails at any time by clicking the link in our emails, or opt out of texts by replying STOP. View our{' '}
          <a href="https://www.masterfilmmaker.com/termsofuse" target="_blank" rel="noopener noreferrer"
             style={{ color: 'rgba(255,255,255,0.85)', textDecoration: 'underline' }}>Terms of Use</a>
          {' '}and{' '}
          <a href="https://www.masterfilmmaker.com/terms-of-service" target="_blank" rel="noopener noreferrer"
             style={{ color: 'rgba(255,255,255,0.85)', textDecoration: 'underline' }}>Privacy Policy</a>.
        </div>
      </div>
    </div>
  );
}
window.IClosedModal = IClosedModal;