// ── MEET BRENDA RICHEY PAGE ───────────────────────────
const { useState: useSt2, useEffect: useEf2 } = React;

function BrendaPage({ navigate, tweaks }) {
  const gold = tweaks.accentColor;
  useReveal();
  const [serviceHover, setServiceHover] = React.useState(null);

  const services = [
    'Sales systems and processes — Built for your team so everyone knows exactly what to do at every stage',
    'Talk Tracks and Scripts — Real, human, and designed to convert',
    'Sales Training — Consultative, relationship-focused, the kind that actually sticks',
    'CRM Setup and Utilization — We set it up, train your team, and make sure it works for you',
    'Fractional Sales Leadership — Senior-level strategy and execution without the full-time overhead',
    'Admin and Operational Support — The behind-the-scenes work that keeps your pipeline moving',
    'AI Integration — Smart tools layered in to help your team work faster and smarter every day',
  ];

  return (
    <div>
      <PageHero
        eyebrow="Founder & CEO"
        title="Meet Brenda Richey"
        subhead="Driven by sales. Fueled by your growth."
        imgUrl="assets/images/about/banner.png"
        accentColor={gold}
      />

      {/* ── I'VE BUILT WHAT YOU'RE BUILDING ── */}
      <section style={{ background:'var(--paper)', padding:'clamp(80px,10vw,140px) 0' }}>
        <div style={{ maxWidth:'1280px', margin:'0 auto', padding:'0 clamp(24px,5vw,80px)' }}>
          <div style={{ display:'grid', gridTemplateColumns:'5fr 7fr', gap:'clamp(40px,6vw,96px)', alignItems:'start' }} className="two-col">
            <div className="reveal">
              <video src="https://pub-15170ecdfbc04caa9a19a7f92498e2d7.r2.dev/videos/brenda-richey.mp4" controls playsInline preload="metadata" style={{ width:'100%', display:'block', objectFit:'cover' }} />
            </div>
            <div className="reveal reveal-delay-1">
              <p className="t-eyebrow" style={{ color:gold, marginBottom:'18px' }}>Her Story</p>
              <h2 className="t-h2" style={{ marginBottom:'22px' }}>I've Built What You're Building</h2>
              <div style={{ width:'44px', height:'1px', background:gold, marginBottom:'28px' }} />
              <p className="t-body" style={{ marginBottom:'18px' }}>I'm an entrepreneur, so I know exactly what it's like to be in the thick of it. In 2021, I founded Southeastern Oklahoma's first luxury gated second-home community and built it completely from scratch. We're talking 800 acres, $10M+ in financing, roads, utilities, a full community water system, and a sales strategy I had to create from the ground up.</p>
              <p className="t-body" style={{ marginBottom:'18px' }}>I made the calls, built the relationships, developed the pipeline, and closed the deals. Within six months, land values grew from $7,500 to $45,000 per acre and we had generated over $12 million in first-year sales.</p>
              <p className="t-body" style={{ marginBottom:'18px' }}>Over the course of my real estate career, I've closed over $100 million in transactions — not by being a pushy salesperson, but by genuinely connecting with people and solving their problems.</p>
              <p className="t-body" style={{ marginBottom:'32px' }}>I also helped launch a luxury senior living community in McKinney, Texas. We hit 100% occupancy within three months of opening — generating over $400K in monthly revenue — by building a referral network from zero and creating a sales process rooted in empathy and real relationship building.</p>
              <blockquote style={{ fontFamily:'var(--serif)', fontStyle:'italic', fontSize:'clamp(18px,2vw,24px)', fontWeight:'300', lineHeight:1.5, paddingLeft:'22px', borderLeft:`2px solid ${gold}`, color:'var(--ink)' }}>
                "I've started businesses from nothing. I know what it costs — the late nights, the uncertainty, the moments you wonder if it's all going to work. And I know how much the right support at the right time can change everything."
              </blockquote>
            </div>
          </div>
        </div>
        <style>{`@media(max-width:720px){.two-col{grid-template-columns:1fr!important;}}`}</style>
      </section>

      {/* ── WHY METERA EXISTS ── */}
      <section style={{ background:'var(--paper-warm)', padding:'clamp(80px,10vw,140px) 0', position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', top:0, left:0, width:'35%', height:'100%', background:'var(--fog)', clipPath:'polygon(0 0,100% 0,80% 100%,0 100%)', opacity:0.5 }} />
        <div style={{ maxWidth:'1280px', margin:'0 auto', padding:'0 clamp(24px,5vw,80px)', position:'relative', zIndex:1 }}>
          <div style={{ display:'grid', gridTemplateColumns:'7fr 5fr', gap:'clamp(40px,6vw,96px)', alignItems:'center' }} className="two-col">
            <div className="reveal">
              <p className="t-eyebrow" style={{ color:gold, marginBottom:'18px' }}>Our Purpose</p>
              <h2 className="t-h2" style={{ marginBottom:'22px' }}>That's Exactly Why Metera Exists</h2>
              <div style={{ width:'44px', height:'1px', background:gold, marginBottom:'28px' }} />
              <p className="t-body" style={{ marginBottom:'18px' }}>Looking back on every company I've owned or helped launch, there's one thing I kept wishing for — a passionate, experienced partner who could come in, understand my business, and help me build the sales engine I needed to grow. Someone who brought real insight, real strategy, and real results — not just advice. That's what Metera is for you.</p>
              <p className="t-body" style={{ marginBottom:'18px' }}>We are a fractional sales development collective built specifically for growing businesses. We work with startups who are just finding their footing and scaling companies who are ready to accelerate — and we meet every single client exactly where they are.</p>
              <p className="t-body">Different budgets. Different stages. Different goals. No project is too small. That's not just something we say — it's something we mean deeply, because we have a genuine passion for helping the businesses that need us most.</p>
            </div>
            <div className="reveal reveal-delay-1">
              <img src="assets/images/about/team.png" alt="Metera Collective" style={{ width:'100%', display:'block', objectFit:'cover' }} onError={e=>e.target.style.display='none'} />
            </div>
          </div>
        </div>
      </section>

      {/* ── WORKING SMARTER ── */}
      <section style={{ background:'var(--ink)', padding:'clamp(80px,10vw,140px) 0' }}>
        <div style={{ maxWidth:'1280px', margin:'0 auto', padding:'0 clamp(24px,5vw,80px)' }}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'clamp(40px,6vw,96px)', alignItems:'center' }} className="two-col">
            <div className="reveal">
              <img src="assets/images/about/team2.png" alt="Working Smarter" style={{ width:'100%', display:'block', objectFit:'cover' }} onError={e=>e.target.style.display='none'} />
            </div>
            <div className="reveal reveal-delay-1">
              <p className="t-eyebrow" style={{ color:gold, marginBottom:'18px' }}>AI & Modern Tools</p>
              <h2 className="t-h2" style={{ color:'var(--paper)', marginBottom:'22px' }}>Working Smarter, Not Harder</h2>
              <div style={{ width:'44px', height:'1px', background:gold, marginBottom:'28px' }} />
              <p className="t-body" style={{ color:'rgba(248,245,239,0.65)', marginBottom:'18px' }}>One of the most exciting things about building businesses right now is what's possible when you embrace the right tools. I am a huge believer in AI — not as a replacement for great salespeople, but as a way to free them up to do what they do best: build relationships and close deals.</p>
              <p className="t-body" style={{ color:'rgba(248,245,239,0.65)', marginBottom:'18px' }}>When your team isn't buried in manual follow-up, repetitive admin, and tasks that could be automated, they have more energy for the conversations that actually move the needle.</p>
              <p className="t-body" style={{ color:'rgba(248,245,239,0.65)', marginBottom:'28px' }}>More focused time means more deals closed. And more deals closed with less burnout? That's a better business and a better quality of life for everyone on your team.</p>
              <blockquote style={{ fontFamily:'var(--serif)', fontStyle:'italic', fontSize:'clamp(18px,2vw,24px)', fontWeight:'300', lineHeight:1.5, paddingLeft:'22px', borderLeft:`2px solid ${gold}`, color:'var(--paper)' }}>
                "There is nothing I love more than watching a small business come alive."
              </blockquote>
            </div>
          </div>
        </div>
      </section>

      {/* ── WHAT WE BRING ── */}
      <section style={{ background:'var(--paper)', padding:'clamp(80px,10vw,140px) 0' }}>
        <div style={{ maxWidth:'1280px', margin:'0 auto', padding:'0 clamp(24px,5vw,80px)' }}>
          <div className="reveal" style={{ textAlign:'center', marginBottom:'clamp(48px,6vw,72px)' }}>
            <p className="t-eyebrow" style={{ color:gold, marginBottom:'14px' }}>Our Services</p>
            <h2 className="t-h2">What We Bring to Your Business</h2>
            <div style={{ width:'44px', height:'1px', background:gold, margin:'22px auto 0' }} />
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(300px,1fr))', gap:0, marginBottom:'48px' }}>
            {services.map((s, i) => {
              const [label, desc] = s.split(' — ');
              return (
                <div key={i} className={`reveal reveal-delay-${(i%3)+1}`}
                  onMouseEnter={() => setServiceHover(i)}
                  onMouseLeave={() => setServiceHover(null)}
                  style={{ background: serviceHover===i ? 'var(--ink)' : 'var(--paper)', padding:'clamp(32px,4vw,48px) clamp(24px,3vw,36px)', transition:'background 0.35s cubic-bezier(0.16,1,0.3,1)', cursor:'default', borderRight:'2px solid var(--fog)', borderBottom:'2px solid var(--fog)' }}>
                  <div style={{ width:'28px', height:'1px', background:gold, marginBottom:'16px' }} />
                  <h3 style={{ fontFamily:'var(--serif)', fontSize:'clamp(17px,1.8vw,22px)', fontWeight:'400', color: serviceHover===i ? 'var(--paper)' : 'var(--ink)', marginBottom:'10px', lineHeight:1.3, transition:'color 0.3s' }}>{label}</h3>
                  {desc && <p className="t-body" style={{ fontSize:'14px', color: serviceHover===i ? 'rgba(248,245,239,0.6)' : 'var(--ink-soft)', transition:'color 0.3s' }}>{desc}</p>}
                </div>
              );
            })}
          </div>
          <div className="reveal" style={{ maxWidth:'720px', margin:'0 auto', textAlign:'center' }}>
            <blockquote style={{ fontFamily:'var(--serif)', fontStyle:'italic', fontSize:'clamp(18px,2vw,24px)', fontWeight:'300', lineHeight:1.5, color:'var(--ink)', marginBottom:'36px' }}>
              "We understand that every company is different — different needs, different budgets, different teams. That's why we build every engagement around you. No cookie-cutter packages. No one-size-fits-all solutions."
            </blockquote>
          </div>
        </div>
      </section>

      {/* ── CLOSING ── */}
      <section style={{ background:'var(--paper-warm)', padding:'clamp(80px,10vw,120px) 0' }}>
        <div style={{ maxWidth:'760px', margin:'0 auto', padding:'0 clamp(24px,5vw,80px)', textAlign:'center' }} className="reveal">
          <p className="t-eyebrow" style={{ color:gold, marginBottom:'18px' }}>Let's Connect</p>
          <h2 className="t-h2" style={{ marginBottom:'24px' }}>Let's Take Your Business to the Next Level</h2>
          <div style={{ width:'44px', height:'1px', background:gold, margin:'0 auto 28px' }} />
          <p className="t-body-lg" style={{ marginBottom:'18px' }}>If you're a founder who's been grinding and you're ready for some real support — or if you're a growing company that knows your sales process needs a serious upgrade — I would genuinely love to connect with you.</p>
          <p className="t-body-lg" style={{ marginBottom:'36px' }}>Let's talk about where you are, where you want to go, and what it would take to get you there.</p>
          <p style={{ fontFamily:'var(--serif)', fontStyle:'italic', fontSize:'clamp(16px,1.8vw,20px)', fontWeight:'300', color:'var(--taupe)', marginBottom:'36px' }}>
            With passion and purpose,<br/>
            <span style={{ color:'var(--ink)', fontWeight:'400' }}>— Brenda Richey</span><br/>
            <span style={{ fontSize:'14px' }}>Founder & CEO, Metera Collective</span>
          </p>
          <button onClick={() => navigate('contact')} className="btn-primary">
            Book a Strategy Call
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><line x1="2" y1="7" x2="12" y2="7"/><polyline points="8,3 12,7 8,11"/></svg>
          </button>
        </div>
      </section>

      <CTABand navigate={navigate} accentColor={gold} heading="Ready to work with Brenda?" sub="That conversation doesn't cost anything, and it just might change everything." />
    </div>
  );
}

Object.assign(window, { BrendaPage });