/* Hero — 3 Varianten
   A: Cinematic Video-Canvas mit Overlay-Stats (default)
   B: Giant Split-Word Type, Asymmetrisches Layout
   C: Manifest / Editorial
*/

function Hero() {
  const { tweaks } = React.useContext(TweakCtx);
  const variant = tweaks.heroVariant || 'A';
  if (variant === 'B') return <HeroB />;
  if (variant === 'C') return <HeroC />;
  return <HeroA />;
}

// ---------- Variant A: Cinematic ----------
function HeroA() {
  const mouseRef = useRef(null);
  const spotRef = useRef(null);

  useEffect(() => {
    const onMove = (e) => {
      if (!mouseRef.current || !spotRef.current) return;
      const r = mouseRef.current.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width * 100;
      const y = (e.clientY - r.top) / r.height * 100;
      spotRef.current.style.background = `radial-gradient(600px circle at ${x}% ${y}%, var(--cool-soft), transparent 40%)`;
    };
    const el = mouseRef.current;
    el?.addEventListener('mousemove', onMove);
    return () => el?.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <section ref={mouseRef} style={{
      position: 'relative', paddingTop: 140, paddingBottom: 32,
      overflow: 'hidden'
    }}>
      <div ref={spotRef} style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 0, transition: 'background .4s' }} />
      <div className="orb" style={{ width: 520, height: 520, background: 'var(--cool)', top: -180, right: -120 }} />
      <div className="orb" style={{ width: 440, height: 440, background: 'var(--cool-dim)', bottom: -160, left: -120, opacity: 0.35 }} />
      <div className="grid-lines" />

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 60, alignItems: 'center', paddingTop: 40 }} className="hero-grid">
          <div>
            <h1 className="display display-hero reveal" style={{ marginBottom: 32 }}>
              <span className="sheen">KI für Immobilien.</span><br />
              <span style={{ color: 'var(--text-3)' }}>Nicht als Buzzword.</span><br />
              Als System.
            </h1>
            <p className="body-lg reveal" style={{ maxWidth: 520, marginBottom: 40 }}>Workflowanalyse und KI-Audit. Wir bauen das System für Ihr Büro — oder liefern Exposés, Visuals und Marktanalysen direkt portal-ready. Beratung und Agentur, aus einer Hand.
            </p>
            <div className="reveal" style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary btn-lg" onClick={() => scrollTo('contact')}>
                Termin buchen <Icon name="arrow" size={16} />
              </button>
              <button className="btn btn-secondary btn-lg" onClick={() => scrollTo('services')}>
                <Icon name="play" size={14} /> Consulting oder Agentur?
              </button>
            </div>
          </div>

          {/* Right: giant A logomark */}
          <div className="reveal hero-logomark" style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            position: 'relative', minHeight: 420
          }}>
            <img
              src="assets/logo.png"
              alt=""
              aria-hidden="true"
              draggable={false}
              style={{
                height: 'auto', objectFit: 'contain',
                filter: 'grayscale(1) brightness(1.6) contrast(1.15) drop-shadow(0 0 60px rgba(255,255,255,0.08))',
                opacity: 0.92, position: 'relative', zIndex: 2, margin: "0px", borderWidth: "0px", borderStyle: "solid", borderRadius: "0px", padding: "36.2852px", width: "457px",
                userSelect: 'none',
                WebkitUserDrag: 'none',
                pointerEvents: 'none',
              }} />
            
          </div>
        </div>

        {/* Bottom stats rail */}
        <div className="reveal" style={{
          marginTop: 40, paddingTop: 24, borderTop: '1px solid var(--border)',
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32
        }} id="hero-stats">
          <Stat k="KI-Audit" v="Prozessanalyse" />
          <Stat k="Build" v="Implementierung" />
          <Stat k="Enable" v="Corporate-Training" />
          <Stat k="Scale" v="Nachhaltig Optimieren" />
        </div>
      </div>

      <style>{`
        @media (max-width: 960px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .hero-logomark { display: none !important; }
          #hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </section>);

}

function Stat({ k, v }) {
  return (
    <div>
      <div className="display display-md" style={{ fontWeight: 500 }}>{k}</div>
      <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 8, letterSpacing: '0.15em', textTransform: 'uppercase' }}>{v}</div>
    </div>);

}

function HeroVideoCard() {
  const [loaded, setLoaded] = useState(false);
  return (
    <div className="edge-gradient" style={{
      position: 'relative', aspectRatio: '4/5', borderRadius: 'var(--radius-lg)',
      overflow: 'hidden', border: '1px solid var(--border)',
      background: '#000'
    }}>
      <video
        src="assets/hero.mp4"
        autoPlay muted loop playsInline
        onLoadedData={() => setLoaded(true)}
        style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(1.05) contrast(1.05) brightness(0.9)' }} />
      
      {!loaded &&
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'linear-gradient(135deg, #1a1a1f, #0e0e10)' }}>
          <div className="mono" style={{ color: 'var(--text-3)', fontSize: 11, letterSpacing: '0.2em' }}>LOADING RENDER…</div>
        </div>
      }
      {/* top overlay */}
      <div style={{
        position: 'absolute', top: 16, left: 16, right: 16, display: 'flex', justifyContent: 'space-between',
        alignItems: 'flex-start'
      }}>
        <div className="chip" style={{ background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(10px)' }}>
          <span className="chip-dot pulse" />
          <span>LIVE RENDER</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4 }}>
          <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)' }}>VILLA_K.MUC</div>
          <div className="mono" style={{ fontSize: 10, color: '#fff' }}>+48.1342°N · +11.5820°E</div>
        </div>
      </div>
      {/* bottom readout */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        background: 'linear-gradient(180deg, transparent, rgba(0,0,0,0.8))',
        padding: '80px 20px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end'
      }}>
        <div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)', letterSpacing: '0.2em' }}>RENDER_ID</div>
          <div className="mono" style={{ fontSize: 13, color: '#fff' }}>0x8F3A · ITERATION 247</div>
        </div>
        <div style={{ display: 'flex', gap: 14 }}>
          <Gauge label="GPU" v={74} />
          <Gauge label="IO" v={92} />
        </div>
      </div>
    </div>);

}

function Gauge({ label, v }) {
  return (
    <div style={{ textAlign: 'right' }}>
      <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)', letterSpacing: '0.2em' }}>{label}</div>
      <div className="mono" style={{ fontSize: 13, color: '#fff' }}>{v}%</div>
    </div>);

}

// ---------- Variant B: Giant Split Type ----------
function HeroB() {
  return (
    <section style={{ position: 'relative', minHeight: '100vh', paddingTop: 140, paddingBottom: 80, overflow: 'hidden' }}>
      <div className="orb" style={{ width: 600, height: 600, background: 'var(--cool)', top: '30%', left: '50%', transform: 'translate(-50%, -50%)', opacity: 0.25 }} />
      <div className="grid-lines" />
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="chip reveal" style={{ marginBottom: 40 }}>
          <span className="chip-dot pulse" /> ARCHAITECHS · BERLIN / MÜNCHEN
        </div>
        <h1 className="display reveal" style={{
          fontSize: 'clamp(72px, 14vw, 240px)', lineHeight: 0.88, letterSpacing: '-0.05em', fontWeight: 500,
          marginBottom: 40
        }}>
          SEE<br />
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: '0.2em' }}>
            <span style={{ color: 'var(--text-3)' }}>WHAT'S</span>
            <span className="heroB-video" aria-hidden>
              <video src="assets/hero.mp4" autoPlay muted loop playsInline
              style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </span>
          </span><br />
          <span className="sheen">POSSIBLE.</span>
        </h1>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'end', marginTop: 60 }} className="hero-grid">
          <p className="body-lg reveal" style={{ maxWidth: 460 }}>
            KI-Beratung für Immobilienmakler. Wir finden die Prozesse mit dem größten Hebel, bauen die Systeme und zeigen Ihrem Team, wie man sie bedient.
          </p>
          <div className="reveal" style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
            <button className="btn btn-primary btn-lg" onClick={() => scrollTo('contact')}>
              Termin buchen <Icon name="arrow" size={16} />
            </button>
            <button className="btn btn-secondary btn-lg" onClick={() => scrollTo('services')}>
              Leistungen <Icon name="arrow" size={14} />
            </button>
          </div>
        </div>
      </div>
      <style>{`
        .heroB-video {
          display: inline-block;
          width: clamp(180px, 24vw, 380px);
          height: 0.72em;
          border-radius: 999px;
          overflow: hidden;
          vertical-align: -0.08em;
          background: #111;
          border: 1px solid var(--border);
        }
        @media (max-width: 960px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
        }
      `}</style>
    </section>);

}

// ---------- Variant C: Editorial Manifest ----------
function HeroC() {
  return (
    <section style={{ position: 'relative', minHeight: '100vh', paddingTop: 160, paddingBottom: 80, overflow: 'hidden' }}>
      <div className="grid-lines" />
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 60 }} className="heroC-grid">
          <div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)', letterSpacing: '0.2em', marginBottom: 20 }}>№ 01 — MANIFEST</div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--text-4)', lineHeight: 2, borderLeft: '1px solid var(--border)', paddingLeft: 14 }}>
              FÜR MAKLER<br />
              DIE WISSEN<br />
              DASS KI MEHR<br />
              KANN ALS CHATGPT.
            </div>
          </div>
          <div>
            <h1 className="display reveal" style={{ fontSize: 'clamp(46px, 7vw, 104px)', marginBottom: 40, lineHeight: 0.95 }}>
              Ihre Konkurrenz<br />
              <span style={{ color: 'var(--text-3)' }}>nutzt schon KI.</span><br />
              <span className="sheen">Nur noch nicht richtig.</span>
            </h1>
            <hr className="hr" style={{ margin: '40px 0' }} />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }} className="heroC-cols">
              <p className="body reveal">
                Archaitechs ist ein KI-Beratungsstudio für Immobilienmakler. Wir finden die Prozesse mit dem größten Hebel in Ihrem Büro — von der Exposé-Visualisierung über Marktanalyse bis zu automatisierten Workflows — und bauen sie gemeinsam mit Ihnen.
              </p>
              <div className="reveal">
                <button className="btn btn-primary" onClick={() => scrollTo('contact')}>
                  Termin buchen <Icon name="arrow" size={14} />
                </button>
                <div className="mono" style={{ fontSize: 11, color: 'var(--text-4)', marginTop: 18, lineHeight: 1.8 }}>
                  INFO@ARCHAITECHS.DE<br />
                  +49 30 123 456 78
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 960px) {
          .heroC-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
          .heroC-cols { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>);

}

Object.assign(window, { Hero });