// Hero.jsx — cream hero with display italic headline
function Hero({ onShop, onCustom }) {
  return (
    <section className="mys-section" style={{ paddingTop: 56, paddingBottom: 64 }}>
      <div className="mys-page" style={{ display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 56, alignItems: 'center' }}>
        <div className="mys-fade">
          <p className="mys-eyebrow" style={{ marginBottom: 18 }}>
            <span className="mys-stamp">Made in Ottawa · Est. 2026</span>
          </p>
          <h1 style={{
            fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 600,
            fontSize: 'clamp(40px, 4.6vw, 58px)', lineHeight: 1.05, letterSpacing: '-0.02em',
            color: 'var(--fg)', margin: '0 0 8px'
          }}>
            Every piece,<br/>built around&nbsp;you.
          </h1>
          <hr className="mys-rule" />
          <p style={{
            fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.65,
            color: 'var(--fg-muted)', maxWidth: 460, margin: '0 0 28px'
          }}>
            Made-to-order engraved goods from a one-person studio.
            Send me a name, a date, or a memory — I'll build the rest.
          </p>
          <div style={{ display: 'flex', gap: 12 }}>
            <button className="mys-btn mys-btn-primary mys-btn-lg" onClick={onShop}>
              See the shop
            </button>
            <button className="mys-btn mys-btn-secondary mys-btn-lg" onClick={onCustom}>
              Start a custom <span className="mys-btn-arrow">→</span>
            </button>
          </div>
        </div>
        <div className="mys-fade" style={{ animationDelay: '80ms' }}>
          {/* Logo tag card — the hero visual, mocking what would become a real product photo */}
          <div style={{
            background: '#fff', border: '0.5px solid var(--cream-edge)',
            borderRadius: 'var(--radius-xl)', padding: 40,
            boxShadow: 'var(--shadow-lg)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            aspectRatio: '4/5'
          }}>
            <svg viewBox="0 0 100 130" style={{ width: '55%' }}>
              <path d="M 10 50 A 40 40 0 0 1 90 50 L 90 120 A 5 5 0 0 1 85 125 L 15 125 A 5 5 0 0 1 10 120 Z" fill="none" stroke="#3B2A14" strokeWidth="2"/>
              <path d="M 15 50 A 35 35 0 0 1 85 50 L 85 120 L 15 120 Z" fill="none" stroke="#3B2A14" strokeWidth="1"/>
              <circle cx="50" cy="25" r="5" fill="none" stroke="#3B2A14" strokeWidth="1.5"/>
              <line x1="50" y1="10" x2="50" y2="15" stroke="#3B2A14" strokeWidth="1"/>
              <text x="50" y="65" textAnchor="middle" fill="#3B2A14" style={{ fontFamily: "'Cormorant Garamond','EB Garamond',Georgia,serif", fontStyle: 'italic', fontWeight: 600, fontSize: 24 }}>Made</text>
              <text x="50" y="88" textAnchor="middle" fill="#3B2A14" style={{ fontFamily: "'Cormorant Garamond','EB Garamond',Georgia,serif", fontStyle: 'italic', fontWeight: 600, fontSize: 24 }}>Yours</text>
              <line x1="30" y1="102" x2="70" y2="102" stroke="#C8956C" strokeWidth="1.5"/>
              <text x="50" y="112" textAnchor="middle" fill="#B4B2A9" style={{ fontFamily: "'Inter',system-ui,sans-serif", fontWeight: 500, fontSize: 7, letterSpacing: '1px' }}>EST. 2026</text>
            </svg>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;