// ============================================
// Hero — cinematic architectural opening
// ============================================

function Hero() {
  const PC = window.PC;
  return (
    <section className="hero" id="top">
      <div className="hero__bg" aria-hidden="true">
        <div className="backdrop-grid"></div>
        <div className="backdrop-glow" style={{top: '-10%', left: '-15%'}}></div>
        <div className="backdrop-glow" style={{bottom: '-20%', right: '-10%', width: '600px', height: '600px'}}></div>
      </div>

      <div className="wrap hero__inner">
        <div className="hero__left">
          <div className="reveal" data-d="1">
            <span className="eyebrow">Cinematic Archviz Studio · est. 2025</span>
          </div>

          <h1 className="h-display hero__title">
            <span className="reveal" data-d="2">Where homes</span>
            <span className="reveal hero__title-row" data-d="3">become <span className="serif it gold-text">cinematic</span></span>
            <span className="reveal" data-d="4">visions.</span>
          </h1>

          <p className="lead reveal" data-d="5">
            AI-powered renders, immersive walkthroughs, and interactive 3D experiences that sell homes before a single brick is laid.
          </p>

          <div className="hero__cta reveal" data-d="6">
            <a href="#contact" className="btn btn--gold">
              <span>Start a Project</span>
              <span className="btn__arrow"></span>
            </a>
            <a href="#work" className="btn btn--ghost">
              <span>View the Work</span>
              <span className="btn__arrow"></span>
            </a>
          </div>

          <div className="hero__stats reveal" data-d="6">
            {PC.stats.map((s, i) => (
              <div key={i} className="hero__stat">
                <span className="serif hero__stat-v">{s.value}</span>
                <span className="label hero__stat-l">{s.label}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="hero__right reveal reveal--right" data-d="3">
          <HeroVisual/>
        </div>
      </div>

      <a href="#services" className="hero__scroll" aria-label="Scroll to services">
        <span className="label">Scroll</span>
        <span className="hero__scroll-line"></span>
      </a>
    </section>
  );
}

function HeroVisual() {
  return (
    <div className="herovis">
      <div className="herovis__frame">
        <span className="herovis__corner herovis__corner--tl"></span>
        <span className="herovis__corner herovis__corner--tr"></span>
        <span className="herovis__corner herovis__corner--bl"></span>
        <span className="herovis__corner herovis__corner--br"></span>

        <div className="herovis__scanline"></div>

        <svg viewBox="0 0 600 700" className="herovis__svg" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
          <defs>
            <linearGradient id="herosky" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#060A12"/>
              <stop offset="0.6" stopColor="#0F1822"/>
              <stop offset="1" stopColor="#142030"/>
            </linearGradient>
            <linearGradient id="herohouse" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#00A0E0" stopOpacity="0.4"/>
              <stop offset="1" stopColor="#00A0E0" stopOpacity="0.05"/>
            </linearGradient>
          </defs>
          <rect width="600" height="700" fill="url(#herosky)"/>

          {/* moon / sun */}
          <circle cx="480" cy="120" r="32" fill="none" stroke="#00A0E0" strokeWidth="0.4" opacity="0.5"/>
          <circle cx="480" cy="120" r="20" fill="none" stroke="#00A0E0" strokeWidth="0.4" opacity="0.4"/>
          <circle cx="480" cy="120" r="3" fill="#29B6F0"/>

          {/* faint horizontal lines (technical drawing) */}
          <g stroke="#00A0E0" strokeWidth="0.3" opacity="0.2">
            <line x1="40" y1="200" x2="560" y2="200"/>
            <line x1="40" y1="350" x2="560" y2="350"/>
            <line x1="40" y1="500" x2="560" y2="500"/>
            <line x1="100" y1="40" x2="100" y2="660"/>
            <line x1="500" y1="40" x2="500" y2="660"/>
          </g>

          {/* House silhouette — modern luxury */}
          <g stroke="#00A0E0" strokeWidth="1" fill="none">
            {/* main mass */}
            <path d="M120 540 L120 340 L300 220 L480 340 L480 540 Z"/>
            <path d="M120 540 L480 540"/>
            <path d="M120 540 L120 600 L480 600 L480 540"/>
            {/* roofline detail */}
            <line x1="100" y1="340" x2="500" y2="340"/>
            <line x1="120" y1="360" x2="480" y2="360"/>
            {/* center entry */}
            <rect x="270" y="440" width="60" height="100"/>
            <line x1="300" y1="440" x2="300" y2="540"/>
            {/* ground floor windows */}
            <rect x="160" y="390" width="60" height="80"/>
            <rect x="380" y="390" width="60" height="80"/>
            <line x1="160" y1="430" x2="220" y2="430"/>
            <line x1="190" y1="390" x2="190" y2="470"/>
            <line x1="380" y1="430" x2="440" y2="430"/>
            <line x1="410" y1="390" x2="410" y2="470"/>
            {/* upper floor windows */}
            <rect x="170" y="270" width="40" height="50"/>
            <rect x="280" y="260" width="40" height="50"/>
            <rect x="390" y="270" width="40" height="50"/>
            <line x1="170" y1="295" x2="210" y2="295"/>
            <line x1="280" y1="285" x2="320" y2="285"/>
            <line x1="390" y1="295" x2="430" y2="295"/>
            {/* chimney */}
            <path d="M380 280 L380 200 L410 200 L410 290"/>
            {/* path */}
            <path d="M300 540 L260 660 L340 660 Z" fill="url(#herohouse)" fillOpacity="0.4"/>
          </g>

          {/* lit windows — warm */}
          <g fill="#29B6F0" opacity="0.85">
            <rect x="162" y="392" width="56" height="76"/>
            <rect x="382" y="392" width="56" height="76"/>
            <rect x="282" y="262" width="36" height="46"/>
          </g>
          <g fill="#0F1822" opacity="0.7">
            <rect x="172" y="272" width="36" height="46"/>
            <rect x="392" y="272" width="36" height="46"/>
          </g>

          {/* atmospheric trees */}
          <g stroke="#1A2638" strokeWidth="0.6" fill="none">
            <path d="M60 540 L60 460 M50 490 L60 470 L70 490 M48 520 L60 490 L72 520"/>
            <path d="M540 540 L540 470 M528 500 L540 480 L552 500 M525 525 L540 495 L555 525"/>
          </g>

          {/* dimension labels */}
          <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#6b6560" letterSpacing="1">
            <text x="40" y="660" textAnchor="start">N 1:200</text>
            <text x="560" y="660" textAnchor="end">PCV — VISUALIZATION</text>
            <text x="40" y="80">A.01</text>
            <line x1="40" y1="90" x2="80" y2="90" stroke="#6b6560" strokeWidth="0.3"/>
          </g>

          {/* faint floorplan inset */}
          <g transform="translate(40 480)" stroke="#00A0E0" strokeWidth="0.4" fill="none" opacity="0.5">
            <rect width="50" height="40"/>
            <line x1="22" y1="0" x2="22" y2="40"/>
            <line x1="0" y1="22" x2="50" y2="22"/>
            <text x="56" y="10" fontFamily="JetBrains Mono" fontSize="6" fill="#6b6560">PLAN</text>
          </g>
        </svg>

        <div className="herovis__caption">
          <span className="label">Project · Colonial Heights</span>
          <span className="label muted">Render · UE5</span>
        </div>
      </div>
    </div>
  );
}

window.Hero = Hero;