// 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 production company. 3 years documenting what works.
            One mission — <b style={{ color: '#fff' }}>help creatives 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 · Master Filmmaker</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 Master Filmmaker"
            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 production company from zero.',
      body: (
        <>
          <p>
            Over a decade ago, Eric started <b style={{ color: '#fff' }}>Deeran Films</b> with a camera, a laptop,
            and a stubborn belief that a small video 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 video agencies spend a decade chasing.
          </p>
        </>
      ),
    },
    {
      n: '02',
      kicker: 'Then the questions started',
      sub: 'Other filmmakers kept asking for the playbook.',
      body: (
        <>
          <p>
            As Deeran Films grew, so did the DMs. Filmmakers, videographers, and agency owners
            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 production company 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' }}>Master Filmmaker</b> — the installation
            program that agency owners now use to do in months what took Eric years.
          </p>
        </>
      ),
    },
    {
      n: '04',
      kicker: 'Today',
      sub: 'Helping as many creatives as he can.',
      body: (
        <>
          <p>
            Eric's mission is simple: give video and creative agency owners the sales, marketing, and
            fulfillment systems they need to build a beautiful business doing the work they love.
          </p>
          <p>
            <b style={{ color: '#fff' }}>804+ operators and counting</b> rely on Master Filmmaker 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 production company', hint: 'Deeran Films, est. 2015' },
    { value: 804, suffix: '+', label: 'Video business owners on the system', hint: 'Across the US, Canada, UK, AU' },
    { value: 3, suffix: '', label: 'Years spent documenting what works', hint: 'The Master Filmmaker 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;