import React from 'react';
import Mascot from './Mascot';
import OrnamentBloom from './OrnamentBloom';
import { IconPaw } from './Icons';

export default function DesktopHero({
  title,
  subtitle,
  accent = '#D4AF37',
  bubble,
  mascotVariant = 'full',
}) {
  return (
    <section className="mt-wash" style={{ position: 'relative', padding: '56px 36px 64px', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1400, margin: '0 auto', position: 'relative', zIndex: 2 }}>
        <div style={{ textAlign: 'center' }}>
          <div className="bloom-row" style={{ color: accent, display: 'inline-flex', alignItems: 'center', gap: 12 }}>
            <svg width="60" height="6" viewBox="0 0 60 6">
              <path d="M0 3 L56 3" stroke={accent} strokeWidth="1" />
              <circle cx="58" cy="3" r="2" fill={accent} />
            </svg>
            <OrnamentBloom size={22} color={accent} />
            <svg width="60" height="6" viewBox="0 0 60 6">
              <circle cx="2" cy="3" r="2" fill={accent} />
              <path d="M4 3 L60 3" stroke={accent} strokeWidth="1" />
            </svg>
          </div>
          <h1 className="font-title" style={{
            margin: '14px 0 0', fontSize: 72, color: '#1F2A44',
            letterSpacing: '-0.04em', lineHeight: 1,
          }}>{title}</h1>
          <div style={{
            marginTop: 18, fontSize: 16, color: '#6B6B6B',
            letterSpacing: '-0.01em',
          }}>{subtitle}</div>
        </div>

        {bubble && (
          <div style={{ position: 'absolute', right: 220, top: 36, maxWidth: 210 }}>
            <div style={{
              background: '#FBF7EF', border: '1px solid rgba(31,42,68,0.12)',
              borderRadius: 18, padding: '15px 17px',
              fontSize: 13, color: '#1F2A44', lineHeight: 1.65, letterSpacing: '-0.01em',
              boxShadow: '0 4px 14px rgba(31,42,68,0.08)', position: 'relative',
            }}>
              {bubble}
              <div style={{
                position: 'absolute', right: -7, bottom: 18,
                width: 14, height: 14, background: '#FBF7EF',
                borderRight: '1px solid rgba(31,42,68,0.12)',
                borderBottom: '1px solid rgba(31,42,68,0.12)',
                transform: 'rotate(-45deg)',
              }} />
              <div style={{ textAlign: 'right', marginTop: 4, color: '#B89530', opacity: 0.7 }}>
                <IconPaw size={11} />
              </div>
            </div>
          </div>
        )}

        <Mascot variant={mascotVariant} size={220} style={{
          position: 'absolute', right: -10, top: -8, width: 220, pointerEvents: 'none',
          filter: 'drop-shadow(0 8px 24px rgba(31,42,68,0.18))',
        }} />
      </div>
    </section>
  );
}