function Hero({ setPage }) {
  const { Button } = window.LittleOliveStreetDesignSystem_65d760;
  return (
    <div className="los-hero">
      <style>{`
        .los-hero {
          max-width: var(--container-max); margin: 0 auto; padding: 72px 32px 84px;
          display: grid; grid-template-columns: 1fr 0.92fr; gap: 60px; align-items: center;
        }
        .los-hero-copy h1 { font: var(--text-display-xl); color: var(--text-primary); margin: 0 0 18px; text-wrap: pretty; }
        .los-hero-media { position: relative; }
        .los-hero-media img.main { width: 100%; height: 480px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); display: block; }
        .los-hero-media img.support {
          position: absolute; width: 40%; bottom: -30px; left: -30px;
          border: 6px solid var(--surface-page); border-radius: var(--radius-lg);
          box-shadow: var(--shadow-raised); display: block;
        }
        @media (max-width: 900px) {
          .los-hero { grid-template-columns: 1fr; padding: 40px 20px 56px; gap: 40px; }
          .los-hero-media { order: -1; }
          .los-hero-copy h1 { font: 600 2.25rem/1.12 var(--font-display); }
          .los-hero-media img.main { height: 320px; }
          .los-hero-media img.support { width: 36%; bottom: -18px; left: -14px; border-width: 4px; }
        }
      `}</style>
      <div className="los-hero-copy">
        <h1>Fresh homemade desserts for families, gifts, and celebrations.</h1>
        <p style={{ font: 'var(--text-body-lg)', color: 'var(--text-secondary)', margin: '0 0 32px' }}>
          Classic cookies, pies, pound cakes, and custom orders made fresh in Houston for pickup — with local delivery sometimes available.
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 20 }}>
          <Button variant="primary" size="lg" onClick={() => setPage('order')}>Order Now</Button>
          <Button variant="secondary" size="lg" onClick={() => setPage('custom')}>Custom Order</Button>
        </div>
        <div style={{ font: 'var(--text-body-sm)', color: 'var(--text-secondary)', display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
          <span>Made fresh to order</span>
          <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--border-hairline-strong)', flexShrink: 0 }} />
          <span></span>
        </div>
      </div>
      <div className="los-hero-media">
        <img className="main" src="assets/photo-cinnamon-rolls-hero.jpg" alt="Plate of iced cinnamon rolls from Little Olive Street" />
      </div>
    </div>
  );
}

function HomePage({ setPage }) {
  const { Button, Badge, IconBadge, Card } = window.LittleOliveStreetDesignSystem_65d760;
  const { RooflineDivider, BlobAccent } = window.LittleOliveStreetDesignSystem_65d760;
  function Icon({ name, color, size = 20 }) {
    const pascal = name.split('-').map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join('');
    const node = window.lucide && window.lucide.icons[pascal];
    if (!node) return null;
    const el = window.lucide.createElement(node);
    el.setAttribute('width', size);
    el.setAttribute('height', size);
    el.setAttribute('stroke', color || 'currentColor');
    return <span style={{ width: size, height: size, display: 'flex', flexShrink: 0, color }} dangerouslySetInnerHTML={{ __html: el.outerHTML }} />;
  }

  return (
    <div>
      <Hero setPage={setPage} />

      <RooflineDivider peakCount={20} height={40} />

      {/* Dessert duty framing */}
      <div className="los-grid-2" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: `64px var(--page-gutter)`, gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
        <div>
          <h2 style={{ font: 'var(--text-display-md)', color: 'var(--text-primary)', margin: '0 0 16px' }}>
            Assigned dessert this year?
          </h2>
          <p style={{ font: 'var(--text-body-md)', color: 'var(--text-secondary)', margin: '0 0 24px' }}>
            We've got you. Every order is baked fresh, ready to serve, and built to get the reaction —
            not just a slice. No stress, no store-bought giveaways.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
              <IconBadge tone="mustard" icon={<Icon name="clock" color="var(--accent-mustard)" />} />
              <span style={{ font: 'var(--text-body-sm)', color: 'var(--text-primary)' }}>Order ahead — ready for pickup on your schedule</span>
            </div>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
              <IconBadge tone="sage" icon={<Icon name="check-circle" color="var(--accent-sage)" />} />
              <span style={{ font: 'var(--text-body-sm)', color: 'var(--text-primary)' }}>Made in small batches, from scratch, every time</span>
            </div>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
              <IconBadge tone="blush" icon={<Icon name="heart" color="var(--accent-primary)" />} />
              <span style={{ font: 'var(--text-body-sm)', color: 'var(--text-primary)' }}>Guaranteed to get "wait, YOU made this?"</span>
            </div>
          </div>
        </div>
        <img src="assets/photo-pecan-pie.jpg" style={{ width: '100%', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-card)' }} />
      </div>

      {/* Signature product */}
      <div style={{ background: 'var(--surface-card)', padding: `64px var(--page-gutter)` }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', textAlign: 'center' }}>
          <div style={{ marginBottom: 16 }}><Badge tone="mustard">Signature</Badge></div>
          <h2 style={{ font: 'var(--text-display-md)', color: 'var(--text-primary)', margin: '0 0 12px' }}>Our signature desserts. Always on the menu.</h2>
          <p style={{ font: 'var(--text-body-md)', color: 'var(--text-secondary)', margin: '0 0 36px', maxWidth: 560, marginLeft: 'auto', marginRight: 'auto' }}>
            Rich and decadent. Every time.
          </p>
          <div className="los-grid-3" style={{ gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
              { img: 'assets/photo-brownies.jpg', name: 'Brownies', tag: 'Signature', tone: 'mustard', desc: 'Our year-round favorite.' },
              { img: 'assets/photo-cake.jpg', name: 'Praline Pound Cake', tag: 'Signature', tone: 'sage', desc: 'Buttery cake, caramel glaze.' },
              { img: 'assets/photo-cookies.jpg', name: 'Cookies & Cream Cookies', tag: 'Fan Favorite', tone: 'blush', desc: 'Chewy, loaded, gone fast.' },
            ].map((p) => (
              <Card key={p.name} padding="0" style={{ overflow: 'hidden', textAlign: 'left' }}>
                <img src={p.img} style={{ width: '100%', height: 160, objectFit: 'cover', display: 'block' }} />
                <div style={{ padding: 20 }}>
                  <div style={{ marginBottom: 10 }}><Badge tone={p.tone}>{p.tag}</Badge></div>
                  <div style={{ font: 'var(--text-display-sm)', color: 'var(--text-primary)' }}>{p.name}</div>
                  <div style={{ font: 'var(--text-body-sm)', color: 'var(--text-secondary)', marginTop: 4 }}>{p.desc}</div>
                </div>
              </Card>
            ))}
          </div>
          <div style={{ marginTop: 36 }}>
            <Button variant="primary" onClick={() => setPage('order')}>See the full menu</Button>
          </div>
        </div>
      </div>

      <RooflineDivider peakCount={20} height={40} />

      {/* About teaser */}
      <div style={{ maxWidth: 'var(--container-narrow)', margin: '0 auto', padding: `56px var(--page-gutter)`, textAlign: 'center' }}>
        <p style={{ font: 'var(--text-body-lg)', color: 'var(--text-primary)', margin: '0 0 16px' }}>
          Started on a little street, baked for one very lucky husband.
        </p>
        <span onClick={() => setPage('about')} style={{ font: 'var(--text-label)', color: 'var(--accent-primary)', cursor: 'pointer' }}>
          Read our story →
        </span>
      </div>
    </div>
  );
}