function About() {
  return (
    <section id="about" className="m-section-pad" style={{ background: '#D8C098', padding: '96px 40px', borderTop: '1px solid #2B2418' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div className="m-stack m-stack-gap-lg" style={{
          display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'center',
        }}>
          <div style={{ position: 'relative' }}>
            <img src="assets/photo_signage_latte.png" alt="Hand-painted La Pola signage behind a latte"
              style={{ width: '100%', height: 520, objectFit: 'cover', display: 'block' }}
            />
            <div style={{
              position: 'absolute', bottom: -16, right: -16,
              background: '#000', color: '#D9CA8F',
              padding: '16px 22px',
              fontFamily: "'Yellowtail', cursive", fontSize: 32, lineHeight: 1,
              border: '1.5px solid #D9CA8F',
              boxShadow: '0 18px 40px rgba(43,36,24,0.25)',
            }}>
              since 2023
            </div>
            <div style={{
              position: 'absolute', top: -14, left: -14,
              background: '#80B0B0', color: '#000',
              padding: '10px 14px',
              fontFamily: 'Inter', fontSize: 10, fontWeight: 700,
              letterSpacing: '0.28em', textTransform: 'uppercase',
              transform: 'rotate(-4deg)',
            }}>family run</div>
          </div>

          <div>
            <div style={{
              fontFamily: 'Inter', fontSize: 11, fontWeight: 600,
              letterSpacing: '0.32em', textTransform: 'uppercase', color: '#2A1A04',
            }}>Our story</div>
            <h2 style={{
              fontFamily: "'Abril Fatface', serif",
              fontSize: 'clamp(48px, 6vw, 80px)',
              lineHeight: 1.0, margin: '12px 0 8px',
              color: '#000',
            }}>
              Named for a<br/>
              <span style={{
                fontFamily: "'Yellowtail', cursive",
                color: '#2C4C4C', fontSize: '0.78em',
                display: 'inline-block', transform: 'translateY(4px)',
              }}>heroine.</span>
            </h2>
            <p style={{
              fontFamily: 'Inter', fontSize: 17, lineHeight: 1.6, color: '#2B2418',
              marginTop: 22, maxWidth: 520,
            }}>
              "La Pola" is a nickname for Policarpa Salavarrieta, a Colombian
              independence heroine. Her country grows some of the world's finest coffee
              — so we pour it here, on Amarina Ave, most mornings before the school run.
            </p>
            <p style={{
              fontFamily: 'Inter', fontSize: 17, lineHeight: 1.6, color: '#2B2418',
              marginTop: 16, maxWidth: 520,
            }}>
              Small batch, small shop, small hours. We're two baristas and a pastry chef
              who argue about brew ratios in good faith. Come say hi.
            </p>

            <div className="m-stack m-stack-gap-sm" style={{
              marginTop: 28, paddingTop: 24,
              borderTop: '1px dotted rgba(0,0,0,0.35)',
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
            }}>
              <Virtue k="Origin" v="Colombia" />
              <Virtue k="Roasted" v="Brisbane" />
              <Virtue k="Poured" v="Ashgrove" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Virtue({ k, v }) {
  return (
    <div>
      <div style={{
        fontFamily: 'Inter', fontSize: 10, fontWeight: 700,
        letterSpacing: '0.28em', textTransform: 'uppercase', color: '#4A3E2A',
      }}>{k}</div>
      <div style={{ fontFamily: "'Abril Fatface', serif", fontSize: 30, color: '#000', marginTop: 4, lineHeight: 1 }}>{v}</div>
    </div>
  );
}

function Reviews() {
  const reviews = [
    { name: 'Sarah H.', when: 'last week', stars: 5, source: 'Google',
      quote: 'Best coffee in Ashgrove, full stop. The turkey & cranberry toastie is dangerous.' },
    { name: 'Daniel P.', when: '2 weeks ago', stars: 5, source: 'Google',
      quote: 'Hidden little spot with soul. Colombian beans actually taste like Colombian beans.' },
    { name: 'Mia R.', when: 'last month', stars: 5, source: 'Instagram',
      quote: 'The latte art, the hand-painted signage, the pastries — every corner of this place is loved.' },
  ];

  return (
    <section id="reviews" className="m-section-pad" style={{ background: '#F4E7CC', padding: '96px 40px', borderTop: '1px solid #2B2418' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div style={{
            fontFamily: 'Inter', fontSize: 11, fontWeight: 600,
            letterSpacing: '0.32em', textTransform: 'uppercase', color: '#2A1A04',
          }}>What the regulars say</div>
          <h2 style={{
            fontFamily: "'Abril Fatface', serif",
            fontSize: 'clamp(48px, 6vw, 76px)',
            color: '#000', margin: '12px 0 10px', lineHeight: 1.02,
          }}>Kind words &amp; strong coffee.</h2>
          <div style={{ fontFamily: "'Yellowtail', cursive", fontSize: 36, color: '#2C4C4C' }}>
            4.9 ★ · 280+ reviews
          </div>
        </div>
        <div className="m-stack" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          {reviews.map(r => (
            <figure key={r.name} style={{
              background: '#D8C098', padding: '28px 26px', margin: 0,
              borderTop: '3px solid #000',
              display: 'flex', flexDirection: 'column', gap: 16,
              transition: 'transform 240ms ease-out, box-shadow 240ms ease-out',
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 18px 40px rgba(43,36,24,0.18)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}
            >
              <div style={{ display: 'flex', gap: 3 }}>
                {[...Array(5)].map((_, i) => (
                  <svg key={i} width="14" height="14" viewBox="0 0 40 40" fill={i < r.stars ? '#000' : 'none'} stroke="#000" strokeWidth="2">
                    <path d="M20 3 L24 14 L36 15 L27 23 L30 35 L20 29 L10 35 L13 23 L4 15 L16 14 Z" strokeLinejoin="round"/>
                  </svg>
                ))}
              </div>
              <blockquote style={{
                fontFamily: "'Abril Fatface', serif", fontSize: 22,
                lineHeight: 1.22, color: '#000', margin: 0, textWrap: 'pretty',
              }}>"{r.quote}"</blockquote>
              <figcaption style={{
                borderTop: '1px dotted rgba(0,0,0,0.35)', paddingTop: 12, marginTop: 'auto',
              }}>
                <div style={{
                  fontFamily: 'Inter', fontSize: 13, fontWeight: 700,
                  color: '#000', letterSpacing: '0.04em',
                }}>{r.name}</div>
                <div style={{
                  fontFamily: 'Inter', fontSize: 10, color: '#4A3E2A',
                  marginTop: 3, letterSpacing: '0.2em', textTransform: 'uppercase',
                }}>{r.when} · {r.source}</div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function Gallery() {
  const tiles = [
    { src: 'assets/photo_signage_latte.png', scrawl: 'the signage', span: [2, 2] },
    { src: 'assets/photo_pastry_bar.jpg', scrawl: 'fresh bakes', span: [2, 1] },
    { src: 'assets/photo_service_counter.jpg', scrawl: 'lunch specials', span: [2, 1] },
    { src: 'assets/illustration_cups_stars.jpg', scrawl: 'new arrivals', span: [2, 1] },
    { src: 'assets/photo_landing_spread.jpg', scrawl: 'on the bench', span: [2, 1] },
  ];
  return (
    <section id="gallery" className="m-section-pad" style={{ background: '#000', padding: '96px 40px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{
          display: 'flex', alignItems: 'end', justifyContent: 'space-between',
          gap: 24, marginBottom: 36, flexWrap: 'wrap',
        }}>
          <div>
            <div style={{
              fontFamily: 'Inter', fontSize: 11, fontWeight: 600,
              letterSpacing: '0.32em', textTransform: 'uppercase', color: '#D9CA8F',
            }}>@lapola_cafe</div>
            <div style={{ fontFamily: "'Yellowtail', cursive", fontSize: 72, color: '#fff', lineHeight: 1, marginTop: 6 }}>
              inside the cart.
            </div>
          </div>
          <a href="#" style={{
            fontFamily: 'Inter', fontSize: 12, fontWeight: 700,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: '#D9CA8F', textDecoration: 'none',
            padding: '12px 18px', border: '1px solid #D9CA8F',
          }}>Follow along →</a>
        </div>

        <div className="m-gallery" style={{
          display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)',
          gridAutoRows: '180px', gap: 12,
        }}>
          {tiles.map((t, i) => (
            <figure key={i} style={{
              position: 'relative', margin: 0, overflow: 'hidden',
              gridColumn: `span ${t.span[0]}`,
              gridRow: `span ${t.span[1]}`,
              background: '#1a1a1a',
            }}>
              <img src={t.src} alt={t.scrawl} style={{
                width: '100%', height: '100%', objectFit: 'cover', display: 'block',
                transition: 'transform 600ms ease-out',
              }}
                onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.06)'}
                onMouseLeave={e => e.currentTarget.style.transform = 'none'}
              />
              <figcaption style={{
                position: 'absolute', left: 16, bottom: 14,
                fontFamily: "'Yellowtail', cursive", fontSize: 30, color: '#fff',
                textShadow: '0 2px 16px rgba(0,0,0,0.7)', lineHeight: 1,
              }}>{t.scrawl}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

window.About = About;
window.Reviews = Reviews;
window.Gallery = Gallery;