// Terra Group — Hero Component
// Exports: Hero

const Hero = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [isWide, setIsWide] = React.useState(window.innerWidth >= 900);

  React.useEffect(() => {
    const onResize = () => setIsWide(window.innerWidth >= 900);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  const s = {
    section: {
      minHeight: '100vh', background: '#154270',
      display: 'flex', alignItems: 'center',
      position: 'relative', overflow: 'hidden',
      paddingTop: 68,
    },
    bg: {
      position: 'absolute', inset: 0,
      background: 'linear-gradient(135deg, #0a2540 0%, #154270 50%, #1a5490 100%)',
      opacity: 0.98,
    },
    dots: {
      position: 'absolute', inset: 0,
      backgroundImage: 'radial-gradient(circle, rgba(135,200,232,0.08) 1px, transparent 1px)',
      backgroundSize: '40px 40px',
    },
    inner: {
      maxWidth: 1200, margin: '0 auto', padding: '80px 32px',
      position: 'relative', zIndex: 1,
      display: 'flex', alignItems: 'center', gap: 60,
      flexWrap: isWide ? 'nowrap' : 'wrap',
    },
    content: { flex: isWide ? '1 1 0' : '1 1 100%', minWidth: 0 },
    eyebrow: {
      fontFamily: "'Inter', sans-serif", fontSize: 12, fontWeight: 700,
      letterSpacing: '0.2em', textTransform: 'uppercase',
      color: '#87C8E8', marginBottom: 20,
      display: 'flex', alignItems: 'center', gap: 8,
    },
    eyebrowLine: { width: 32, height: 1, background: '#87C8E8', display: 'inline-block' },
    h1: {
      fontFamily: "'Playfair Display', serif", fontSize: 'clamp(40px, 5vw, 68px)',
      fontWeight: 700, lineHeight: 1.08, letterSpacing: '-0.02em',
      color: 'white', marginBottom: 12,
    },
    tagline: {
      fontFamily: "'Playfair Display', serif", fontStyle: 'italic',
      fontSize: 'clamp(18px, 2.5vw, 26px)', fontWeight: 400,
      color: '#87C8E8', marginBottom: 24,
    },
    desc: {
      fontFamily: "'Inter', sans-serif", fontSize: 17, lineHeight: 1.65,
      color: 'rgba(255,255,255,0.72)', marginBottom: 40, maxWidth: 480,
    },
    btns: { display: 'flex', gap: 14, flexWrap: 'wrap' },
    btnPrimary: {
      fontFamily: "'Inter', sans-serif", fontSize: 15, fontWeight: 600,
      background: '#87C8E8', color: '#0a2540',
      border: 'none', borderRadius: 4, padding: '13px 28px',
      cursor: 'pointer', transition: 'all 0.2s', textDecoration: 'none',
    },
    btnSecondary: {
      fontFamily: "'Inter', sans-serif", fontSize: 15, fontWeight: 500,
      background: 'transparent', color: 'white',
      border: '1.5px solid rgba(255,255,255,0.4)',
      borderRadius: 4, padding: '13px 28px',
      cursor: 'pointer', transition: 'all 0.2s', textDecoration: 'none',
    },
    visual: { flex: isWide ? '0 0 320px' : '1 1 100%', display: 'flex', justifyContent: 'flex-start', width: '100%' },
    card: {
      background: 'rgba(255,255,255,0.07)', backdropFilter: 'blur(12px)',
      border: '1px solid rgba(255,255,255,0.14)',
      borderRadius: 12, padding: 28, width: '100%', maxWidth: isWide ? 320 : 400,
    },
    stat: { marginBottom: 20 },
    statNum: {
      fontFamily: "'Playfair Display', serif", fontSize: 40,
      fontWeight: 700, color: 'white', lineHeight: 1,
    },
    statLabel: {
      fontFamily: "'Inter', sans-serif", fontSize: 13,
      color: 'rgba(255,255,255,0.55)', marginTop: 2,
    },
    divider: { width: '100%', height: 1, background: 'rgba(255,255,255,0.1)', margin: '4px 0 20px' },
  };

  const scrollTo = (id) => {
    const el = document.querySelector(id);
    if (el) el.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <section style={s.section} id="home">
      <div style={s.bg}></div>
      <div style={s.dots}></div>
      <div style={s.inner}>
        <div style={s.content}>
          <div style={s.eyebrow}>
            <span style={s.eyebrowLine}></span>
            Skorponeria, Evia, Greece
          </div>
          <h1 style={s.h1}>Property<br/>Management</h1>
          <div style={s.tagline}>Your Home – Our Care</div>
          <p style={s.desc}>
            We handle property management, renovation, new construction, and real estate brokerage across Evia with professionalism and care.
          </p>
          <div style={s.btns}>
            <a style={s.btnPrimary} onClick={() => scrollTo('#services')}>Our Services</a>
            <a style={s.btnSecondary} onClick={() => scrollTo('#contact')}>Get in Touch</a>
          </div>
        </div>
        <div style={s.visual}>
          <div style={s.card}>
            <div style={s.stat}>
              <div style={s.statNum}>10+</div>
              <div style={s.statLabel}>Years of Experience</div>
            </div>
            <div style={s.divider}></div>
            <div style={s.stat}>
              <div style={s.statNum}>150+</div>
              <div style={s.statLabel}>Properties Managed</div>
            </div>
            <div style={s.divider}></div>
            <div style={{...s.stat, marginBottom:0}}>
              <div style={s.statNum}>100%</div>
              <div style={s.statLabel}>Client Satisfaction</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Hero });