// Me Financially Free — Store page

const PRODUCTS = [
  {
    id: "tracker",
    eyebrow: "The Daily Tool",
    name: "Budget & Income Tracker",
    italic: "tracker",
    tagline: "The same Google Sheet I built for myself, refined over 18 months of paying off $91,129.",
    description:
      "A clean, no-overwhelm Google Sheet that tracks every dollar in and every dollar out. Built for real life, not for accountants. Open it on your phone, your laptop, anywhere. It auto-calculates the numbers that actually matter so you stop guessing where you stand.",
    includes: [
      "Monthly income + expense tracker",
      "Debt payoff dashboard with progress bars",
      "Sinking funds for the big stuff (taxes, gifts, car)",
      "Net-worth snapshot, updated automatically",
      "Setup video walkthrough (8 min)",
    ],
    price: "$24",
    note: "One-time purchase. Free updates for life.",
    directUrl: "#",
    coverTone: "parchment",
    coverGlyph: "01",
  },
  {
    id: "reset",
    eyebrow: "The Guidebook · Vol. 1",
    name: "The Financial Reset",
    italic: "reset",
    tagline: "A step-by-step system to help you take control of your money.",
    description:
      "This is the prep work I wish someone had handed me at 32. A guided workbook that gets you reflecting on your relationship with money: the stories you inherited, the spending patterns you've quietly accepted, and the feelings that surface when you check the balance. Before any payoff plan can stick, this is the inner work that makes the outer work possible.",
    includes: [
      "Money-story prompts to surface what shaped you",
      "Habit + trigger reflection",
      "An honest look at your numbers",
      "Where-does-my-money-go exercises",
      "30-day mindset reset",
      "Printable + digital-fillable PDF",
    ],
    price: "$18",
    note: "One-time purchase. PDF delivered after checkout.",
    directUrl: "#",
    coverImage: "assets/financial-reset-cover.png",
    coverTone: "linen",
    coverGlyph: "02",
  },
];

function StoreHero() {
  return (
    <section className="store-hero">
      <div className="paper-grain" />
      <div className="wrap">
        <div className="store-hero-eyebrow">
          <span className="dot" />
          <span className="eyebrow">The Shop · Digital Tools by Sofia</span>
        </div>
        <h1>
          Small tools. <em>Big</em> shifts.
        </h1>
        <p className="store-lede">
          Not everyone is ready for one-on-one coaching, and that's okay. These are the same tools I use with my members, packaged so you can start the work today, on your own time, at your own pace.
        </p>
        <PearlRule count={11} />
      </div>
    </section>
  );
}

function ProductCard({ p }) {
  return (
    <article className="product-card">
      {p.coverImage ? (
        <div className="product-cover product-cover-image">
          <img src={p.coverImage} alt={`${p.name} cover`} />
        </div>
      ) : (
        <div className={`product-cover product-cover-${p.coverTone}`}>
          <div className="product-cover-inner">
            <span className="product-cover-glyph">{p.coverGlyph}</span>
            <span className="product-cover-script">me</span>
            <span className="product-cover-name">{p.name}</span>
            <span className="product-cover-meta">Cover artwork coming soon</span>
          </div>
        </div>
      )}
      <div className="product-body">
        <span className="product-eyebrow">{p.eyebrow}</span>
        <h2 className="product-name">{p.name}</h2>
        <p className="product-tagline">{p.tagline}</p>
        <p className="product-desc">{p.description}</p>
        <div className="product-includes">
          <span className="product-includes-label">What's inside</span>
          <ul>
            {p.includes.map((line, i) => <li key={i}>{line}</li>)}
          </ul>
        </div>
        <div className="product-price-row">
          <span className="product-price">{p.price}</span>
          <span className="product-price-note">{p.note}</span>
        </div>
        <div className="product-actions">
          <a className="btn btn-primary" href={p.directUrl}>Buy now</a>
        </div>
        <p className="product-fineprint">Instant download. PDF delivered to your inbox after checkout.</p>
      </div>
    </article>
  );
}

function StoreGrid() {
  return (
    <section className="store-grid-section">
      <div className="wrap">
        <div className="store-grid">
          {PRODUCTS.map((p) => <ProductCard key={p.id} p={p} />)}
        </div>
      </div>
    </section>
  );
}

function StorePromise() {
  return (
    <section className="store-promise">
      <div className="wrap">
        <PearlRule count={7} />
        <div className="store-promise-grid">
          <div className="store-promise-item">
            <span className="num">01</span>
            <h3>Built from real life</h3>
            <p>Every tool here is something I actually used to pay off $91,129. Nothing theoretical, nothing borrowed from a finance bro.</p>
          </div>
          <div className="store-promise-item">
            <span className="num">02</span>
            <h3>Yours forever</h3>
            <p>One-time purchase, lifetime access. When I update a tool, you get the new version free.</p>
          </div>
          <div className="store-promise-item">
            <span className="num">03</span>
            <h3>Walk into coaching warm</h3>
            <p>If you decide you want a real human in your corner later, you'll start coaching already a few steps ahead.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function StoreCTA({ openBooking }) {
  return (
    <section className="store-cta">
      <div className="wrap-narrow">
        <span className="cta-script">after you purchase…</span>
        <h2>Open it up <em>with</em> me.</h2>
        <p className="sub">
          These tools are designed to stand on their own. They stand even stronger when someone walks through them with you. Pair any purchase with a free call and I'll help you set it up, sit with you through the first hard numbers, and turn the worksheet into a plan that actually fits your life.
        </p>
        <div className="cta-actions" style={{ justifyContent: "center" }}>
          <button className="btn btn-primary" onClick={openBooking}>Book your free call</button>
          <a className="btn btn-ghost" href="index.html#tiers">See memberships</a>
        </div>
      </div>
    </section>
  );
}

function StoreApp() {
  const [bookingOpen, setBookingOpen] = React.useState(false);
  const openBooking = () => setBookingOpen(true);
  return (
    <>
      <Nav openBooking={openBooking} />
      <StoreHero />
      <StoreGrid />
      <StorePromise />
      <StoreCTA openBooking={openBooking} />
      <Footer />
      <BookingModal open={bookingOpen} onClose={() => setBookingOpen(false)} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<StoreApp />);