/* Mega-Sweets website — content sections */

const MS_FLAVORS = [
  ['Confetti', 'confetti'], ['Vanilla', 'vanilla'], ['Chocolate', 'chocolate'],
  ['Lemon', 'lemon'], ['Red Velvet', 'red-velvet'], ['Peanut Butter', 'peanut-butter'],
  ['Cookie Dough', 'cookie-dough'], ['Strawberry', 'strawberry'],
];

const MS_PACKAGES = [
  { name: 'Small', items: ['12 Cake Pops', '4 Rice Krispies', '6 Pretzels'], treats: 22, price: 85, tone: 'sky' },
  { name: 'Medium', items: ['20 Cake Pops', '8 Rice Krispies', '12 Pretzels'], treats: 40, price: 165, tone: 'purple' },
  { name: 'Large', items: ['30 Cake Pops', '12 Rice Krispies', '18 Pretzels'], treats: 60, price: 240, tone: 'magenta' },
];

const MS_FEATURES = [
  ['pastry-box', 'Wrapped & boxed', 'Individually wrapped in white pastry boxes.'],
  ['popsicle-stick', 'Acrylic sticks', 'Reusable acrylic popsicle sticks as an upgrade.'],
  ['palette', 'Custom colors', 'Matched to your theme — always included.'],
  ['gift-box', 'Themed packaging', 'School, sports, or special-event styling on request.'],
];

function ProductFeature({ content }) {
  const pd = content.perDozen;
  return (
    <section className="prod">
      <div className="prod-card">
        <img src={content.images.cakePops} alt="Cake pops" />
        <div className="prod-meta">
          <h3>Cake Pops</h3>
          <p className="body">Round, hand-dipped and decorated with shells, starfish, waves &amp; sprinkles.</p>
          <span className="price price--green">${pd.cakePops}<small>/dozen</small></span>
        </div>
      </div>
      <div className="prod-card">
        <img src={content.images.cakesicles} alt="Cakesicles" />
        <div className="prod-meta">
          <h3>Cakesicles</h3>
          <p className="body">Popsicle-shaped cakes finished with satin bows on acrylic or wood sticks.</p>
          <span className="price price--green">${pd.cakesicles}<small>/dozen</small></span>
        </div>
      </div>
    </section>
  );
}

function FlavorGrid({ onOrder, content }) {
  return (
    <section className="flavors" id="flavors">
      <div className="sec-head">
        <span className="section-label" style={{ color: 'var(--ms-purple)' }}>Custom Flavors</span>
        <h2>Pick your flavors</h2>
        <p className="tagline">— Perfect for celebrations —</p>
      </div>
      <div className="flavor-grid">
        {content.flavors.map((f, i) => (
          <div className="flavor-tile" key={f.name + i}>
            <img src={f.image} alt={f.name} />
            <span className="label">{f.name}</span>
          </div>
        ))}
      </div>
      <img className="flourish" src="assets/flourish-divider.png" alt="" />
      <p className="small flavors-foot">{content.flavors.map(f => f.name).join(' · ')}</p>
      <div style={{ textAlign: 'center' }}>
        <button className="ms-btn ms-btn--primary" onClick={onOrder}>Build a Box</button>
      </div>
    </section>
  );
}

function PackageCards({ onPick, content }) {
  return (
    <section className="packages" id="packages">
      <div className="sec-head">
        <span className="section-label" style={{ color: 'var(--ms-sky)' }}>Party Packages</span>
        <h2>Fully customized to your event</h2>
        <p className="body-muted" style={{ maxWidth: 560, margin: '0 auto' }}>Match your theme, colors, school, sports team, logo, or special event.</p>
      </div>
      <div className="pkg-grid">
        {content.packages.map(p => (
          <div className={`ms-card pkg-card pkg--${p.tone}`} key={p.name}>
            <h3 className={`pkg-name pkg-name--${p.tone}`}>{p.name}</h3>
            <ul className="pkg-list">{p.items.map(i => <li key={i}>{i}</li>)}</ul>
            <hr className="ms-divider-dotted" />
            <div className="pkg-foot">
              <span className="small">{p.treats} treats</span>
              <span className={`price price--${p.tone === 'sky' ? 'purple' : p.tone}`}>${p.price}</span>
            </div>
            <button className="ms-btn ms-btn--outline pkg-btn" onClick={() => onPick(p.name)}>Choose {p.name}</button>
          </div>
        ))}
      </div>
    </section>
  );
}

function FeatureStrip() {
  return (
    <section className="features">
      {MS_FEATURES.map(([slug, title, desc]) => (
        <div className="feature" key={slug}>
          <img src={`assets/features/${slug}.png`} alt="" />
          <div>
            <div className="feature-title">{title}</div>
            <div className="small">{desc}</div>
          </div>
        </div>
      ))}
    </section>
  );
}

Object.assign(window, { MS_FLAVORS, MS_PACKAGES, MS_FEATURES, ProductFeature, FlavorGrid, PackageCards, FeatureStrip });