// Hero — serif headline + tagline + brand tile (tile hidden on mobile)

function Hero({ onOrder, onEnquire, enableOrdering = true }) {
  return (
    <section style={{ padding: '72px 24px 56px', width: '100%', boxSizing: 'border-box' }} className="hero-section">
      <div style={{
        maxWidth: 1180, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 0.9fr)',
        gap: 48, alignItems: 'center',
        width: '100%',
      }} className="hero-grid">

        {/* Left — text */}
        <div style={{ minWidth: 0 }}>
          <h1 style={{
            fontFamily: "'Fraunces', serif",
            fontSize: 64, fontWeight: 600, lineHeight: 1.05,
            letterSpacing: '-0.03em', color: '#3D2817', margin: '0 0 20px',
            wordBreak: 'break-word',
          }} className="hero-head">
            Small-batch bakes<br/><em style={{ fontStyle: "italic", fontWeight: 400 }}>from my little kitchen.</em>
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: '#8B6F4E', margin: 0 }} className="hero-body">
            Hi, I'm Emilia - welcome to my Petite Bakery! I love baking buns, cookies and celebration cakes from my little kitchen at home, and honestly, there's nothing I enjoy more than making something delicious for someone's special occasion.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: '#8B6F4E', margin: '14px 0 0' }} className="hero-body">
            Everything is made using the best quality ingredients, so you know that love has gone into everything I bake. You're welcome to come and visit the Cake Shed on a Saturday, or message me if you have a specific request for a celebration cake - just give me a shout, I'd love to help make your day a little sweeter.
          </p>
        </div>

        {/* Right — brand tile, hidden on mobile via CSS class */}
        <div style={{ position: 'relative' }} className="hero-tile">
          <div style={{
            background: '#D16D6A', aspectRatio: '1 / 1', borderRadius: 28,
            position: 'relative', overflow: 'hidden',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <div style={{ textAlign: 'center', color: '#FFFBF5', padding: 40 }}>
              <div style={{ fontFamily: "'Sacramento', cursive", fontSize: 120, lineHeight: 0.95 }}>Emilia's</div>
              <div style={{ fontFamily: "'Fraunces', serif", fontSize: 20, fontStyle: 'italic', opacity: 0.85, marginTop: 4 }}>Petite Bakery</div>
            </div>
          </div>
          <div style={{
            position: 'absolute', bottom: -18, left: -18,
            background: '#FFFBF5', border: '1px solid #F0E0CE', borderRadius: 18,
            padding: '14px 18px', boxShadow: '0 6px 20px rgba(61,40,23,0.08)',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: '#F0E0CE', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#8B5A2B' }}>
              <i data-lucide="map-pin" style={{ width: 18, height: 18 }}></i>
            </div>
            <div>
              <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#8B6F4E', fontWeight: 500 }}>Emilia's Petite Bakery</div>
              <div style={{ fontSize: 13, color: '#3D2817', fontWeight: 500 }}>Pinnocks Lane, Baldock</div>
            </div>
          </div>
        </div>

      </div>
    </section>
  );
}

window.Hero = Hero;