// Me Financially Free — Section components

const CALENDLY_URL = "https://calendly.com/mefinanciallyfree-co/30min";
const JOTFORM_URL = "intake.html";

function PearlRule({ count = 9 }) {
  return (
    <div className="pearl-rule">
      {Array.from({ length: count }).map((_, i) => <i key={i} />)}
    </div>
  );
}

function Nav({ openBooking }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="index.html#top" className="nav-brand">
          <img src="assets/logo.png" alt="Me Financially Free logo" />
          <div className="nav-brand-text">
            <span className="nm">me</span>
            <span className="full">Financially Free</span>
          </div>
        </a>
        <div className="nav-links">
          <a href="index.html#story">Story</a>
          <a href="index.html#tiers">The Program</a>
          <a href="index.html#process">Process</a>
          <a href="index.html#testimonials">Wins</a>
          <a href="store.html">Store</a>
          <a href="index.html#faq">FAQ</a>
        </div>
        <div className="nav-cta">
          <button className="btn btn-primary" onClick={openBooking}>Book Discovery Call</button>
        </div>
      </div>
    </nav>
  );
}

function Hero({ openBooking }) {
  return (
    <section className="hero" id="top">
      <div className="paper-grain" />
      <div className="wrap hero-grid">
        <div className="hero-text">
          <div className="hero-eyebrow">
            <span className="dot" />
            <span className="eyebrow">1:1 Debt Freedom Advisory · Performance-Aligned</span>
          </div>
          <h1>
            A life without debt and money stress is <em>possible</em>.
          </h1>
          <p className="lede">
            I'm Sofia, a debt freedom coach who paid off $91,129 completely by myself in 18 months. Now I walk this road with clients who are ready to be done with debt for good. <strong>I only get paid more when you do.</strong> Loving enough to feel like a friend. Strict enough to actually work.
          </p>
          <div className="hero-actions">
            <button className="btn btn-primary" onClick={openBooking}>Book your discovery call</button>
            <a className="btn btn-ghost" href="#story">Read my story</a>
          </div>
          <div className="hero-meta">
            <div className="hero-meta-item">
              <span className="num">$91,129</span>
              <span className="lbl">Personally paid off</span>
            </div>
            <div className="hero-meta-item">
              <span className="num">18 mo.</span>
              <span className="lbl">From start to free</span>
            </div>
            <div className="hero-meta-item">
              <span className="num">1:1</span>
              <span className="lbl">Custom advisory</span>
            </div>
          </div>
        </div>

        <div style={{ position: "relative" }}>
          <div className="portrait-frame">
            <img className="portrait-img-real" src="assets/sofia-portrait.jpg" alt="Sofia, founder of Me Financially Free" />
          </div>
          <div className="hero-badge">
            <span className="num">$91,129</span>
            <span className="lbl">paid off in 18 months</span>
          </div>
          <div className="portrait-caption">
            <div className="q">"She didn't lecture me. She walked beside me."</div>
            <div className="src">Member, Full Access</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const items = [
    "Paid off in full",
    "A safe space",
    "Debt free at 32",
    "Free of judgment",
    "First time saving",
    "Life-long habits",
    "No more shame",
    "Marriage saved",
    "Free of credit cards",
    "Held with care",
    "Out of collections",
    "Built a 6-month cushion",
    "Habits that actually stick",
  ];
  const loop = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {loop.map((t, i) => (
          <span className="marquee-item" key={i}>{t}</span>
        ))}
      </div>
    </div>
  );
}

function Story() {
  return (
    <section className="section story" id="story">
      <div className="wrap">
        <div className="story-grid">
          <div style={{ position: "relative" }}>
            <div className="story-portrait">
              <video
                className="story-portrait-img story-portrait-video"
                src="assets/sofia-story.mp4"
                muted
                loop
                playsInline
                preload="metadata"
                onMouseEnter={(e) => e.currentTarget.play()}
                onMouseLeave={(e) => { e.currentTarget.pause(); e.currentTarget.currentTime = 0; }}
                onTouchStart={(e) => e.currentTarget.play()}
              />
              <span className="story-portrait-hint">Hover to play</span>
            </div>
            <dl className="story-meta">
              <dt>Profession</dt><dd>Speech-Language Pathologist</dd>
              <dt>Started</dt><dd>2 jobs, $91k in debt</dd>
              <dt>Finished</dt><dd>18 months later, free</dd>
            </dl>
          </div>
          <div className="story-text">
            <span className="eyebrow">A note from Sofia</span>
            <h2>I've felt the <em>weight</em> you're feeling right now.</h2>
            <p>
              No one taught me how to manage money. I didn't learn it in school. My mom tried now and then, but I was too stubborn to listen. I didn't realize money management was even a thing to learn about. I didn't know what "financial literacy" meant until I started my debt payoff plan at 32. It's never too late to learn, and it's never too late to change old habits.
            </p>
            <p>
              For most of my twenties I told myself I'd "figure money out later." Later showed up with $91,129 of debt, two jobs, and the kind of math that makes you cry into a spreadsheet at 11pm.
            </p>
            <p>
              Honestly? I never thought I would live a life without debt. I had quietly accepted that this was just the way life worked. You owe money, you make payments, you owe more money, you make more payments. Forever.
            </p>
            <div className="story-pullquote">
              In 18 months I paid off every single dollar, $91,129 of it, completely on my own. I built Me Financially Free so the next person doesn't have to do it alone.
            </div>
            <p>
              I didn't have a coach. I had a full-time speech-pathology caseload, a part-time job on top of it, and a stubborn refusal to let one more year go by feeling that way. What I would have given for someone to hold my hand and support me the whole way through. That is the person I am now, for you.
            </p>
            <p>
              And now that I'm on the other side, that old mindset is gone. <strong>A debt-free life isn't a fantasy or a personality type, it's a decision you make and then keep making.</strong> I'm in your corner the whole way: with the spreadsheets, the late-night texts, the small wins, and the harder months. You bring the courage. I bring the plan.
            </p>
            <div className="story-signature">
              <span className="sig">Sofia</span>
              <span className="who">Founder · Coach · Friend</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function MicSection() {
  return (
    <section className="mic-section">
      <div className="mic-grid">
        <div className="mic-image">
          <img src="assets/sofia-podcast.jpg" alt="Sofia recording at her podcast setup" />
        </div>
        <div className="mic-text">
          <span className="eyebrow">Behind the mic</span>
          <h2>30 Going on <em>13</em>.</h2>
          <p>Yes, I have a podcast. No, it isn't a "finance podcast." <strong>30 Going on 13</strong> is about all things life: the messy, the funny, the awkward, the heartfelt, and the very real, with my debt payoff journey woven all the way through. I get into the actual numbers, the cringe spending habits, the wins, the relapses, all of it.</p>
          <p>I treat the mic like a free therapy session. Open, honest, no script, just me unpacking the things I'm learning in my 30s that I wish I would have learned at 13, including money literacy and money management.</p>
          <p>If you want a feel for how I think and how I'd talk things through on a call with you, press play. It's the closest thing to a free session.</p>
          <div style={{ marginTop: 16 }}>
            <a className="btn-link" href="https://podcasts.apple.com/us/podcast/i-saved-%243-116-75-just-from-changing-my-habits/id1715356413?i=1000695205643" target="_blank" rel="noopener">Listen: I saved $3,116.75 just from changing my habits</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function StatsBand() {
  return (
    <section className="stats-band">
      <div className="wrap">
        <div className="stats-grid">
          <div>
            <div className="stat-num">$91,129</div>
            <div className="stat-lbl">Personally paid off</div>
          </div>
          <div>
            <div className="stat-num">18<em>mo</em></div>
            <div className="stat-lbl">From debt to free</div>
          </div>
          <div>
            <div className="stat-num">Custom</div>
            <div className="stat-lbl">Investment built around you</div>
          </div>
          <div>
            <div className="stat-num">1:1</div>
            <div className="stat-lbl">Real human, every step</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Tier({ flag, eyebrow, name, desc, price, per, sub, promise, features, mechanics, ctaLabel, featured, openBooking, footnote }) {
  return (
    <div className={"tier" + (featured ? " featured" : "")}>
      {flag && <div className="tier-flag">{flag}</div>}
      <div className="tier-eyebrow">{eyebrow}</div>
      <div className="tier-name">{name}</div>
      <div className="tier-desc">{desc}</div>
      {promise && <div className="tier-promise">{promise}</div>}
      <div className="tier-price">{price}<span className="per">{per}</span></div>
      <div className="tier-price-sub">{sub}</div>
      <div className="tier-divider" />
      <ul className="tier-features">
        {features.map((f, i) => <li className="tier-feature" key={i}>{f}</li>)}
      </ul>
      {mechanics && mechanics.length > 0 && (
        <>
          <div className="tier-mechanics-label">Plus the mechanics</div>
          <ul className="tier-mechanics">
            {mechanics.map((m, i) => <li key={i}>{m}</li>)}
          </ul>
        </>
      )}
      {footnote && <div className="tier-desc" style={{ marginTop: 0, marginBottom: 24, fontSize: 13, fontStyle: "italic" }}>{footnote}</div>}
      <div className="tier-cta-row">
        <button className={"btn " + (featured ? "btn-primary" : "btn-ghost")} onClick={openBooking}>
          {ctaLabel}
        </button>
      </div>
    </div>
  );
}

function Tiers({ openBooking }) {
  return (
    <section className="section" id="tiers">
      <div className="wrap">
        <div className="section-eyebrow"><span className="eyebrow">The Debt Freedom Program · 1:1 Advisory</span></div>
        <h2>A <em>plan</em> that pays for itself out of money you're already losing.</h2>
        <p className="lede">
          One ongoing 1:1 coaching engagement, structured around your life. A monthly retainer covers the coaching, planning, and accountability. A performance fee — a small percentage of debt you eliminate each month — keeps me aligned with your wins. <strong>I only get paid more when you do.</strong>
        </p>
        <PearlRule />

        <div className="tier" style={{ maxWidth: 760, margin: "0 auto" }}>
          <div className="tier-flag">★ Founding Member Rates Available</div>
          <div className="tier-eyebrow">The Debt Freedom Program</div>
          <div className="tier-name">Custom 1:1 Advisory</div>
          <div className="tier-desc">
            Ongoing 1:1 coaching designed to get you out of debt — and keep you there. We start with a 3-month foundation, then continue month-to-month for as long as the program is creating value. Cancel anytime after the first 90 days with 30 days' notice.
          </div>
          <div className="tier-promise">
            Show up. Do the work. I keep coaching you until you see real, measurable progress on your debt — even if that takes longer than we planned.
          </div>

          <div className="tier-divider" />

          <div className="tier-mechanics-label">Every engagement includes</div>
          <ul className="tier-features">
            <li className="tier-feature">Weekly 1:1 coaching calls</li>
            <li className="tier-feature">Real-time messaging support between calls (texts, voice notes, DMs)</li>
            <li className="tier-feature">Custom debt-elimination roadmap built for your numbers</li>
            <li className="tier-feature">Hands-on budget &amp; debt tracking in a shared Google Sheet</li>
            <li className="tier-feature">Personalized accountability with weekly check-ins</li>
            <li className="tier-feature">Real human in your corner — judgment-free, every call</li>
          </ul>

          <div className="tier-mechanics-label">How investment works</div>
          <ul className="tier-mechanics">
            <li><strong>Monthly retainer</strong> — covers the coaching, planning, accountability, and access between calls.</li>
            <li><strong>Performance fee</strong> — a small percentage of the debt you eliminate that month. The more you crush, the more we both win.</li>
            <li><strong>No flat fee. No hidden tiers.</strong> Investment is built around your debt load, your goals, and the work required to get you free.</li>
            <li><strong>Founding rates</strong> available for early clients — locked in for the lifetime of your engagement as a thank-you for trusting the process early.</li>
          </ul>

          <div className="tier-desc" style={{ marginTop: 0, marginBottom: 24, fontSize: 13, fontStyle: "italic" }}>
            Best for: serious clients ready to do the work. Your investment is determined on your discovery call, after we've reviewed your situation together.
          </div>

          <div className="tier-cta-row">
            <button className="btn btn-primary" onClick={openBooking}>
              Book your discovery call
            </button>
          </div>
        </div>

        <div className="value-promise">
          <div className="value-promise-seal">
            <span className="value-promise-seal-star">★</span>
            <span className="value-promise-seal-text">My Guarantee<br/>To You</span>
            <span className="value-promise-seal-star">★</span>
          </div>

          <span className="eyebrow value-promise-eyebrow">The Found-Money Promise</span>
          <h3 className="value-promise-headline">
            I'll never charge you more than the value <em>I help you create</em>.
          </h3>
          <p className="value-promise-lead">
            On our discovery call, I'll do a live audit of your finances and identify real, measurable waste — money you're losing every month without realizing it. <strong>If I can't find meaningful leaks in your budget, you don't move forward — and you walk away with the audit anyway.</strong>
          </p>

          <div className="value-promise-rules">
            <div className="value-promise-rule">
              <div className="value-promise-rule-tag">If you show up &amp; do the work</div>
              <div className="value-promise-rule-text">
                I keep coaching you — at no extra charge — until you see real progress on your debt. <strong>Effort in, results out.</strong>
              </div>
            </div>
            <div className="value-promise-rule">
              <div className="value-promise-rule-tag">If the program isn't for you</div>
              <div className="value-promise-rule-text">
                3-month commitment, then month-to-month. Cancel anytime after that with 30 days' notice. <strong>No contracts. No lock-in.</strong>
              </div>
            </div>
          </div>

          <p className="value-promise-kicker">
            This coaching should pay for itself out of money you were already losing. That's the whole point.
          </p>

          <div className="value-promise-cta-row">
            <button className="btn btn-primary value-promise-cta" onClick={openBooking}>
              Book your discovery call — I'll find the leaks
            </button>
          </div>

          <div className="value-promise-sig">— Sofia</div>
        </div>
      </div>
    </section>
  );
}

function Process({ openBooking }) {
  return (
    <section className="section process" id="process">
      <div className="wrap">
        <div className="section-eyebrow"><span className="eyebrow">How it works</span></div>
        <h2>Four quiet steps from <em>here</em> to free.</h2>
        <p className="lede">No sales pitch, no judgment, no “gotcha.” Just a clear path you can start now.</p>
        <PearlRule />
        <div className="process-steps">
          <div className="step">
            <div className="step-num">i</div>
            <div className="step-tag">Step One</div>
            <h3>Book a discovery call</h3>
            <p>A 30-minute conversation, no commitment. We'll talk through where you are and where you want to be.</p>
          </div>
          <div className="step">
            <div className="step-num">ii</div>
            <div className="step-tag">Step Two</div>
            <h3>Share your numbers</h3>
            <p>A short intake form so I see the whole picture before we meet: debts, income, goals, fears.</p>
          </div>
          <div className="step">
            <div className="step-num">iii</div>
            <div className="step-tag">Step Three</div>
            <h3>The Found-Money Audit</h3>
            <p>Live on our call, I'll identify the leaks in your finances and quote a custom investment built around your situation. No tiers. No guesswork.</p>
          </div>
          <div className="step">
            <div className="step-num">iv</div>
            <div className="step-tag">Step Four</div>
            <h3>Walk it out, together</h3>
            <p>You get a plan, a coach, and a friend who's been there. The number starts moving the very first week.</p>
          </div>
        </div>
        <div className="center" style={{ marginTop: 64 }}>
          <button className="btn btn-primary" onClick={openBooking}>Book your discovery call</button>
        </div>
      </div>
    </section>
  );
}

function Testimonial({ initials, quote, name, ctx }) {
  return (
    <div className="testimonial">
      <div className="stars">★★★★★</div>
      <div className="quote">"{quote}"</div>
      <div className="who">
        <div className="avatar">{initials}</div>
        <div>
          <div className="nm">{name}</div>
          <div className="ctx">{ctx}</div>
        </div>
      </div>
    </div>
  );
}

function Testimonials() {
  return (
    <section className="section" id="testimonials">
      <div className="wrap">
        <div className="section-eyebrow"><span className="eyebrow">Members on the other side</span></div>
        <h2>The stories I get to be a <em>part of.</em></h2>
        <PearlRule />
        <div className="testimonials-grid">
          <Testimonial
            initials="JM"
            quote="Sofia was the first person who didn't make me feel stupid for being in this much debt. Eight months in and I've paid off $19k. I cry happy tears now, not the other kind."
            name="Jordan M."
            ctx="Full Access · paid off $19,000 in 8 months"
          />
          <Testimonial
            initials="RT"
            quote="My husband and I were one fight away from giving up. Sofia held both of us, separately and together. We're $34k down and actually talking again."
            name="Rachel & Tom"
            ctx="Full Access · couples coaching"
          />
          <Testimonial
            initials="DK"
            quote="I'm a guy who hates the word 'coaching.' This isn't that. It's a plan, a number, and someone texting you back when you almost swiped the card. It works."
            name="Devon K."
            ctx="Guided Accountability · debt free in 14 months"
          />
        </div>
      </div>
    </section>
  );
}

function FAQItem({ q, a, open, onClick }) {
  return (
    <div className={"faq-item" + (open ? " open" : "")}>
      <button className="faq-q" onClick={onClick}>
        <span>{q}</span>
        <span className="ico">+</span>
      </button>
      <div className="faq-a">{a}</div>
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    {
      q: "Why aren't prices listed on the site?",
      a: "Because every client's situation is different — different debt loads, different income, different complexity. Quoting a one-size price online would be dishonest. Your investment is built around your specific numbers and quoted on the discovery call, after we've actually looked at your finances together.",
    },
    {
      q: "How does the pricing actually work?",
      a: "Two parts. A monthly retainer covers the coaching, planning, and accountability — that's how I keep the lights on and stay deeply available to you. A small performance fee, taken as a percentage of the debt you eliminate that month, keeps me aligned with your wins. The more you crush, the more we both benefit. I don't get paid more unless you do.",
    },
    {
      q: "What if I can't afford a big upfront payment?",
      a: "You don't need one. There is no lump-sum upfront fee. You pay a monthly retainer plus a performance fee — both monthly. The whole point of the structure is that the program pays for itself out of money you were already losing to waste, interest, and bad systems.",
    },
    {
      q: "What if it doesn't work?",
      a: "If you show up, do the homework, and complete the weekly check-ins, I keep coaching you — at no extra charge — until you see real progress. The guarantee is on my effort, not just yours. The only way to void it is by skipping the work.",
    },
    {
      q: "How long do most clients stay?",
      a: "We start with a 3-month commitment because that's the shortest honest window to install a working system, find the leaks, and feel real momentum. After that, it's month-to-month. Most clients stay 9–18 months — through the messy middle, the unexpected expenses, and the long climb to debt-free. You can cancel after the first 90 days with 30 days' notice.",
    },
    {
      q: "I'm embarrassed about my numbers. Is this a safe place?",
      a: "Yes, and you are not alone, not even a little. I've sat in your seat. Nothing you share will surprise me, and nothing leaves our conversations. The discovery call is free, no judgment, no commitment.",
    },
    {
      q: "How is this different from Dave Ramsey, YNAB, or my bank's app?",
      a: "Apps and books are tools. They don't text you back at 9pm when you're about to give up. I'm a real human who's done this myself, not a chatbot, not a workshop. The accountability is the difference.",
    },
    {
      q: "Do you work with couples?",
      a: "Yes. Money is the number one thing couples fight about, and the most fixable with the right help. We can talk about how that looks for you on our discovery call.",
    },
  ];
  return (
    <section className="section" id="faq" style={{ background: "var(--soft-white)" }}>
      <div className="wrap-narrow">
        <div className="section-eyebrow"><span className="eyebrow">Questions, answered</span></div>
        <h2>Things you might be <em>wondering</em>.</h2>
        <PearlRule />
        <div className="faq-list">
          {items.map((it, i) => (
            <FAQItem key={i} {...it} open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ openBooking }) {
  return (
    <section className="cta" id="book">
      <div className="paper-grain" />
      <div className="wrap-narrow">
        <span className="cta-script">you're not alone</span>
        <h2>Take the first step. The hardest one is <em>already</em> behind you.</h2>
        <p className="sub">
          The discovery call is thirty minutes. It costs nothing. You'll walk away with a Found-Money Audit — real, measurable leaks in your budget — whether or not you ever work with me.
        </p>
        <div className="cta-actions">
          <button className="btn btn-primary" onClick={openBooking}>Book my discovery call</button>
          <a className="btn btn-ghost" href={JOTFORM_URL}>Already booked? Open intake form</a>
        </div>
        <div className="cta-trust">
          <span>30-minute call</span>
          <span>No commitment</span>
          <span>100% confidential</span>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="nm">me</div>
            <div className="full">Financially Free</div>
            <p>Debt freedom coaching for women and men who are ready to do the work, with someone in their corner. You don't have to do this alone.</p>
          </div>
          <div>
            <h4>The Program</h4>
            <ul>
              <li><a href="#tiers">1:1 Debt Freedom Advisory</a></li>
              <li><a href="#tiers">How investment works</a></li>
              <li><a href="#tiers">Found-Money Promise</a></li>
            </ul>
          </div>
          <div>
            <h4>Start Here</h4>
            <ul>
              <li><a href="#book">Book a discovery call</a></li>
              <li><a href={JOTFORM_URL}>Intake form</a></li>
              <li><a href="#story">My story</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div>
            <h4>Stay Close</h4>
            <ul>
              <li><a href="#">Instagram</a></li>
              <li><a href="#">TikTok</a></li>
              <li><a href="#">Newsletter</a></li>
              <li><a href="mailto:hello@mefinanciallyfree.co">hello@mefinanciallyfree.co</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Me Financially Free. Made with care by Sofia.</span>
          <span>Privacy · Terms · Disclosures</span>
        </div>
      </div>
    </footer>
  );
}

function BookingModal({ open, onClose }) {
  return (
    <div className={"modal-backdrop" + (open ? " open" : "")} onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">×</button>
        <h3>Let's get on a call.</h3>
        <p>Pick the option that fits where you are right now. Both are free, no pressure, no judgment.</p>
        <div className="modal-options">
          <a className="modal-opt" href={CALENDLY_URL} target="_blank" rel="noopener">
            <div>
              <div className="label">Book a 30-minute discovery call</div>
              <div className="desc">Opens my Calendly · pick any open time</div>
            </div>
            <span className="arrow">→</span>
          </a>
          <a className="modal-opt" href={JOTFORM_URL}>
            <div>
              <div className="label">Already booked? Send me your numbers</div>
              <div className="desc">Short intake form so we can hit the ground running</div>
            </div>
            <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Nav, Hero, Marquee, Story, MicSection, StatsBand, Tiers, Process, Testimonials, FAQ, FinalCTA, Footer, BookingModal,
});