// v1-pages.jsx, Interior pages for The Practice Potential
// Reuses V1UtilityBar, V1MainNav, V1Footer, V1ContactCK, V1Testimonials, V1Stats from v1-editorial.jsx.
// All page-level layouts share a calm, paper-warm interior hero (no video) and the same chrome.

// ─────────────────────────────────────────────────────────────────────────────
// Shared interior page header, replaces the video hero on inner pages
// ─────────────────────────────────────────────────────────────────────────────
const V1InteriorHero = ({ data, active, eyebrow, title, subhead, lede }) => (
  <section style={{
    background: v1Styles.paper,
    position: 'relative'
  }}>
    <V1UtilityBar data={data} tone="dark" />
    <V1MainNav data={data} active={active} tone="dark" />
    <div style={{
      maxWidth: 1280, margin: '0 auto',
      padding: '32px 64px 48px', textAlign: 'center'
    }}>
      <div style={{
        fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
        textTransform: 'uppercase', color: v1Styles.blue, fontWeight: 600, marginBottom: 24
      }}>{eyebrow}</div>
      {title && (
        <h2 style={{
          fontFamily: '"Newsreader", Georgia, serif', fontSize: 84, fontWeight: 500, lineHeight: 1.04,
          letterSpacing: '-0.02em', margin: '0 auto', color: v1Styles.ink,
          maxWidth: 1100, textWrap: 'balance'
        }}>{title}</h2>
      )}
      {subhead && (
        <div style={{
          fontFamily: '"Newsreader", Georgia, serif', fontSize: 32, fontWeight: 500, lineHeight: 1.2,
          letterSpacing: '-0.01em', margin: '28px auto 0', color: v1Styles.blue,
          maxWidth: 980, textWrap: 'balance', fontStyle: 'italic',
        }}>{subhead}</div>
      )}
      {lede && (
        <p style={{
          fontFamily: v1Styles.sans, fontSize: 22, lineHeight: 1.55, margin: '32px auto 0',
          color: v1Styles.muted, maxWidth: 820
        }}>{lede}</p>
      )}
    </div>
  </section>
);

// Generic CTA strip used at the bottom of each interior page
const V1CTAStrip = ({ data, kicker, title, body, ctaLabel = 'Book a Consult Call →' }) => (
  <section style={{ background: v1Styles.ink, padding: '120px 64px', color: '#fff' }}>
    <div style={{ maxWidth: 1080, margin: '0 auto', textAlign: 'center' }}>
      {kicker && (
        <div style={{
          fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
          textTransform: 'uppercase', color: '#9eaaff', fontWeight: 600, marginBottom: 24
        }}>{kicker}</div>
      )}
      <h2 style={{
        fontFamily: '"Newsreader", Georgia, serif', fontSize: 56, fontWeight: 500, lineHeight: 1.1,
        letterSpacing: '-0.02em', margin: 0, textWrap: 'balance',
      }}>{title}</h2>
      {body && (
        <p style={{
          fontFamily: v1Styles.sans, fontSize: 19, lineHeight: 1.6, margin: '28px auto 0',
          opacity: 0.78, maxWidth: 760
        }}>{body}</p>
      )}
      <div style={{ marginTop: 48 }}>
        <a href={data.brand.bookingUrl} style={{
          display: 'inline-block', padding: '20px 52px',
          background: v1Styles.blue, color: '#fff',
          fontFamily: v1Styles.sans, fontSize: 16, fontWeight: 700,
          textDecoration: 'none', borderRadius: 4, letterSpacing: '0.01em',
          boxShadow: '0 6px 20px rgba(75,104,239,0.35)'
        }}>{ctaLabel}</a>
      </div>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────────────────────
// ABOUT PAGE
// ─────────────────────────────────────────────────────────────────────────────

const V1AboutPortrait = ({ data }) => (
  <section style={{ background: v1Styles.paper, padding: '72px 64px' }}>
    <div style={{
      maxWidth: 1280, margin: '0 auto',
      display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 56, alignItems: 'start'
    }}>
      <div style={{
        aspectRatio: '4/5', borderRadius: 2, overflow: 'hidden',
        background: '#1a1f2a', position: 'sticky', top: 40
      }}>
        <img src="lauren-portrait.jpg" alt="Lauren Andreas" style={{
          width: '100%', height: '100%', objectFit: 'cover', objectPosition: '70% 30%',
          display: 'block'
        }} />
      </div>
      <div>
        <div style={{
          fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
          textTransform: 'uppercase', color: v1Styles.blue, fontWeight: 600, marginBottom: 20
        }}>Meet the Founder</div>
        <h2 style={{
          fontFamily: '"Newsreader", Georgia, serif', fontSize: 56, fontWeight: 500,
          lineHeight: 1.1, letterSpacing: '-0.02em', color: v1Styles.ink,
          margin: 0, textWrap: 'balance'
        }}>
          {data.laurenBio.headline}
        </h2>
        <p style={{
          fontFamily: v1Styles.sans, fontSize: 18, lineHeight: 1.7,
          color: v1Styles.ink, opacity: 0.85, margin: '32px 0 0'
        }}>{data.laurenBio.para1}</p>
        <p style={{
          fontFamily: v1Styles.sans, fontSize: 17, lineHeight: 1.7,
          color: v1Styles.ink, opacity: 0.78, margin: '24px 0 0'
        }}>{data.laurenBio.para2}</p>

        {/* Signature line */}
        <div style={{
          marginTop: 32, paddingTop: 24, borderTop: `1px solid ${v1Styles.rule}`,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24
        }}>
          <div>
            <div style={{
              fontFamily: '"Newsreader", Georgia, serif', fontSize: 34, fontStyle: 'italic',
              color: v1Styles.ink, lineHeight: 1
            }}>Lauren Andreas</div>
            <div style={{
              fontFamily: v1Styles.sans, fontSize: 12, color: v1Styles.muted,
              letterSpacing: '0.18em', textTransform: 'uppercase', marginTop: 8
            }}>Founder · The Practice Potential</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// "What I believe", three principles in calm columns
const V1Principles = ({ data }) => {
  const principles = [
    {
      n: '01',
      title: 'Doctors aren\'t taught to run a business, but they can learn.',
      body: 'Medical school doesn\'t cover leadership, sales, or operations. The doctors who thrive are the ones who treat those as learnable skills, not personality traits.'
    },
    {
      n: '02',
      title: 'Your team is the patient experience.',
      body: 'Patients judge your practice by how the front desk answers the phone, how the hygienist makes them feel, how the consultation flows. Train the team, and everything else follows.'
    },
    {
      n: '03',
      title: 'Real change requires accountability.',
      body: 'One-off trainings don\'t move the needle. The practices that grow are the ones with a coach in their corner, a rhythm of follow-up, and the discipline to keep going after the energy fades.'
    }
  ];
  return (
    <section style={{ background: v1Styles.paperWarm, padding: '140px 64px', borderTop: `1px solid ${v1Styles.rule}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 80 }}>
          <div style={{
            fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
            textTransform: 'uppercase', color: v1Styles.blue, fontWeight: 600, marginBottom: 24
          }}>What I Believe</div>
          <h2 style={{
            fontFamily: '"Newsreader", Georgia, serif', fontSize: 56, fontWeight: 500, lineHeight: 1.1,
            letterSpacing: '-0.02em', margin: 0, color: v1Styles.ink, textWrap: 'balance',
          }}>
            Three principles that guide the work.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48 }}>
          {principles.map(p => (
            <div key={p.n} style={{ padding: '8px 12px' }}>
              <div style={{
                fontFamily: v1Styles.font, fontSize: 56, fontWeight: 500,
                color: v1Styles.blue, lineHeight: 1, letterSpacing: '-0.02em',
                marginBottom: 24, fontVariationSettings: '"opsz" 144'
              }}>{p.n}</div>
              <h3 style={{
                fontFamily: '"Newsreader", Georgia, serif', fontSize: 24, fontWeight: 500,
                lineHeight: 1.25, color: v1Styles.ink, margin: '0 0 18px',
                letterSpacing: '-0.005em', textWrap: 'balance'
              }}>{p.title}</h3>
              <p style={{
                fontFamily: v1Styles.sans, fontSize: 15, color: v1Styles.muted,
                margin: 0, lineHeight: 1.65
              }}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// Career milestones, vertical timeline (placeholder content, clearly marked)
const V1Timeline = ({ data }) => {
  const milestones = [
    { year: '2014', title: 'Started consulting in dental practices', body: 'Began coaching small practices on team training, patient experience, and treatment acceptance.' },
    { year: '2017', title: 'Expanded into dermatology and aesthetics', body: 'Adapted core frameworks for derm and aesthetic practices, pricing conversations, retail product lines, retention.' },
    { year: '2020', title: 'Launched virtual training programs', body: 'Built self-paced video modules so distributed teams could get the same training, regardless of location.' },
    { year: '2023', title: 'The Practice Potential', body: 'Rebranded the consultancy and expanded the team to serve practices nationwide.' },
    { year: 'Today', title: '300+ practices coached', body: 'Continuing to partner with doctors and teams ready to grow what they\'ve built.' }
  ];
  return (
    <section style={{ background: v1Styles.paper, padding: '140px 64px', borderTop: `1px solid ${v1Styles.rule}` }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 72 }}>
          <div style={{
            fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
            textTransform: 'uppercase', color: v1Styles.blue, fontWeight: 600, marginBottom: 24
          }}>The Path</div>
          <h2 style={{
            fontFamily: '"Newsreader", Georgia, serif', fontSize: 52, fontWeight: 500, lineHeight: 1.1,
            letterSpacing: '-0.02em', margin: 0, color: v1Styles.ink, textWrap: 'balance',
          }}>
            Ten years inside doctors' offices.
          </h2>
        </div>
        <div style={{ position: 'relative', paddingLeft: 56 }}>
          {/* Vertical rule */}
          <div style={{
            position: 'absolute', left: 16, top: 8, bottom: 8,
            width: 1, background: v1Styles.rule
          }} />
          {milestones.map((m, i) => (
            <div key={i} style={{ position: 'relative', paddingBottom: i < milestones.length - 1 ? 56 : 0 }}>
              <div style={{
                position: 'absolute', left: -48, top: 6,
                width: 12, height: 12, borderRadius: '50%',
                background: v1Styles.blue, border: `3px solid ${v1Styles.paper}`,
                boxShadow: `0 0 0 1px ${v1Styles.blue}`
              }} />
              <div style={{
                fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.25em',
                textTransform: 'uppercase', color: v1Styles.blue, fontWeight: 700, marginBottom: 10
              }}>{m.year}</div>
              <h3 style={{
                fontFamily: '"Newsreader", Georgia, serif', fontSize: 26, fontWeight: 500,
                lineHeight: 1.25, color: v1Styles.ink, margin: '0 0 10px',
                letterSpacing: '-0.005em'
              }}>{m.title}</h3>
              <p style={{
                fontFamily: v1Styles.sans, fontSize: 16, color: v1Styles.muted,
                margin: 0, lineHeight: 1.6
              }}>{m.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// Long-form biographical chapters, Education, Career, Family & Life
const V1AboutChapters = ({ data }) => {
  const chapters = [
    {
      eyebrow: 'Chapter 01',
      title: 'Education',
      bg: v1Styles.paper,
      paras: [
        "Lauren Andreas graduated summa cum laude from the University of Florida with a degree in Business Marketing and later earned a Master's Degree in Management from the Harvard Extension School, with a focus on leadership, organizational behavior, and business strategy.",
        "Her graduate work combined both online and in-person learning experiences and provided the opportunity to study advanced concepts in communication, change management, and organizational effectiveness. Lauren integrates these evidence-based principles into her consulting and coaching, helping practices create lasting behavioral change, stronger leadership, and healthier team dynamics. As a lifelong learner, she is passionate about translating complex business concepts into practical strategies teams can actually implement."
      ]
    },
    {
      eyebrow: 'Chapter 02',
      title: 'Career',
      bg: v1Styles.paperWarm,
      paras: [
        "Lauren's career has always centered around coaching, leadership, and helping others perform at their highest level. She began as the Head Dance Coach for the University of Florida Gators, where she mentored and developed athletes performing in high-pressure environments before thousands of fans and national audiences. It was during this time that she discovered a passion for coaching, encouragement, and helping individuals reach their full potential.",
        "She later spent six years with a medical practice consulting and training company, serving as a trainer, content creator, and program manager. Through this experience, Lauren developed a deep understanding of the unique challenges healthcare providers face in balancing exceptional patient care with the realities of business ownership, team leadership, and operational growth.",
        "In addition, Lauren served as the Head Sales Trainer for a global translation services company, where she worked with internationally recognized brands and strengthened her expertise in communication, training, consumer behavior, and behavior change.",
        "In 2019, Lauren founded Practice Potential, where she now partners with dental and healthcare practices across the country to strengthen leadership, improve patient experience, develop teams, and create systems that drive sustainable growth. She is known for delivering engaging, highly practical trainings that blend accountability, communication, leadership, and real-world implementation."
      ]
    },
    {
      eyebrow: 'Chapter 03',
      title: 'Family & Life Outside of Work',
      bg: v1Styles.paper,
      paras: [
        "Lauren and her husband are raising their three boys Brady, Caleb, and Daniel in a home that is equal parts joyful, active, and loud. As both a business owner and mom, she understands firsthand the balancing act many practice owners face and is passionate about helping leaders create businesses that thrive both professionally and personally.",
        "When she is not traveling to practices around the country, you will likely find her at a baseball field cheering on her boys, spending time with friends and family, staying active, or planning her next travel adventure. She has a passion for fitness, taught group fitness classes for over a decade, and loves exploring new places around the world. Lauren is also committed to serving her community and supporting organizations that create meaningful opportunities for children and families."
      ]
    }
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{
      background: v1Styles.paper,
      padding: '72px 64px',
      borderTop: `1px solid ${v1Styles.rule}`
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{
          fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
          textTransform: 'uppercase', color: v1Styles.muted, fontWeight: 600,
          textAlign: 'center', marginBottom: 12
        }}>Lauren's Story</div>
        <h2 style={{
          fontFamily: '"Newsreader", Georgia, serif', fontSize: 48, fontWeight: 500,
          lineHeight: 1.1, letterSpacing: '-0.02em', margin: '0 0 40px',
          color: v1Styles.ink, textAlign: 'center', textWrap: 'balance',
        }}>Three chapters that shaped how I coach.</h2>

        <div style={{ borderTop: `1px solid ${v1Styles.rule}` }}>
          {chapters.map((ch, i) => {
            const isOpen = open === i;
            return (
              <div key={ch.title} style={{ borderBottom: `1px solid ${v1Styles.rule}` }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: '100%', background: 'transparent', border: 'none',
                    padding: '24px 4px', cursor: 'pointer', textAlign: 'left',
                    display: 'grid', gridTemplateColumns: '80px 1fr 40px',
                    alignItems: 'center', gap: 24, color: v1Styles.ink,
                    fontFamily: 'inherit'
                  }}
                >
                  <div style={{
                    fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
                    textTransform: 'uppercase', color: v1Styles.blue, fontWeight: 600
                  }}>{ch.eyebrow.replace('Chapter ', '')}</div>
                  <h3 style={{
                    fontFamily: '"Newsreader", Georgia, serif', fontSize: 32, fontWeight: 500,
                    lineHeight: 1.15, letterSpacing: '-0.015em', margin: 0,
                    color: v1Styles.ink
                  }}>{ch.title}</h3>
                  <div style={{
                    justifySelf: 'end', width: 28, height: 28,
                    border: `1.5px solid ${v1Styles.ink}`, borderRadius: '50%',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    transition: 'transform 250ms ease',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)'
                  }}>
                    <svg width="12" height="12" viewBox="0 0 12 12">
                      <path d="M6 1v10M1 6h10" stroke={v1Styles.ink} strokeWidth="1.5" strokeLinecap="round" />
                    </svg>
                  </div>
                </button>
                <div style={{
                  display: 'grid', gridTemplateRows: isOpen ? '1fr' : '0fr',
                  transition: 'grid-template-rows 320ms ease'
                }}>
                  <div style={{ overflow: 'hidden' }}>
                    <div style={{
                      paddingLeft: 104, paddingRight: 40, paddingBottom: 32,
                      display: 'grid', gap: 18, maxWidth: 820
                    }}>
                      {ch.paras.map((p, j) => (
                        <p key={j} style={{
                          fontFamily: v1Styles.sans, fontSize: 16, lineHeight: 1.7,
                          color: v1Styles.ink, opacity: j === 0 ? 0.9 : 0.82, margin: 0
                        }}>{p}</p>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// Credentials strip, logo placeholders for educational institutions
const V1AboutCredentials = () => (
  <section style={{ background: v1Styles.paper, padding: '24px 64px 88px', borderBottom: `1px solid ${v1Styles.rule}` }}>
    <div style={{ maxWidth: 1100, margin: '0 auto' }}>
      <div style={{
        fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
        textTransform: 'uppercase', color: v1Styles.muted, textAlign: 'center', marginBottom: 40
      }}>
        Education & Credentials
      </div>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
        alignItems: 'center'
      }}>
        <div style={{
          padding: '24px 48px', textAlign: 'center',
          borderRight: `1px solid ${v1Styles.rule}`,
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18
        }}>
          <image-slot
            id="about-uf-logo"
            src="uf-logo.png"
            fit="contain"
            placeholder="University of Florida logo"
            shape="rect"
            style={{ width: '240px', height: '90px', background: 'transparent' }}
          ></image-slot>
          <div>
            <div style={{
              fontFamily: '"Newsreader", Georgia, serif', fontSize: 22, fontWeight: 500,
              color: v1Styles.ink, letterSpacing: '-0.01em'
            }}>University of Florida</div>
            <div style={{
              fontFamily: v1Styles.sans, fontSize: 13, color: v1Styles.muted,
              marginTop: 6, letterSpacing: '0.02em'
            }}>B.S. Business Marketing · Summa Cum Laude</div>
          </div>
        </div>
        <div style={{
          padding: '24px 48px', textAlign: 'center',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18
        }}>
          <image-slot
            id="about-harvard-logo"
            src="harvard-logo.png"
            fit="contain"
            placeholder="Drop Harvard logo here"
            shape="rect"
            style={{ width: '240px', height: '90px', background: 'transparent' }}
          ></image-slot>
          <div>
            <div style={{
              fontFamily: '"Newsreader", Georgia, serif', fontSize: 22, fontWeight: 500,
              color: v1Styles.ink, letterSpacing: '-0.01em'
            }}>Harvard Extension School</div>
            <div style={{
              fontFamily: v1Styles.sans, fontSize: 13, color: v1Styles.muted,
              marginTop: 6, letterSpacing: '0.02em'
            }}>M.A. Management · Leadership & Organizational Behavior</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// Lea Ann portrait, mirrored layout (text left, photo right) for visual variety
const V1LeaAnnPortrait = () => (
  <section style={{ background: v1Styles.paperWarm, padding: '72px 64px', borderTop: `1px solid ${v1Styles.rule}` }}>
    <div style={{
      maxWidth: 1280, margin: '0 auto',
      display: 'grid', gridTemplateColumns: '7fr 5fr', gap: 56, alignItems: 'start'
    }}>
      <div>
        <div style={{
          fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
          textTransform: 'uppercase', color: v1Styles.blue, fontWeight: 600, marginBottom: 20
        }}>Meet the Senior Trainer</div>
        <h2 style={{
          fontFamily: '"Newsreader", Georgia, serif', fontSize: 56, fontWeight: 500,
          lineHeight: 1.1, letterSpacing: '-0.02em', color: v1Styles.ink,
          margin: 0, textWrap: 'balance'
        }}>
          20 years employed by a dental practice, and still in one today.
        </h2>
        <p style={{
          fontFamily: v1Styles.sans, fontSize: 18, lineHeight: 1.7,
          color: v1Styles.ink, opacity: 0.85, margin: '32px 0 0'
        }}>
          Lea Ann Montoya is a practice management coach whose career spans nearly every role inside a dental office, dental assistant, administrative leader, Chief Operating Officer, and certified Dentrix trainer. She still works inside a thriving practice today, so her coaching is grounded in what actually works in patient customer service inside medical practices today.
        </p>

        {/* Signature line */}
        <div style={{
          marginTop: 32, paddingTop: 24, borderTop: `1px solid ${v1Styles.rule}`
        }}>
          <div style={{
            fontFamily: '"Newsreader", Georgia, serif', fontSize: 34, fontStyle: 'italic',
            color: v1Styles.ink, lineHeight: 1
          }}>Lea Ann Montoya</div>
          <div style={{
            fontFamily: v1Styles.sans, fontSize: 12, color: v1Styles.muted,
            letterSpacing: '0.18em', textTransform: 'uppercase', marginTop: 8
          }}>Senior Trainer</div>
        </div>
      </div>
      <div style={{
        aspectRatio: '4/5', borderRadius: 2, overflow: 'hidden',
        background: '#1a1f2a', position: 'sticky', top: 40
      }}>
        <img src="lea-ann-portrait.jpg" alt="Lea Ann Montoya" style={{
          width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 20%',
          display: 'block'
        }} />
      </div>
    </div>
  </section>
);

// Lea Ann accordion, Career and Life Outside of Work
const V1LeaAnnChapters = () => {
  const chapters = [
    {
      eyebrow: '01',
      title: 'Career',
      paras: [
        "Lea Ann Montoya is an experienced practice management coach with more than 20 years of hands-on experience in the dental industry. Her background spans nearly every facet of practice operations, including roles as a dental assistant, administrative leader, and Chief Operating Officer, giving her a unique understanding of the systems, communication, and leadership required to run a successful practice. Because of this real-world experience, Lea Ann's coaching is practical, implementation-focused, and grounded in the day-to-day realities dental teams face.",
        "From 2019 to 2024, Lea Ann served as a certified Dentrix trainer, earning Rookie of the Year in 2020 and Trainer of the Year in 2023. Her expertise in dental software systems and workflow optimization makes her a trusted partner for practices looking to improve efficiency, strengthen accountability, and create smoother patient experiences.",
        "Earlier in her career, Lea Ann participated in the BMW Lecture Series, where she coached dental teams across the country on presenting aesthetic and neuromuscular restorative treatment to patients. This experience strengthened her expertise in patient communication, treatment presentation, and case acceptance, skills that continue to shape her coaching today.",
        "What sets Lea Ann apart is that she continues to actively work inside a dental practice, giving her firsthand insight into the evolving challenges teams face every day. She understands what works in theory versus what works in the real world, allowing her to create training experiences that are highly practical, relevant, and immediately actionable."
      ]
    },
    {
      eyebrow: '02',
      title: 'Life Outside of Work',
      paras: [
        "Outside of consulting, Lea Ann enjoys reading, walking, and cheering on her beloved Gamecocks during football season. She and her husband, Jon, value time together and appreciate the balance between meaningful work, family, and the simple joys of everyday life."
      ]
    }
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{
      background: v1Styles.paperWarm,
      padding: '12px 64px 72px',
      borderBottom: `1px solid ${v1Styles.rule}`
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{
          fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
          textTransform: 'uppercase', color: v1Styles.muted, fontWeight: 600,
          textAlign: 'center', marginBottom: 12
        }}>Lea Ann's Story</div>
        <h2 style={{
          fontFamily: '"Newsreader", Georgia, serif', fontSize: 40, fontWeight: 500,
          lineHeight: 1.1, letterSpacing: '-0.02em', margin: '0 0 32px',
          color: v1Styles.ink, textAlign: 'center', textWrap: 'balance',
        }}>Coaching grounded in real-world practice experience.</h2>

        <div style={{ borderTop: `1px solid ${v1Styles.rule}` }}>
          {chapters.map((ch, i) => {
            const isOpen = open === i;
            return (
              <div key={ch.title} style={{ borderBottom: `1px solid ${v1Styles.rule}` }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: '100%', background: 'transparent', border: 'none',
                    padding: '24px 4px', cursor: 'pointer', textAlign: 'left',
                    display: 'grid', gridTemplateColumns: '80px 1fr 40px',
                    alignItems: 'center', gap: 24, color: v1Styles.ink,
                    fontFamily: 'inherit'
                  }}
                >
                  <div style={{
                    fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
                    textTransform: 'uppercase', color: v1Styles.blue, fontWeight: 600
                  }}>{ch.eyebrow}</div>
                  <h3 style={{
                    fontFamily: '"Newsreader", Georgia, serif', fontSize: 32, fontWeight: 500,
                    lineHeight: 1.15, letterSpacing: '-0.015em', margin: 0,
                    color: v1Styles.ink
                  }}>{ch.title}</h3>
                  <div style={{
                    justifySelf: 'end', width: 28, height: 28,
                    border: `1.5px solid ${v1Styles.ink}`, borderRadius: '50%',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    transition: 'transform 250ms ease',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)'
                  }}>
                    <svg width="12" height="12" viewBox="0 0 12 12">
                      <path d="M6 1v10M1 6h10" stroke={v1Styles.ink} strokeWidth="1.5" strokeLinecap="round" />
                    </svg>
                  </div>
                </button>
                <div style={{
                  display: 'grid', gridTemplateRows: isOpen ? '1fr' : '0fr',
                  transition: 'grid-template-rows 320ms ease'
                }}>
                  <div style={{ overflow: 'hidden' }}>
                    <div style={{
                      paddingLeft: 104, paddingRight: 40, paddingBottom: 32,
                      display: 'grid', gap: 18, maxWidth: 820
                    }}>
                      {ch.paras.map((p, j) => (
                        <p key={j} style={{
                          fontFamily: v1Styles.sans, fontSize: 16, lineHeight: 1.7,
                          color: v1Styles.ink, opacity: j === 0 ? 0.9 : 0.82, margin: 0
                        }}>{p}</p>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

const V1AboutPage = () => {
  const data = window.PP_DATA;
  return (
    <div style={{ background: v1Styles.paper, color: v1Styles.ink }}>
      <V1InteriorHero
        data={data}
        active="about"
        eyebrow="About Lauren"
        title="A coach who's worked inside 300+ medical practices."
        lede="I'm not a consultant who shows up with just a slide deck. For over a decade I've sat at front desks, participated in morning huddles, reviewed thousands of patient phone calls, and supervised treatment presentations. Thanks to these experiences and conversations with doctors and staff, I know what actually works."
      />
      <V1AboutPortrait data={data} />
      <V1Stats data={data} />
      <V1AboutChapters data={data} />
      <V1LeaAnnPortrait />
      <V1LeaAnnChapters />
      <V1CTAStrip
        data={data}
        kicker="Let's Talk"
        title="Curious what this could look like for your practice?"
        body="A 30-minute consult call is the best place to start. No pitch, no pressure, just an honest conversation."
      />
      <V1Footer data={data} />
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// TRAININGS PAGE
// ─────────────────────────────────────────────────────────────────────────────

const V1TrainingsCatalog = ({ data }) => (
  <section style={{ background: v1Styles.paper, padding: '120px 64px' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 80 }}>
        <div style={{
          fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
          textTransform: 'uppercase', color: v1Styles.blue, fontWeight: 600, marginBottom: 24
        }}>The Catalog</div>
        <h2 style={{
          fontFamily: '"Newsreader", Georgia, serif', fontSize: 56, fontWeight: 500, lineHeight: 1.1,
          letterSpacing: '-0.02em', margin: 0, color: v1Styles.ink, textWrap: 'balance',
           maxWidth: 1000, marginLeft: 'auto', marginRight: 'auto'
        }}>
          Four core programs. Mix and match for your practice.
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }}>
        {data.trainingPrograms.map((p, i) => (
          <article key={p.title} style={{
            background: '#fff', border: `1px solid ${v1Styles.rule}`,
            borderRadius: 4, padding: '48px 44px',
            display: 'flex', flexDirection: 'column', position: 'relative',
            minHeight: 280
          }}>
            <div style={{
              fontFamily: v1Styles.font, fontSize: 56, fontWeight: 500,
              color: v1Styles.blue, lineHeight: 1, letterSpacing: '-0.02em',
              marginBottom: 24, fontVariationSettings: '"opsz" 144', opacity: 0.85
            }}>0{i + 1}</div>
            <h3 style={{
              fontFamily: '"Newsreader", Georgia, serif', fontSize: 30, fontWeight: 500,
              lineHeight: 1.2, color: v1Styles.ink, margin: '0 0 18px',
              letterSpacing: '-0.01em'
            }}>{p.title}</h3>
            <p style={{
              fontFamily: v1Styles.sans, fontSize: 16, color: v1Styles.muted,
              margin: 0, lineHeight: 1.65
            }}>{p.summary}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const V1TrainingFormats = ({ data }) => {
  const formats = [
    {
      title: 'In-Office',
      tag: 'Full immersion',
      body: 'We come directly to your practice for an immersive full-day or multi-day training experience. Your team learns together through mock scenarios, real-time practice, open dialogue, and hands-on coaching tailored to how your office actually runs. The energy, focus, and team connection of in-person training help create momentum that sticks long after the day ends.',
      bullets: ['Full team training', '1–3 day formats', 'Custom curriculum'],
    },
    {
      title: 'Virtual',
      tag: 'Live & interactive',
      body: 'Virtual training offers a flexible, cost-effective way to train your team without losing the collaboration that makes learning stick. Through live discussion and interactive activities, teams stay engaged while benefiting from more intentional conversations and flexible scheduling. Trainings can also be broken into multiple sessions to reduce office closures and maintain momentum.',
      bullets: ['Full Team Training', 'More Focused Content', 'Recorded for New Hires'],
    }
  ];
  return (
    <section style={{ background: v1Styles.paperWarm, padding: '140px 64px', borderTop: `1px solid ${v1Styles.rule}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 80 }}>
          <div style={{
            fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
            textTransform: 'uppercase', color: v1Styles.blue, fontWeight: 600, marginBottom: 24
          }}>How It's Delivered</div>
          <h2 style={{
            fontFamily: '"Newsreader", Georgia, serif', fontSize: 52, fontWeight: 500, lineHeight: 1.1,
            letterSpacing: '-0.02em', margin: 0, color: v1Styles.ink, textWrap: 'balance',
          }}>
            Two formats.<br />Same proven framework.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32, maxWidth: 1000, margin: '0 auto' }}>
          {formats.map(f => (
            <div key={f.title} style={{
              background: v1Styles.paper, border: `1px solid ${v1Styles.rule}`,
              borderRadius: 4, padding: '40px 36px',
              display: 'flex', flexDirection: 'column'
            }}>
              <div style={{
                fontFamily: v1Styles.sans, fontSize: 11, fontWeight: 600,
                color: v1Styles.blue, letterSpacing: '0.22em', textTransform: 'uppercase',
                marginBottom: 16
              }}>{f.tag}</div>
              <h3 style={{
                fontFamily: '"Newsreader", Georgia, serif', fontSize: 36, fontWeight: 500,
                lineHeight: 1.1, color: v1Styles.ink, margin: '0 0 18px',
                letterSpacing: '-0.01em'
              }}>{f.title}</h3>
              <p style={{
                fontFamily: v1Styles.sans, fontSize: 15, color: v1Styles.muted,
                margin: '0 0 24px', lineHeight: 1.65, flex: 1
              }}>{f.body}</p>
              <ul style={{
                margin: '0 0 8px', padding: 0, listStyle: 'none',
                display: 'grid', gap: 10
              }}>
                {f.bullets.map(b => (
                  <li key={b} style={{
                    display: 'flex', alignItems: 'center', gap: 12,
                    fontFamily: v1Styles.sans, fontSize: 13, color: v1Styles.ink,
                    fontWeight: 500
                  }}>
                    <span style={{
                      flexShrink: 0, width: 5, height: 5, borderRadius: '50%', background: v1Styles.blue
                    }} />
                    {b}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// Advanced & Specialized Trainings, dense 2-col list, hairline-divided
const V1AdvancedTrainings = ({ data }) => {
  const items = [
    { title: 'Quarterly Leadership Retreats', body: 'Develop leaders at every level with clarity and accountability.' },
    { title: 'Culture & Team Building',       body: 'Strengthen trust, teamwork, and motivation.' },
    { title: 'Patient & Team Communication',  body: 'Verbiage, role-play, and strategies for better interactions.' },
    { title: 'Keeping the Schedule Full',     body: 'Recall, reactivation, and proactive scheduling systems.' },
    { title: 'Scheduling for Production',     body: 'Build a schedule that supports growth and reduces stress.' },
    { title: 'Marketing Strategy',            body: 'Leverage internal and external marketing to attract the right patients.' },
    { title: 'AR & Collections',              body: 'Reduce overdue accounts, improve financial systems, and increase cash flow.' },
    { title: 'Refining Systems & Processes',  body: 'Tighten up workflows and remove inefficiencies.' },
    { title: 'New Hire Crash Course',         body: 'Fast-track onboarding for new team members.' },
    { title: 'Custom Trainings by Request',   body: "Tailored to your practice's unique needs." }
  ];
  return (
    <section style={{ background: v1Styles.paper, padding: '120px 64px', borderTop: `1px solid ${v1Styles.rule}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 72 }}>
          <div style={{
            fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
            textTransform: 'uppercase', color: v1Styles.blue, fontWeight: 600, marginBottom: 24
          }}>Going Deeper</div>
          <h2 style={{
            fontFamily: '"Newsreader", Georgia, serif', fontSize: 52, fontWeight: 500, lineHeight: 1.1,
            letterSpacing: '-0.02em', margin: 0, color: v1Styles.ink, textWrap: 'balance',
          }}>
            Advanced & Specialized Trainings
          </h2>
          <p style={{
            fontFamily: v1Styles.sans, fontSize: 18, lineHeight: 1.6, margin: '24px auto 0',
            color: v1Styles.muted, maxWidth: 820
          }}>
            In addition to our core trainings, we offer deeper dives and specific courses designed to maximize your team's growth and practice performance.
          </p>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
          columnGap: 56, rowGap: 0,
          borderTop: `1px solid ${v1Styles.rule}`
        }}>
          {items.map((it, i) => (
            <div key={it.title} style={{
              padding: '24px 0',
              borderBottom: `1px solid ${v1Styles.rule}`,
              display: 'grid', gridTemplateColumns: '20px 1fr', gap: 16, alignItems: 'baseline'
            }}>
              <div style={{
                fontFamily: v1Styles.sans, fontSize: 11, fontWeight: 700,
                color: v1Styles.blue, letterSpacing: '0.05em', textAlign: 'right',
                lineHeight: 1.4
              }}>{String(i + 1).padStart(2, '0')}</div>
              <div>
                <h3 style={{
                  fontFamily: '"Newsreader", Georgia, serif', fontSize: 21, fontWeight: 500,
                  color: v1Styles.ink, margin: '0 0 6px', letterSpacing: '-0.005em',
                  lineHeight: 1.25
                }}>{it.title}</h3>
                <p style={{
                  fontFamily: v1Styles.sans, fontSize: 14, color: v1Styles.muted,
                  margin: 0, lineHeight: 1.55
                }}>{it.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// Slim guarantee banner, sits above the engagement process
const V1Guarantee = ({ data }) => (
  <section style={{ background: v1Styles.ink, color: '#fff', padding: '64px 64px', borderTop: `1px solid ${v1Styles.rule}` }}>
    <div style={{
      maxWidth: 1280, margin: '0 auto',
      display: 'grid', gridTemplateColumns: '4fr 8fr', gap: 64, alignItems: 'start'
    }}>
      <div>
        <div style={{
          fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
          textTransform: 'uppercase', color: '#9eaaff', fontWeight: 600, marginBottom: 16
        }}>The Promise</div>
        <h2 style={{
          fontFamily: '"Newsreader", Georgia, serif', fontSize: 44, fontWeight: 500, lineHeight: 1.05,
          letterSpacing: '-0.02em', margin: 0, color: '#fff', textWrap: 'balance',
        }}>Our Guarantee</h2>
      </div>
      <div style={{
        fontFamily: v1Styles.sans, fontSize: 16, lineHeight: 1.65,
        color: 'rgba(255,255,255,0.82)', display: 'grid', gap: 16,
        borderLeft: '1px solid rgba(255,255,255,0.15)', paddingLeft: 48
      }}>
        <p style={{ margin: 0 }}>
          We believe in overdelivering for every client and want this investment to be one of the best decisions you make for your practice. Because of that, if we ever miss the mark, we offer a <span style={{ color: '#fff', fontWeight: 600 }}>100% refund</span> and will part ways, no hard feelings.
        </p>
        <p style={{ margin: 0 }}>
          Why? We intentionally work with a limited number of practices and believe every partnership should be a true win-win. If at any point the relationship no longer feels like a fit for you (or for us), we will not continue.
        </p>
        <p style={{ margin: 0, fontFamily: '"Newsreader", Georgia, serif', fontSize: 20, fontStyle: 'italic', color: '#fff', opacity: 0.95 }}>
          We are confident in our ability to help your team grow, improve, and get closer to reaching their full potential.
        </p>
      </div>
    </div>
  </section>
);

// "What a typical engagement looks like", process strip
const V1TrainingProcess = ({ data }) => {
  const steps = [
    { n: '1', title: 'Discovery call', body: 'A 30-minute consult to understand your practice, your team, and what you\'re trying to change.' },
    { n: '2', title: 'Custom proposal', body: 'We map a training plan to your practice, format, length, curriculum, and investment.' },
    { n: '3', title: 'Deeper dive', body: 'We talk more about your specific needs and ensure the upcoming trainings will deliver meaningful outcomes.' },
    { n: '4', title: 'Train your team', body: 'In-office, virtual, or both. Your team gets the frameworks, the language, and the practice reps.' },
    { n: '5', title: 'Follow-up rhythm', body: 'We don\'t disappear after the training. Built-in check-ins keep the change in motion.' }
  ];
  return (
    <section style={{ background: v1Styles.paper, padding: '140px 64px', borderTop: `1px solid ${v1Styles.rule}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 80 }}>
          <div style={{
            fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
            textTransform: 'uppercase', color: v1Styles.blue, fontWeight: 600, marginBottom: 24
          }}>What To Expect</div>
          <h2 style={{
            fontFamily: '"Newsreader", Georgia, serif', fontSize: 52, fontWeight: 500, lineHeight: 1.1,
            letterSpacing: '-0.02em', margin: 0, color: v1Styles.ink, textWrap: 'balance',
          }}>
            A typical engagement, start to finish.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, position: 'relative' }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              padding: '0 22px',
              borderRight: i < steps.length - 1 ? `1px solid ${v1Styles.rule}` : 'none'
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: '50%', background: v1Styles.blue,
                color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: v1Styles.font, fontSize: 22, fontWeight: 500,
                marginBottom: 24, letterSpacing: '-0.02em'
              }}>{s.n}</div>
              <h3 style={{
                fontFamily: '"Newsreader", Georgia, serif', fontSize: 24, fontWeight: 500,
                lineHeight: 1.2, color: v1Styles.ink, margin: '0 0 14px',
                letterSpacing: '-0.005em'
              }}>{s.title}</h3>
              <p style={{
                fontFamily: v1Styles.sans, fontSize: 15, color: v1Styles.muted,
                margin: 0, lineHeight: 1.6
              }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// OFFICE GALLERY — "A year of in-office days"
// Sticky field-notes heading on the left; horizontal-scrolling filmstrip of
// eight candid photographs on the right with numbered, hairline-divided
// captions. Slot ids are stable so dropped photos persist.
// ─────────────────────────────────────────────────────────────────────────────

const V1OfficeGallery = ({ data }) => {
  // Photos + captions. Edit the title/note strings to taste — they appear under
  // each card in the filmstrip.
  const entries = [
    { src: 'images/office/office1.jpg', title: 'Master Class Series',   note: 'Product & Treatment Communication workshop.' },
    { src: 'images/office/office2.jpg', title: 'Office welcome',        note: 'Front-steps team photo before day one.' },
    { src: 'images/office/office3.jpg', title: 'Master Class graduates',note: 'Full cohort, closing session.' },
    { src: 'images/office/office4.jpg', title: 'In-office training',    note: 'Team day inside the practice.' },
    { src: 'images/office/office5.jpg', title: 'Off-site retreat',      note: 'Leadership intensive, full team.' },
    { src: 'images/office/office6.jpg', title: 'Key Dental Group',      note: 'Full-team training day.' },
    { src: 'images/office/office8.jpg', title: 'In-office training',    note: 'Full team gathered at the practice.' },
    { src: 'images/office/office9.jpg', title: 'Awards ceremony',       note: 'Closing day, recognition & medals.' },
  ];
  const scrollerRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);
  const [active, setActive] = React.useState(1);

  // Track scroll position to update the progress bar + counter
  React.useEffect(() => {
    const el = scrollerRef.current;
    if (!el) return;
    const update = () => {
      const max = el.scrollWidth - el.clientWidth;
      const p = max > 0 ? el.scrollLeft / max : 0;
      setProgress(p);
      // approximate which card is centered
      const card = el.querySelector('[data-card]');
      if (card) {
        const gap = 24;
        const w = card.getBoundingClientRect().width + gap;
        const idx = Math.min(entries.length, Math.max(1, Math.round(el.scrollLeft / w) + 1));
        setActive(idx);
      }
    };
    update();
    el.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);
    return () => {
      el.removeEventListener('scroll', update);
      window.removeEventListener('resize', update);
    };
  }, []);

  const step = (dir) => {
    const el = scrollerRef.current;
    if (!el) return;
    const card = el.querySelector('[data-card]');
    if (!card) return;
    const gap = 24;
    const w = card.getBoundingClientRect().width + gap;
    el.scrollBy({ left: dir * w, behavior: 'smooth' });
  };

  return (
    <section style={{
      background: v1Styles.paper, padding: '120px 0 120px 64px',
      borderTop: `1px solid ${v1Styles.rule}`, overflow: 'hidden'
    }}>
      <style>{`
        .v1-gallery-scroll::-webkit-scrollbar { display: none; }
        .v1-gallery-scroll { scrollbar-width: none; -ms-overflow-style: none; }
        .v1-gallery-card image-slot { display: block; width: 100%; height: 100%; }
      `}</style>
      <div style={{
        maxWidth: 1400, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '380px 1fr', gap: 64, alignItems: 'start'
      }}>
        {/* LEFT, sticky field-notes heading */}
        <div style={{ position: 'sticky', top: 80, paddingRight: 16 }}>
          <div style={{
            fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
            textTransform: 'uppercase', color: v1Styles.blue, fontWeight: 600, marginBottom: 24
          }}>Field Notes</div>
          <h2 style={{
            fontFamily: '"Newsreader", Georgia, serif', fontSize: 48, fontWeight: 500, lineHeight: 1.05,
            letterSpacing: '-0.02em', margin: 0, color: v1Styles.ink, textWrap: 'balance',
          }}>
            A year of in-office days.
          </h2>
          <p style={{
            fontFamily: v1Styles.sans, fontSize: 16, lineHeight: 1.65,
            color: v1Styles.muted, margin: '28px 0 0'
          }}>
            Eight visits from the last twelve months. Different cities, different specialties, the same work, getting a team in a room together and making progress real.
          </p>

          <div style={{
            marginTop: 32, paddingTop: 24, borderTop: `1px solid ${v1Styles.rule}`,
            fontFamily: '"Newsreader", Georgia, serif', fontStyle: 'italic',
            fontSize: 20, color: v1Styles.ink, lineHeight: 1.45
          }}>
            "The day was the start of a whole new way of working together."
            <div style={{
              fontFamily: v1Styles.sans, fontStyle: 'normal', fontSize: 11,
              color: v1Styles.muted, letterSpacing: '0.18em', textTransform: 'uppercase',
              marginTop: 12, fontWeight: 600
            }}>
              Practice Owner · Birmingham
            </div>
          </div>

          {/* Controls + counter + progress */}
          <div style={{ marginTop: 40 }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 16, marginBottom: 16
            }}>
              <button onClick={() => step(-1)} aria-label="Previous" style={{
                width: 44, height: 44, borderRadius: '50%',
                border: `1px solid ${v1Styles.rule}`, background: 'transparent',
                cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: v1Styles.ink, transition: 'all 0.2s'
              }}
              onMouseEnter={e => { e.currentTarget.style.background = v1Styles.ink; e.currentTarget.style.color = '#fff'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = v1Styles.ink; }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6" /></svg>
              </button>
              <button onClick={() => step(1)} aria-label="Next" style={{
                width: 44, height: 44, borderRadius: '50%',
                border: `1px solid ${v1Styles.rule}`, background: 'transparent',
                cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: v1Styles.ink, transition: 'all 0.2s'
              }}
              onMouseEnter={e => { e.currentTarget.style.background = v1Styles.ink; e.currentTarget.style.color = '#fff'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = v1Styles.ink; }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6l6 6-6 6" /></svg>
              </button>
              <div style={{
                fontFamily: v1Styles.sans, fontSize: 13, color: v1Styles.muted,
                letterSpacing: '0.08em', marginLeft: 4
              }}>
                <span style={{ color: v1Styles.ink, fontWeight: 600 }}>{String(active).padStart(2, '0')}</span>
                <span style={{ margin: '0 6px' }}>/</span>
                <span>{String(entries.length).padStart(2, '0')}</span>
              </div>
            </div>
            <div style={{
              height: 2, background: v1Styles.rule, position: 'relative', maxWidth: 280
            }}>
              <div style={{
                position: 'absolute', top: 0, left: 0, bottom: 0,
                width: `${Math.max(12, progress * 100)}%`,
                background: v1Styles.blue,
                transition: 'width 0.2s ease-out'
              }} />
            </div>
          </div>
        </div>

        {/* RIGHT, horizontal-scroll filmstrip */}
        <div
          ref={scrollerRef}
          className="v1-gallery-scroll"
          style={{
            display: 'grid',
            gridAutoFlow: 'column',
            gridAutoColumns: 'minmax(440px, 480px)',
            gap: 24,
            overflowX: 'auto',
            scrollSnapType: 'x mandatory',
            paddingBottom: 8,
            paddingRight: 64,
            paddingLeft: 4,
          }}
        >
          {entries.map((e, i) => (
            <figure
              key={i}
              data-card
              className="v1-gallery-card"
              style={{
                margin: 0,
                scrollSnapAlign: 'start',
                display: 'flex', flexDirection: 'column'
              }}
            >
              <div style={{
                width: '100%', aspectRatio: '4/3',
                background: v1Styles.paperWarm,
                border: `1px solid ${v1Styles.rule}`,
                overflow: 'hidden', position: 'relative',
                display: 'flex', alignItems: 'center', justifyContent: 'center'
              }}>
                <img
                  src={e.src}
                  alt={e.title}
                  loading="lazy"
                  style={{
                    width: '100%', height: '100%', objectFit: 'contain',
                    display: 'block', filter: 'saturate(0.94) contrast(1.02)'
                  }}
                />
              </div>
              <figcaption style={{
                paddingTop: 16, marginTop: 16, borderTop: `1px solid ${v1Styles.rule}`,
                display: 'grid', gridTemplateColumns: '36px 1fr', gap: 12
              }}>
                <span style={{
                  fontFamily: v1Styles.sans, fontSize: 10, fontWeight: 700,
                  color: v1Styles.blue, letterSpacing: '0.18em', paddingTop: 4
                }}>{String(i + 1).padStart(2, '0')}</span>
                <div>
                  <div style={{
                    fontFamily: '"Newsreader", Georgia, serif', fontSize: 18, fontWeight: 500,
                    color: v1Styles.ink, lineHeight: 1.25, letterSpacing: '-0.005em',
                  }}>{e.title}</div>
                  <div style={{
                    fontFamily: v1Styles.sans, fontSize: 13, color: v1Styles.muted,
                    lineHeight: 1.5, marginTop: 4
                  }}>{e.note}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
};

const V1TrainingsPage = () => {
  const data = window.PP_DATA;
  return (
    <div style={{ background: v1Styles.paper, color: v1Styles.ink }}>
      <V1InteriorHero
        data={data}
        active="trainings"
        eyebrow="Training Programs"
        title="Medical Practice Training & Coaching Built for High Performing Teams"
        lede="Customized training, leadership coaching, and systems support to help medical practices improve the patient experience, strengthen teams, increase accountability, and grow with less chaos."
      />
      <V1Programs data={data} />
      <V1AdvancedTrainings data={data} />
      <V1TrainingFormats data={data} />
      <V1OfficeGallery data={data} />
      <V1Guarantee data={data} />
      <V1TrainingProcess data={data} />
      <V1CTAStrip
        data={data}
        kicker="Ready to Start"
        title="Pick the right trainings for your team."
        body="Book a consult and we'll walk you through what each program looks like in practice, and what we'd recommend for your specific situation."
      />
      <V1Footer data={data} />
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// COACHING PAGE
// ─────────────────────────────────────────────────────────────────────────────

// Intro, opening note
const V1CoachingIntro = ({ data }) => (
  <section style={{ background: v1Styles.paper, padding: '72px 64px', borderTop: `1px solid ${v1Styles.rule}` }}>
    <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
      <div style={{
        fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
        textTransform: 'uppercase', color: v1Styles.blue, fontWeight: 600, marginBottom: 24
      }}>The Partnership</div>
      <h2 style={{
        fontFamily: '"Newsreader", Georgia, serif', fontSize: 48, fontWeight: 500, lineHeight: 1.05,
        letterSpacing: '-0.02em', margin: 0, color: v1Styles.ink, textWrap: 'balance',
      }}>
        Leadership can feel lonely.
      </h2>
      <p style={{
        fontFamily: v1Styles.sans, fontSize: 18, lineHeight: 1.65,
        color: v1Styles.ink, opacity: 0.82, margin: '28px 0 0', textAlign: 'left'
      }}>
        As a practice owner, you are constantly making decisions about the future of your business, often without anyone who truly understands the realities of ownership. Your family and friends care deeply, but they may not fully understand the weight of balancing patient care, leadership, and running a business.
      </p>
      <p style={{
        fontFamily: v1Styles.sans, fontSize: 18, lineHeight: 1.65,
        color: v1Styles.ink, opacity: 0.82, margin: '20px 0 0', textAlign: 'left'
      }}>
        Coaching gives you a confidential space to navigate the real challenges, whether it's a difficult team situation, leadership frustration, financial concern, or a vision that feels unclear. It's also a place to celebrate the wins that not everyone understands: hitting a big goal, watching a team member step up and lead well, or finally seeing the progress you have worked so hard for.
      </p>
    </div>
  </section>
);

// Four pillars, what we work on together
const V1CoachingPillars = ({ data }) => {
  const pillars = [
    {
      n: '01',
      title: 'Leadership clarity',
      body: 'Get clear on who you are as a leader, what you stand for, and how to communicate expectations in a way your team actually follows.'
    },
    {
      n: '02',
      title: 'Accountability systems',
      body: 'Build the structure your practice needs so accountability no longer falls entirely on you. Clear expectations, stronger ownership, fewer repeated conversations.'
    },
    {
      n: '03',
      title: 'Business strategy',
      body: 'Get clear on where your practice is headed and how to make decisions that support long-term growth. Turn your vision into a practical roadmap with priorities that actually move the business forward.'
    },
    {
      n: '04',
      title: 'Financial discipline',
      body: 'Gain confidence in the numbers behind your business. Understand key metrics, profitability, overhead, and what is driving growth so you can make smarter decisions with clarity.'
    }
  ];
  return (
    <section style={{ background: v1Styles.paperWarm, padding: '84px 64px', borderTop: `1px solid ${v1Styles.rule}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div style={{
            fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
            textTransform: 'uppercase', color: v1Styles.blue, fontWeight: 600, marginBottom: 24
          }}>What We Work On</div>
          <h2 style={{
            fontFamily: '"Newsreader", Georgia, serif', fontSize: 52, fontWeight: 500, lineHeight: 1.1,
            letterSpacing: '-0.02em', margin: 0, color: v1Styles.ink, textWrap: 'balance',
          }}>
            Four pillars of a practice that grows on purpose.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 28 }}>
          {pillars.map(p => (
            <article key={p.n} style={{
              background: v1Styles.paper, border: `1px solid ${v1Styles.rule}`,
              borderRadius: 4, padding: '40px 36px',
              display: 'flex', gap: 32, alignItems: 'flex-start'
            }}>
              <div style={{
                fontFamily: '"Newsreader", Georgia, serif', fontSize: 56, fontWeight: 500,
                color: v1Styles.blue, lineHeight: 0.9, letterSpacing: '-0.02em',
                 flexShrink: 0, minWidth: 80
              }}>{p.n}</div>
              <div>
                <h3 style={{
                  fontFamily: '"Newsreader", Georgia, serif', fontSize: 28, fontWeight: 500,
                  lineHeight: 1.15, color: v1Styles.ink, margin: '0 0 12px',
                  letterSpacing: '-0.01em'
                }}>{p.title}</h3>
                <p style={{
                  fontFamily: v1Styles.sans, fontSize: 15, color: v1Styles.muted,
                  margin: 0, lineHeight: 1.65
                }}>{p.body}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// Cadence, what's included over the year
const V1CoachingCadence = ({ data }) => {
  const items = [
    { kicker: 'One Day', title: 'Vision retreat', body: 'In a one-day private workshop in Atlanta or over Zoom we lay out your long-term goals and the action plan for the next year. We look at strengths and weaknesses, how to maximize your revenue per hour, and how to build the practice and life you love. Step away from your business and see the forest among the trees.' },
    { kicker: 'Every Month', title: 'Monthly Zoom coaching calls', body: 'Keep priorities straight and get ahead of challenges by setting a clear plan and definable goals during our 1-on-1 phone calls. These consistent calls let us evaluate the existing plan to ensure the business is executing at a high level, and promote action and accountability.' },
    { kicker: 'On Demand', title: 'Emergency "Help" calls', body: 'When unexpected challenges come your way, you have a trusted advisor to help. Don\'t make an emotional decision or agonize in isolation. Instead, you have a lifeline to contact me when troubles or opportunities arise. Together we can analyze the situation and arrive at a solution.' },
    { kicker: 'Ongoing', title: 'Personalized leadership insights & resources', body: 'Periodic coaching videos, tools, and resources tailored to the challenges we are discussing, opportunities inside your practice, or common struggles impacting similar practice owners. Get focused guidance without having to sort through endless business books or generic leadership advice.' }
  ];
  return (
    <section style={{ background: v1Styles.paper, padding: '84px 64px', borderTop: `1px solid ${v1Styles.rule}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 80, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 80 }}>
            <div style={{
              fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
              textTransform: 'uppercase', color: v1Styles.blue, fontWeight: 600, marginBottom: 24
            }}>What's Included</div>
            <h2 style={{
              fontFamily: '"Newsreader", Georgia, serif', fontSize: 48, fontWeight: 500, lineHeight: 1.05,
              letterSpacing: '-0.02em', margin: 0, color: v1Styles.ink, textWrap: 'balance',
            }}>
              The cadence of a year together.
            </h2>
            <p style={{
              fontFamily: v1Styles.sans, fontSize: 16, lineHeight: 1.65,
              color: v1Styles.muted, margin: '28px 0 0'
            }}>
              Coaching is a 12-month engagement. The rhythm below repeats every quarter so momentum compounds, and so the work survives the busy weeks.
            </p>
          </div>
          <div style={{ borderTop: `1px solid ${v1Styles.rule}` }}>
            {items.map((it) => (
              <div key={it.title} style={{
                padding: '28px 0', borderBottom: `1px solid ${v1Styles.rule}`,
                display: 'grid', gridTemplateColumns: '180px 1fr', gap: 32, alignItems: 'baseline'
              }}>
                <div style={{
                  fontFamily: v1Styles.sans, fontSize: 11, fontWeight: 600,
                  color: v1Styles.blue, letterSpacing: '0.22em', textTransform: 'uppercase'
                }}>{it.kicker}</div>
                <div>
                  <h3 style={{
                    fontFamily: '"Newsreader", Georgia, serif', fontSize: 26, fontWeight: 500,
                    lineHeight: 1.2, color: v1Styles.ink, margin: '0 0 8px',
                    letterSpacing: '-0.005em'
                  }}>{it.title}</h3>
                  <p style={{
                    fontFamily: v1Styles.sans, fontSize: 15, color: v1Styles.muted,
                    margin: 0, lineHeight: 1.65
                  }}>{it.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// Fit, is coaching right for you
const V1CoachingFit = ({ data }) => {
  const yes = [
    'You own (or co-own) the practice and the buck stops with you.',
    'You want someone who will tell you the truth, not just agree with you.',
    'You\'re willing to work between sessions, not just on call.',
    'You understand culture starts with you, you lead the change with your actions first, and others will follow.',
    'You want a coach who looks past just financials and sees all aspects of your business and life.'
  ];
  const no = [
    'You\'re looking for a quick fix or everything to be solved at once.',
    'You want a coach to run the practice for you.',
    'You don\'t trust your team or refuse to delegate tasks.',
    'You aren\'t a servant-based leader who wants to create a great work environment for your employees.',
    'You aren\'t open to changing how you lead.'
  ];
  return (
    <section style={{ background: v1Styles.paperWarm, padding: '84px 64px', borderTop: `1px solid ${v1Styles.rule}` }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div style={{
            fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
            textTransform: 'uppercase', color: v1Styles.blue, fontWeight: 600, marginBottom: 24
          }}>Is This For You</div>
          <h2 style={{
            fontFamily: '"Newsreader", Georgia, serif', fontSize: 52, fontWeight: 500, lineHeight: 1.1,
            letterSpacing: '-0.02em', margin: 0, color: v1Styles.ink, textWrap: 'balance',
          }}>
            Coaching works when the fit is right.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
          <div style={{
            background: v1Styles.paper, border: `1px solid ${v1Styles.rule}`,
            borderRadius: 4, padding: '40px 36px'
          }}>
            <div style={{
              fontFamily: v1Styles.sans, fontSize: 11, fontWeight: 600,
              color: v1Styles.blue, letterSpacing: '0.22em', textTransform: 'uppercase',
              marginBottom: 16
            }}>A great fit if</div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 14 }}>
              {yes.map((t, i) => (
                <li key={i} style={{
                  display: 'flex', alignItems: 'flex-start', gap: 14,
                  fontFamily: v1Styles.sans, fontSize: 15, color: v1Styles.ink,
                  lineHeight: 1.55
                }}>
                  <span aria-hidden="true" style={{
                    flexShrink: 0, marginTop: 4, width: 18, height: 18,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
                  }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={v1Styles.blue} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M5 12l5 5L20 7" />
                    </svg>
                  </span>
                  {t}
                </li>
              ))}
            </ul>
          </div>
          <div style={{
            background: 'transparent', border: `1px dashed ${v1Styles.rule}`,
            borderRadius: 4, padding: '40px 36px'
          }}>
            <div style={{
              fontFamily: v1Styles.sans, fontSize: 11, fontWeight: 600,
              color: v1Styles.muted, letterSpacing: '0.22em', textTransform: 'uppercase',
              marginBottom: 16
            }}>Probably not if</div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 14 }}>
              {no.map((t, i) => (
                <li key={i} style={{
                  display: 'flex', alignItems: 'flex-start', gap: 14,
                  fontFamily: v1Styles.sans, fontSize: 15, color: v1Styles.muted,
                  lineHeight: 1.55
                }}>
                  <span aria-hidden="true" style={{
                    flexShrink: 0, marginTop: 4, width: 18, height: 18,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
                  }}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={v1Styles.muted} strokeWidth="2.4" strokeLinecap="round">
                      <path d="M6 6l12 12M18 6L6 18" />
                    </svg>
                  </span>
                  {t}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

// Questions, examples of ideas we discuss
const V1CoachingQuestions = ({ data }) => {
  const questions = [
    'What should I focus my time and energy on when I am responsible for so much?',
    'How do I become a leader who can motivate and inspire my team to greatness?',
    'How do I improve the bottom line without compromising my passion as a doctor?',
    'How should I approach a difficult conversation with a team member?',
    'When is it time for me to terminate one of my staff members?',
    'What goals should I set, and what are the steps to get there?'
  ];
  return (
    <section style={{ background: v1Styles.ink, color: '#fff', padding: '84px 64px', borderTop: `1px solid ${v1Styles.rule}` }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div style={{
            fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
            textTransform: 'uppercase', color: '#9eaaff', fontWeight: 600, marginBottom: 24
          }}>Sound Familiar?</div>
          <h2 style={{
            fontFamily: '"Newsreader", Georgia, serif', fontSize: 48, fontWeight: 500, lineHeight: 1.1,
            letterSpacing: '-0.02em', margin: 0, color: '#fff', textWrap: 'balance',
          }}>
            Questions we work through together.
          </h2>
          <p style={{
            fontFamily: v1Styles.sans, fontSize: 16, lineHeight: 1.6, margin: '20px auto 0',
            color: 'rgba(255,255,255,0.65)', maxWidth: 680
          }}>
            A few examples of the conversations that come up inside coaching, not theory, but the real decisions you're sitting with right now.
          </p>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
          columnGap: 48, rowGap: 0,
          borderTop: '1px solid rgba(255,255,255,0.14)'
        }}>
          {questions.map((q, i) => (
            <div key={i} style={{
              padding: '26px 0', borderBottom: '1px solid rgba(255,255,255,0.14)',
              display: 'flex', alignItems: 'flex-start', gap: 20
            }}>
              <div style={{
                fontFamily: v1Styles.sans, fontSize: 11, fontWeight: 600,
                color: '#9eaaff', letterSpacing: '0.18em',
                flexShrink: 0, paddingTop: 6, minWidth: 28
              }}>{String(i + 1).padStart(2, '0')}</div>
              <div style={{
                fontFamily: '"Newsreader", Georgia, serif', fontSize: 22, lineHeight: 1.4,
                color: '#fff', fontWeight: 400,
                letterSpacing: '-0.005em',
                textWrap: 'balance'
              }}>{q}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const V1CoachingPage = () => {
  const data = window.PP_DATA;
  return (
    <div style={{ background: v1Styles.paper, color: v1Styles.ink }}>
      <V1InteriorHero
        data={data}
        active="coaching"
        eyebrow="Business Coaching"
        title="Medical Practice Coaching for Doctors Who Want to Grow Without Burning Out"
        subhead="Grow Your Practice. Lead Your Team. Love Your Life Again."
      />
      <V1CoachingIntro data={data} />
      <V1CoachingQuestions data={data} />
      <V1CoachingPillars data={data} />
      <V1CoachingCadence data={data} />
      <V1CoachingFit data={data} />
      <V1CTAStrip
        data={data}
        kicker="Take The Next Step"
        title="See if we're a fit."
        body="The first call is a 30-minute consult, no pitch, no pressure. We'll talk about where you are, what you want, and whether coaching is the right way to get there."
      />
      <V1Footer data={data} />
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// PRICING PAGE
// ─────────────────────────────────────────────────────────────────────────────

const V1PricingTiers = ({ data }) => {
  const tiers = [
    {
      tag: 'Starter',
      title: 'Team JumpStart',
      pitch: 'One year of focused training and accountability to build new habits with your team.',
      included: [
        '3 In-Office Trainings',
        '3 Implementation Virtual Calls',
        '3 Months Phone Auditing',
        '3 Months 1:1 Coaching'
      ],
      regular: '$1,499',
      price: '$1,399',
      cadence: '/Mo'
    },
    {
      tag: 'Most Popular',
      title: 'Team Accelerator',
      pitch: 'A deeper engagement with added training and ongoing reinforcement.',
      included: [
        '4 In-Office Trainings',
        '4 Implementation Virtual Calls',
        '3 Months Phone Auditing',
        '3 Months 1:1 Phone Coaching',
        '6 Months Access to Phone Online Course'
      ],
      regular: '$2,099',
      price: '$1,833',
      cadence: '/Mo',
      featured: true
    },
    {
      tag: 'Full Partnership',
      title: 'All In Now',
      pitch: 'A full-year, all-access partnership covering leadership, training, and coaching.',
      included: [
        '4 In-Office Trainings',
        '4 Implementation Virtual Calls',
        '12 Months Phone Auditing',
        '3 Months 1:1 Phone Coaching',
        'Unlimited Access to Online Phone Course',
        '4 Leadership In-Office Trainings',
        'No-Cost Customization Upgrades'
      ],
      regular: '$4,331',
      price: '$3,499',
      cadence: '/Mo'
    }
  ];
  return (
    <section style={{ background: v1Styles.paper, padding: '32px 64px 60px' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28, gridAutoRows: '1fr' }}>
          {tiers.map((t) => {
            const featured = !!t.featured;
            return (
              <article key={t.title} style={{
                background: featured ? v1Styles.ink : '#fff',
                color: featured ? '#fff' : v1Styles.ink,
                border: featured ? `1px solid ${v1Styles.ink}` : `1px solid ${v1Styles.rule}`,
                borderRadius: 4,
                padding: '44px 40px 40px',
                display: 'flex', flexDirection: 'column',
                position: 'relative', overflow: 'hidden',
                boxShadow: featured ? '0 12px 36px rgba(15,20,25,0.18)' : 'none'
              }}>
                <div style={{
                  fontFamily: v1Styles.sans, fontSize: 11, fontWeight: 600,
                  color: featured ? '#9eaaff' : v1Styles.blue,
                  letterSpacing: '0.22em', textTransform: 'uppercase',
                  marginBottom: 14
                }}>{t.tag}</div>
                <h3 style={{
                  fontFamily: '"Newsreader", Georgia, serif', fontSize: 38, fontWeight: 500,
                  lineHeight: 1.1, margin: '0 0 14px',
                  letterSpacing: '-0.015em'
                }}>{t.title}</h3>
                <p style={{
                  fontFamily: v1Styles.sans, fontSize: 15, lineHeight: 1.5,
                  margin: '0 0 28px', opacity: featured ? 0.8 : 0.7
                }}>{t.pitch}</p>

                {/* Price block */}
                <div style={{
                  padding: '24px 0', borderTop: `1px solid ${featured ? 'rgba(255,255,255,0.18)' : v1Styles.rule}`,
                  borderBottom: `1px solid ${featured ? 'rgba(255,255,255,0.18)' : v1Styles.rule}`,
                  margin: '0 0 28px'
                }}>
                  <div style={{
                    fontFamily: v1Styles.sans, fontSize: 14,
                    color: featured ? 'rgba(255,255,255,0.55)' : v1Styles.muted,
                    textDecoration: 'line-through', marginBottom: 4
                  }}>{t.regular}/Mo</div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, flexWrap: 'wrap' }}>
                    <span style={{
                      fontFamily: '"Newsreader", Georgia, serif', fontSize: 48, fontWeight: 500,
                      letterSpacing: '-0.02em', lineHeight: 1,
                    }}>{t.price}</span>
                    <span style={{
                      fontFamily: v1Styles.sans, fontSize: 15, fontWeight: 500,
                      opacity: featured ? 0.7 : 0.6, whiteSpace: 'nowrap'
                    }}>{t.cadence}</span>
                  </div>
                </div>

                {/* Includes */}
                <div style={{ flex: 1, marginBottom: 28 }}>
                  <div style={{
                    fontFamily: v1Styles.sans, fontSize: 10, fontWeight: 700,
                    letterSpacing: '0.22em', textTransform: 'uppercase',
                    color: featured ? '#9eaaff' : v1Styles.blue, marginBottom: 14
                  }}>What's Included</div>
                  <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 10 }}>
                    {t.included.map((inc) => (
                      <li key={inc} style={{
                        display: 'flex', alignItems: 'flex-start', gap: 12,
                        fontFamily: v1Styles.sans, fontSize: 14, lineHeight: 1.5,
                        opacity: featured ? 0.92 : 0.88
                      }}>
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                          stroke={featured ? '#9eaaff' : v1Styles.blue} strokeWidth="2.2"
                          strokeLinecap="round" strokeLinejoin="round"
                          style={{ flexShrink: 0, marginTop: 3 }}>
                          <path d="m5 12 5 5L20 7" />
                        </svg>
                        {inc}
                      </li>
                    ))}
                  </ul>
                </div>

                <a href={data.brand.bookingUrl} style={{
                  display: 'block', padding: '16px 24px',
                  background: featured ? '#fff' : v1Styles.ink,
                  color: featured ? v1Styles.ink : '#fff',
                  fontFamily: v1Styles.sans, fontSize: 12, fontWeight: 700,
                  letterSpacing: '0.14em', textTransform: 'uppercase',
                  textDecoration: 'none', textAlign: 'center', borderRadius: 3
                }}>Get Started</a>
              </article>
            );
          })}
        </div>

        {/* Single-session trainings (a la carte), matched to the tier cards */}
        <div style={{ marginTop: 48 }}>
          <div style={{ textAlign: 'center', marginBottom: 24 }}>
            <div style={{
              fontFamily: v1Styles.sans, fontSize: 11, fontWeight: 600,
              color: v1Styles.blue, letterSpacing: '0.22em', textTransform: 'uppercase'
            }}>Single Sessions</div>
            <p style={{
              fontFamily: v1Styles.sans, fontSize: 15, color: v1Styles.muted, margin: '10px 0 0'
            }}>Prefer a one-time training? Book a single session for your team.</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 28 }}>
            {[
              { tag: 'Virtual', title: 'Single Virtual Training', pitch: 'A focused, live online training session for your team.', price: '$3,500' },
              { tag: 'In-Person', title: 'Single In-Person Training', pitch: 'A focused, on-site training session with your team.', price: '$6,000' }
            ].map((s) => (
              <article key={s.title} style={{
                background: '#fff', color: v1Styles.ink,
                border: `1px solid ${v1Styles.rule}`, borderRadius: 4,
                padding: '36px 40px', display: 'flex', flexDirection: 'column'
              }}>
                <div style={{
                  fontFamily: v1Styles.sans, fontSize: 11, fontWeight: 600,
                  color: v1Styles.blue, letterSpacing: '0.22em', textTransform: 'uppercase', marginBottom: 14
                }}>{s.tag}</div>
                <h3 style={{
                  fontFamily: '"Newsreader", Georgia, serif', fontSize: 30, fontWeight: 500,
                  lineHeight: 1.1, margin: '0 0 12px', letterSpacing: '-0.015em', fontVariationSettings: '"opsz" 144'
                }}>{s.title}</h3>
                <p style={{
                  fontFamily: v1Styles.sans, fontSize: 15, lineHeight: 1.5, margin: '0 0 24px', opacity: 0.7
                }}>{s.pitch}</p>
                <div style={{
                  padding: '20px 0', borderTop: `1px solid ${v1Styles.rule}`, borderBottom: `1px solid ${v1Styles.rule}`,
                  margin: '0 0 24px', display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap'
                }}>
                  <span style={{
                    fontFamily: '"Newsreader", Georgia, serif', fontSize: 44, fontWeight: 500,
                    letterSpacing: '-0.02em', lineHeight: 1, fontVariationSettings: '"opsz" 144'
                  }}>{s.price}</span>
                  <span style={{ fontFamily: v1Styles.sans, fontSize: 15, fontWeight: 500, opacity: 0.6 }}>one-time</span>
                </div>
                <a href={data.brand.bookingUrl} style={{
                  display: 'block', marginTop: 'auto', padding: '16px 24px',
                  background: v1Styles.ink, color: '#fff',
                  fontFamily: v1Styles.sans, fontSize: 12, fontWeight: 700, letterSpacing: '0.14em',
                  textTransform: 'uppercase', textDecoration: 'none', textAlign: 'center', borderRadius: 3
                }}>Book a Session</a>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// Guarantee card, sits between packages and FAQs
const V1PricingGuarantee = ({ data }) => (
  <section style={{ background: v1Styles.paper, padding: '40px 64px 80px' }}>
    <div style={{
      maxWidth: 1100, margin: '0 auto',
      background: v1Styles.ink, color: '#fff',
      borderRadius: 6, padding: '56px 64px',
      position: 'relative', overflow: 'hidden',
      boxShadow: '0 16px 48px rgba(15,20,25,0.16)'
    }}>
      {/* Soft accent bar */}
      <div style={{
        position: 'absolute', top: 0, left: 0, bottom: 0, width: 4,
        background: v1Styles.blue
      }} />
      <div style={{ display: 'grid', gridTemplateColumns: '4fr 8fr', gap: 56, alignItems: 'start' }}>
        <div>
          <div style={{
            fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
            textTransform: 'uppercase', color: '#9eaaff', fontWeight: 600, marginBottom: 16
          }}>The Promise</div>
          <h2 style={{
            fontFamily: '"Newsreader", Georgia, serif', fontSize: 42, fontWeight: 500, lineHeight: 1.05,
            letterSpacing: '-0.02em', margin: 0, color: '#fff', textWrap: 'balance',
          }}>Our Guarantee</h2>
        </div>
        <div style={{
          fontFamily: v1Styles.sans, fontSize: 16, lineHeight: 1.65,
          color: 'rgba(255,255,255,0.82)', display: 'grid', gap: 14
        }}>
          <p style={{ margin: 0 }}>
            We believe in overdelivering for every client and want this investment to be one of the best decisions you make for your practice. If we ever miss the mark, you get a <span style={{ color: '#fff', fontWeight: 600 }}>100% refund</span> and we part ways, no hard feelings.
          </p>
          <p style={{ margin: 0 }}>
            We intentionally work with a limited number of practices and believe every partnership should be a true win-win. If at any point the relationship no longer feels like a fit for you (or for us), we will not continue.
          </p>
          <p style={{ margin: 0, fontFamily: '"Newsreader", Georgia, serif', fontSize: 19, fontStyle: 'italic', color: '#fff', opacity: 0.95 }}>
            We are confident in our ability to help your team grow, improve, and get closer to reaching their full potential.
          </p>
        </div>
      </div>
    </div>
  </section>
);

// Pricing FAQ accordion
const V1PricingFAQs = ({ data }) => {
  const items = [
    {
      q: 'What if I invest in my team and they leave?',
      a: 'One of the most common concerns we hear from owners is: "Why would I invest in my team if they might leave?" We believe the better question is: What happens if you do not invest in them and they stay? Investing in your team improves patient experience, consistency, accountability, and results while they are with you. Like preventive care, regular training helps solve small issues before they become larger, more expensive problems.'
    },
    {
      q: 'Can I do just one training?',
      a: 'Yes, although we believe lasting change happens through reinforcement and accountability. We are not a quick-fix consulting company. Our goal is to create meaningful, sustainable improvements through continued coaching, implementation, and partnership. Many clients start with one training and grow from there.'
    },
    {
      q: 'Why are your prices higher than other consultants?',
      a: (
        <React.Fragment>
          <h4 style={{
            fontFamily: '"Newsreader", Georgia, serif', fontSize: 18, fontWeight: 600,
            color: v1Styles.ink, margin: '0 0 14px', letterSpacing: '-0.005em',
          }}>The Practice Potential Difference</h4>
          <p style={{ margin: 0 }}>
            Our pricing is consistent with other customized, full-day healthcare trainings, but the difference is in who is leading your team. Every Practice Potential trainer brings <strong style={{ color: v1Styles.ink, fontWeight: 600 }}>10+ years of healthcare experience</strong>, whether working directly inside practices, supporting patients chairside, leading teams, or consulting with practices across the country. No junior facilitators. No generic presentations. Just experienced professionals who understand the realities of patient care, leadership, team dynamics, and practice growth. We believe expertise matters because meaningful change happens when training is practical, customized, and led by someone who has truly been there.
          </p>
        </React.Fragment>
      )
    }
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ background: v1Styles.paperWarm, padding: '140px 64px', borderTop: `1px solid ${v1Styles.rule}` }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <div style={{
            fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
            textTransform: 'uppercase', color: v1Styles.blue, fontWeight: 600, marginBottom: 24
          }}>Common Questions</div>
          <h2 style={{
            fontFamily: '"Newsreader", Georgia, serif', fontSize: 52, fontWeight: 500, lineHeight: 1.1,
            letterSpacing: '-0.02em', margin: 0, color: v1Styles.ink, textWrap: 'balance',
          }}>
            Frequently asked questions.
          </h2>
        </div>
        <div>
          {items.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderTop: `1px solid ${v1Styles.rule}`, borderBottom: i === items.length - 1 ? `1px solid ${v1Styles.rule}` : 'none' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', background: 'transparent', border: 0, cursor: 'pointer',
                  padding: '28px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  gap: 24, textAlign: 'left'
                }}>
                  <span style={{
                    fontFamily: '"Newsreader", Georgia, serif', fontSize: 22, fontWeight: 500,
                    color: v1Styles.ink, lineHeight: 1.3, letterSpacing: '-0.005em', textWrap: 'balance'
                  }}>{f.q}</span>
                  <span style={{
                    flexShrink: 0, width: 36, height: 36, borderRadius: '50%',
                    border: `1px solid ${v1Styles.rule}`, background: isOpen ? v1Styles.blue : 'transparent',
                    color: isOpen ? '#fff' : v1Styles.ink,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 20, fontWeight: 400, transition: 'all 200ms ease'
                  }}>{isOpen ? '–' : '+'}</span>
                </button>
                {isOpen && (
                  <div style={{
                    paddingBottom: 28,
                    fontFamily: v1Styles.sans, fontSize: 16, color: v1Styles.muted,
                    lineHeight: 1.65, maxWidth: 760
                  }}>{f.a}</div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

const V1PricingPage = () => {
  const data = window.PP_DATA;
  return (
    <div style={{ background: v1Styles.paper, color: v1Styles.ink }}>
      <V1InteriorHero
        data={data}
        active="pricing"
        eyebrow="Pricing"
        title="Your journey starts now."
        lede="Three engagement packages, built around how much support your team needs. Every package is month-to-month with a clear scope and our 100% refund guarantee."
      />
      <V1PricingTiers data={data} />
      <V1PricingGuarantee data={data} />
      <V1PricingFAQs data={data} />
      <V1CTAStrip
        data={data}
        kicker="Next Step"
        title="Not sure which package fits?"
        body="A 30-minute consult is all it takes. We'll listen, ask a few questions, and recommend the right starting point, no pressure to commit."
        ctaLabel="Book a Consult Call →"
      />
      <V1Footer data={data} />
    </div>
  );
};

const V1ContactCards = ({ data }) => {
  const cards = [
    {
      kicker: 'By Email',
      label: data.brand.email,
      sub: 'Replies within two business days.',
      href: `mailto:${data.brand.email}`,
      icon: (
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={v1Styles.blue} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="5" width="18" height="14" rx="2"/>
          <path d="m3 7 9 6 9-6"/>
        </svg>
      )
    },
    {
      kicker: 'By Phone',
      label: data.brand.phone,
      sub: 'Atlanta, GA · weekdays 9–5 ET.',
      href: `tel:${data.brand.phone.replace(/\D/g,'')}`,
      icon: (
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={v1Styles.blue} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L8 9.6a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z"/>
        </svg>
      )
    },
    {
      kicker: 'Book a Call',
      label: 'Schedule a consult',
      sub: '30 minutes. Honest conversation.',
      href: data.brand.bookingUrl,
      icon: (
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={v1Styles.blue} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="4" width="18" height="17" rx="2"/>
          <path d="M16 2v4M8 2v4M3 10h18"/>
        </svg>
      )
    }
  ];
  return (
    <section style={{ background: v1Styles.paper, padding: '100px 64px 40px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {cards.map(c => (
          <a key={c.kicker} href={c.href} style={{
            background: '#fff', border: `1px solid ${v1Styles.rule}`,
            borderRadius: 4, padding: '40px 36px',
            textDecoration: 'none', display: 'block',
            transition: 'transform 200ms ease, box-shadow 200ms ease'
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.transform = 'translateY(-3px)';
            e.currentTarget.style.boxShadow = '0 12px 32px rgba(15,20,25,0.08)';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.transform = 'translateY(0)';
            e.currentTarget.style.boxShadow = 'none';
          }}>
            <div style={{ marginBottom: 24 }}>{c.icon}</div>
            <div style={{
              fontFamily: v1Styles.sans, fontSize: 11, fontWeight: 600,
              color: v1Styles.blue, letterSpacing: '0.22em', textTransform: 'uppercase',
              marginBottom: 12
            }}>{c.kicker}</div>
            <div style={{
              fontFamily: '"Newsreader", Georgia, serif', fontSize: 24, fontWeight: 500,
              color: v1Styles.ink, margin: '0 0 8px', lineHeight: 1.2,
              letterSpacing: '-0.005em', wordBreak: 'break-word'
            }}>{c.label}</div>
            <div style={{
              fontFamily: v1Styles.sans, fontSize: 14, color: v1Styles.muted, lineHeight: 1.5
            }}>{c.sub}</div>
          </a>
        ))}
      </div>
    </section>
  );
};

const V1ContactFAQs = ({ data }) => {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ background: v1Styles.paperWarm, padding: '140px 64px', borderTop: `1px solid ${v1Styles.rule}` }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <div style={{
            fontFamily: v1Styles.sans, fontSize: 11, letterSpacing: '0.3em',
            textTransform: 'uppercase', color: v1Styles.blue, fontWeight: 600, marginBottom: 24
          }}>Before You Reach Out</div>
          <h2 style={{
            fontFamily: '"Newsreader", Georgia, serif', fontSize: 52, fontWeight: 500, lineHeight: 1.1,
            letterSpacing: '-0.02em', margin: 0, color: v1Styles.ink, textWrap: 'balance',
          }}>
            Questions we hear a lot.
          </h2>
        </div>
        <div>
          {data.faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderTop: `1px solid ${v1Styles.rule}`, borderBottom: i === data.faqs.length - 1 ? `1px solid ${v1Styles.rule}` : 'none' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', background: 'transparent', border: 0, cursor: 'pointer',
                  padding: '28px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  gap: 24, textAlign: 'left'
                }}>
                  <span style={{
                    fontFamily: '"Newsreader", Georgia, serif', fontSize: 22, fontWeight: 500,
                    color: v1Styles.ink, lineHeight: 1.3, letterSpacing: '-0.005em', textWrap: 'balance'
                  }}>{f.q}</span>
                  <span style={{
                    flexShrink: 0, width: 36, height: 36, borderRadius: '50%',
                    border: `1px solid ${v1Styles.rule}`, background: isOpen ? v1Styles.blue : 'transparent',
                    color: isOpen ? '#fff' : v1Styles.ink,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 20, fontWeight: 400, transition: 'all 200ms ease'
                  }}>{isOpen ? '–' : '+'}</span>
                </button>
                {isOpen && (
                  <div style={{
                    paddingBottom: 28,
                    fontFamily: v1Styles.sans, fontSize: 16, color: v1Styles.muted,
                    lineHeight: 1.65, maxWidth: 720
                  }}>{f.a}</div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

const V1ContactPage = () => {
  const data = window.PP_DATA;
  return (
    <div style={{ background: v1Styles.paper, color: v1Styles.ink }}>
      <V1InteriorHero
        data={data}
        active="contact"
        eyebrow="Let's Talk"
        title="Tell us about your practice."
      />
      <V1ContactCK data={data} bg={v1Styles.paper} />
      <V1Footer data={data} />
    </div>
  );
};

// Share page components to the global scope so the inline <script type="text/babel">
// renderers in about.html / trainings.html / coaching.html / pricing.html / contact.html
// can see them. (Each Babel script gets its own scope when transpiled.)
Object.assign(window, {
  V1AboutPage,
  V1TrainingsPage,
  V1CoachingPage,
  V1PricingPage,
  V1ContactPage,
});