// HeroSection.jsx — Funny Farm Creations Home page hero

const HeroSection = ({ onShop, onMarkets }) => {
  const isMobile = useIsMobile();

  return (
    <section className="bg-page" style={{ position: 'relative', overflow: 'hidden', padding: isMobile ? '48px 16px 36px' : '80px 24px 60px' }}>
      {/* Gingham overlay */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 0,
        backgroundImage: 'linear-gradient(45deg,rgba(175,16,26,0.06) 25%,transparent 25%),linear-gradient(-45deg,rgba(175,16,26,0.06) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(175,16,26,0.06) 75%),linear-gradient(-45deg,transparent 75%,rgba(175,16,26,0.06) 75%)',
        backgroundSize: '20px 20px',
        backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0',
      }}></div>

      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 0 : 48, alignItems: 'center', position: 'relative', zIndex: 1 }}>
        {/* Left copy */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center',
            padding: '6px 16px', borderRadius: 9999,
            background: '#ffdad6', color: '#410003',
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase',
            alignSelf: 'flex-start',
          }}>Handmade with Love</div>

          <h1 style={{
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            fontSize: isMobile ? 32 : 52, fontWeight: 700, lineHeight: 1.15, color: 'var(--text-primary)',
          }}>
            Whimsical Crafts for{' '}
            <br/>
            <span style={{ color: '#af101a', fontStyle: 'italic' }}>Every Heart</span>
          </h1>

          <p style={{
            fontFamily: "'Newsreader', serif",
            fontSize: isMobile ? 16 : 18, lineHeight: 1.65, color: 'var(--text-secondary)', maxWidth: isMobile ? '100%' : 440,
          }}>
            Welcome to the farm! We stitch stories into every seam, creating artisan plushies and home goods that bring a touch of country magic to your daily life.
          </p>

          <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: 14, flexWrap: 'wrap' }}>
            <button onClick={onShop} style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              background: '#af101a', color: '#fff',
              fontFamily: "'Plus Jakarta Sans', sans-serif",
              fontSize: 14, fontWeight: 600, letterSpacing: '0.04em',
              padding: '14px 28px', borderRadius: 12, border: 'none', cursor: 'pointer',
              boxShadow: '0 4px 14px rgba(175,16,26,0.28)',
              width: isMobile ? '100%' : 'auto',
              transition: 'transform 200ms cubic-bezier(0.175,0.885,0.32,1.275)',
            }}
              onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.05)'}
              onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
              onMouseDown={e => e.currentTarget.style.transform = 'scale(0.96)'}
              onMouseUp={e => e.currentTarget.style.transform = 'scale(1.05)'}
            >
              Shop Collections
              <span className="material-symbols-outlined" style={{ fontSize: 18 }}>arrow_forward</span>
            </button>
            <button onClick={onMarkets} style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              background: 'var(--bg-card)', color: '#af101a',
              fontFamily: "'Plus Jakarta Sans', sans-serif",
              fontSize: 14, fontWeight: 600, letterSpacing: '0.04em',
              padding: '14px 28px', borderRadius: 12,
              border: '2px solid #af101a', cursor: 'pointer',
              width: isMobile ? '100%' : 'auto',
              transition: 'transform 200ms cubic-bezier(0.175,0.885,0.32,1.275)',
            }}
              onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.05)'}
              onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
            >
              Upcoming Markets
            </button>
          </div>
        </div>

        {/* Right mascot frame — desktop only */}
        {!isMobile && (
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
            <div style={{
              position: 'absolute', inset: -16,
              background: 'rgba(255,179,172,0.18)', borderRadius: 32,
              transform: 'rotate(3deg)',
              transition: 'transform 400ms',
            }}></div>
            <div style={{
              position: 'relative',
              borderRadius: 28, overflow: 'hidden',
              border: '2px dashed #c9a29e',
              boxShadow: '0 8px 32px rgba(119,87,77,0.14)',
              width: '100%', maxWidth: 400,
              aspectRatio: '1 / 1',
              background: 'var(--bg-card)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <img src="mascot-logo.webp" alt="Funny Farm Creations" style={{
                width: '85%', height: '85%', objectFit: 'contain',
              }}/>
            </div>
            {/* Bounce badge */}
            <div style={{
              position: 'absolute', top: -10, right: -10,
              background: '#fff', borderRadius: '50%',
              width: 52, height: 52,
              border: '2px dashed #af101a',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 4px 12px rgba(175,16,26,0.2)',
              animation: 'bounce 2s infinite',
            }}>
              <span className="material-symbols-outlined" style={{ color: '#af101a', fontSize: 26 }}>pets</span>
            </div>
          </div>
        )}
      </div>

      <style>{`
        @keyframes bounce {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-8px); }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { HeroSection });