function Marquee({ items, speed = 48 }) {
  // seamless marquee via duplicated content
  return (
    <div style={{
      overflow: 'hidden', width: '100%',
      borderTop: '1px solid #33312A', borderBottom: '1px solid #33312A',
      background: '#000',
    }}>
      <div style={{
        display: 'flex', whiteSpace: 'nowrap',
        animation: `marquee ${speed}s linear infinite`,
        willChange: 'transform',
      }}>
        {[...items, ...items, ...items].map((it, i) => (
          <span key={i} style={{
            display: 'inline-flex', alignItems: 'center', gap: 20,
            padding: '16px 28px',
            fontFamily: "'Abril Fatface', serif", fontSize: 22,
            color: '#D9CA8F', letterSpacing: '0.02em',
          }}>
            {it}
            <svg width="14" height="14" viewBox="0 0 40 40" fill="#80B0B0">
              <path d="M20 3 L24 14 L36 15 L27 23 L30 35 L20 29 L10 35 L13 23 L4 15 L16 14 Z" />
            </svg>
          </span>
        ))}
      </div>
    </div>
  );
}

function Hero() {
  const tags = [
    'Tolima single origin',
    'Plum · cocoa · long finish',
    'Roasted in Brisbane',
    'Take a seat',
    'Pastries out at 7',
    '87 Amarina Ave',
    'Since 2023',
  ];

  return (
    <section id="top" style={{ background: '#000', position: 'relative', overflow: 'hidden' }}>
      {/* decorative gold corner brackets */}
      <GoldCorners />

      <div className="m-stack m-stack-gap-md m-hero-pad" style={{
        maxWidth: 1280, margin: '0 auto',
        padding: '56px 40px 40px',
        display: 'grid',
        gridTemplateColumns: '1.1fr 1fr',
        gap: 64,
        alignItems: 'center',
        position: 'relative',
        zIndex: 2,
      }}>
        <div className="m-text-center">
          <h1 className="m-h1" style={{
            fontFamily: "'Abril Fatface', serif",
            fontSize: 'clamp(68px, 8vw, 128px)',
            lineHeight: 0.92,
            color: '#fff',
            margin: 0,
            letterSpacing: '-0.01em',
          }}>
            Colombian<br/>
            beans,<br/>
            Brisbane<br/>
            mornings.
          </h1>

          <p style={{
            fontFamily: 'Inter', fontSize: 18, lineHeight: 1.55,
            color: '#E8D4B0', margin: '32px 0 36px', maxWidth: 480,
          }}>
            A small corner of Ashgrove pouring small‑batch coffee from La Pola's
            home country. We open at 7 and close when the pastries run out.
          </p>

          <div className="m-text-center" style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
            <a href="https://www.doordash.com/store/la-pola-cafe-ashgrove-29850449/38137782/" target="_blank" rel="noopener" style={{
              fontFamily: 'Inter', fontSize: 13, fontWeight: 700,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              background: '#D8C098', color: '#000',
              padding: '18px 28px', textDecoration: 'none',
              transition: 'background 180ms',
            }}
              onMouseEnter={e => e.currentTarget.style.background = '#E8D4B0'}
              onMouseLeave={e => e.currentTarget.style.background = '#D8C098'}
            >
              Order ahead →
            </a>
            <a href="#menu" style={{
              fontFamily: 'Inter', fontSize: 13, fontWeight: 700,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              background: 'transparent', color: '#fff',
              padding: '17px 28px', textDecoration: 'none',
              border: '1px solid #D9CA8F',
              transition: 'background 180ms, color 180ms',
            }}
              onMouseEnter={e => { e.currentTarget.style.background = '#D9CA8F'; e.currentTarget.style.color = '#000'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#fff'; }}
            >
              See the menu
            </a>
          </div>

          <div className="m-text-center" style={{
            marginTop: 48, paddingTop: 24,
            borderTop: '1px dashed #33312A',
            display: 'flex', gap: 40, flexWrap: 'wrap',
          }}>
            <Stat kicker="Open" value="7 AM" note="Mon–Fri" />
            <Stat kicker="Rated" value="4.9 ★" note="280+ regulars" />
            <Stat kicker="At" value="Ashgrove" note="87 Amarina Ave" />
          </div>
        </div>

        <div style={{ position: 'relative' }}>
          <img src="assets/logo_full.png" alt="La Pola Cafe"
            style={{
              width: '100%', height: 'auto', display: 'block',
              filter: 'drop-shadow(0 40px 60px rgba(0,0,0,0.5))',
              animation: 'floatSlow 9s ease-in-out infinite',
            }}
          />
          {/* floating script badge */}
          <div style={{
            position: 'absolute', top: -12, right: -8,
            background: '#80B0B0', color: '#000',
            padding: '14px 18px',
            transform: 'rotate(6deg)',
            fontFamily: "'Yellowtail', cursive", fontSize: 26,
            lineHeight: 1,
            boxShadow: '0 12px 30px rgba(0,0,0,0.4)',
          }}>
            hi, regulars
          </div>
          <div style={{
            position: 'absolute', bottom: -10, left: -10,
            background: '#D8C098', color: '#000',
            padding: '12px 16px',
            transform: 'rotate(-4deg)',
            fontFamily: 'Inter', fontSize: 10, fontWeight: 700,
            letterSpacing: '0.3em', textTransform: 'uppercase',
            boxShadow: '0 12px 30px rgba(0,0,0,0.4)',
          }}>
            #AshgroveCoffee
          </div>
        </div>
      </div>

      <Marquee items={tags} />
    </section>
  );
}

function Stat({ kicker, value, note }) {
  return (
    <div>
      <div style={{
        fontFamily: 'Inter', fontSize: 10, fontWeight: 600,
        letterSpacing: '0.32em', textTransform: 'uppercase',
        color: '#D9CA8F', marginBottom: 6,
      }}>{kicker}</div>
      <div style={{ fontFamily: "'Abril Fatface', serif", fontSize: 30, color: '#fff', lineHeight: 1 }}>{value}</div>
      <div style={{ fontFamily: 'Inter', fontSize: 12, color: '#E8D4B0', marginTop: 4 }}>{note}</div>
    </div>
  );
}

function Sparkle({ color = '#D9CA8F', size = 10 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill={color}>
      <path d="M20 3 L23 17 L37 20 L23 23 L20 37 L17 23 L3 20 L17 17 Z" />
    </svg>
  );
}

function GoldCorners() {
  const br = { position: 'absolute', width: 48, height: 48, border: '1.5px solid #D9CA8F', pointerEvents: 'none' };
  return (
    <>
      <div style={{ ...br, top: 16, left: 16, borderRight: 'none', borderBottom: 'none' }} />
      <div style={{ ...br, top: 16, right: 16, borderLeft: 'none', borderBottom: 'none' }} />
      <div style={{ ...br, bottom: 76, left: 16, borderRight: 'none', borderTop: 'none' }} />
      <div style={{ ...br, bottom: 76, right: 16, borderLeft: 'none', borderTop: 'none' }} />
    </>
  );
}

window.Hero = Hero;
window.Marquee = Marquee;
window.Sparkle = Sparkle;