/* HERO — editorial minimal luxury
   Quiet, immense whitespace, hairline grid, slate type on bone.
   No sun, no palms, no flourishes. Single quiet image, rotating mantra,
   thin scroll meter.
*/

const { useState, useEffect, useRef } = React;

function Hero({ t, motionLevel }) {
  const containerRef = useRef(null);
  const [progress, setProgress] = useState(0);
  const [activeMantra, setActiveMantra] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      if (!containerRef.current) return;
      const rect = containerRef.current.getBoundingClientRect();
      const total = rect.height - window.innerHeight;
      const p = Math.max(0, Math.min(1, -rect.top / Math.max(1, total)));
      setProgress(p);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    const id = setInterval(() => setActiveMantra((m) => (m + 1) % t.heroMantras.length), 3600);
    return () => clearInterval(id);
  }, [t.heroMantras.length]);

  return (
    <section ref={containerRef} className="hero" data-screen-label="01 Hero">
      <div className="hero-sticky" style={{ padding: "72px 96px 90px" }}>
        {/* Top hairline meta band */}
        <div className="hero-meta-top">
          <span className="mono">{t.heroCornerL2}</span>
          <span className="mono">N 36°43′ · W 04°25′</span>
          <span className="mono">No. 001 — Vol. xxvi</span>
        </div>

        <div className="hero-grid">
          {/* Left column — eyebrow + mantra */}
          <div className="hero-col-l">
            <div className="hero-eyebrow mono">{t.heroEyebrow}</div>
            <div className="mantra-rotator">
              {t.heroMantras.map((m, i) =>
              <span key={i} className={`mantra-line italic-serif ${i === activeMantra ? "active" : ""}`}>
                  — {m}
                </span>
              )}
            </div>
          </div>

          {/* Center column — title */}
          <div className="hero-col-c">
            <h1 className="hero-title display">
              <span className="title-line">{t.heroTitle1}</span>
              <span className="title-line italic-serif">{t.heroTitle2}</span>
              <span className="title-line">{t.heroTitle3}</span>
            </h1>
          </div>

          {/* Right column — quiet rectangle */}
          <div className="hero-col-r">
            <div className="hero-frame">
              <video
                src="hero-deck.mp4"
                autoPlay
                muted
                loop
                playsInline
                style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover", display: "block", background: "#0e0e0e" }} />
              
              <div className="hero-frame-cap">
                <span className="mono">Plate 01</span>
                <span className="italic-serif">Mediterranean, summer</span>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom row */}
        <div className="hero-bottom">
          <p className="hero-sub italic-serif">{t.heroSub}</p>

          <div className="hero-actions">
            <a href="#contact" className="btn btn-filled"><span>{t.heroCta1}</span><span className="arrow">→</span></a>
            <a href="#services" className="btn"><span>{t.heroCta2}</span></a>
          </div>

          <div className="hero-scroll">
            <span className="mono">{t.heroScroll}</span>
            <div className="scroll-line"><div className="scroll-fill" style={{ width: `${progress * 100}%` }} /></div>
          </div>
        </div>
      </div>

      <style>{`
        .hero {
          position: relative;
          height: 100vh;
          background: var(--bone);
        }
        .hero-sticky {
          position: relative;
          height: 100vh;
          width: 100%;
          overflow: hidden;
          padding: 72px var(--pad-x) 32px;
          display: flex;
          flex-direction: column;
        }

        .hero-meta-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 18px;
          border-bottom: 1px solid var(--line-soft);
          color: var(--muted);
        }
        .hero-meta-top .mono { font-size: 10px; }
        @media (max-width: 700px) {
          .hero-meta-top .mono:nth-child(2) { display: none; }
        }

        .hero-grid {
          flex: 1;
          display: grid;
          grid-template-columns: 1fr 1.4fr 1fr;
          gap: clamp(24px, 4vw, 64px);
          align-items: center;
          padding: clamp(16px, 3vh, 40px) 0;
          min-height: 0;
        }
        @media (max-width: 1100px) {
          .hero-grid { grid-template-columns: 1fr; gap: 32px; }
          .hero-col-r { display: none; }
        }

        .hero-col-l {
          display: flex;
          flex-direction: column;
          gap: 24px;
          align-self: start;
          padding-top: 12px;
        }
        .hero-eyebrow {
          color: var(--muted);
          max-width: 18ch;
          line-height: 1.6;
        }
        .mantra-rotator {
          position: relative;
          height: 1.5em;
          font-size: 18px;
          color: var(--slate);
        }
        .mantra-line {
          position: absolute;
          left: 0; top: 0;
          opacity: 0;
          transform: translateY(8px);
          transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
          white-space: nowrap;
        }
        .mantra-line.active { opacity: 1; transform: translateY(0); }

        .hero-col-c { text-align: center; }
        .hero-title {
          font-size: clamp(56px, 9.5vw, 168px);
          line-height: 0.95;
          letter-spacing: -0.035em;
          color: var(--slate-ink);
          font-weight: 300;
        }
        .title-line { display: block; }
        .hero-title .italic-serif {
          font-weight: 300;
          font-style: italic;
          color: var(--slate);
        }

        .hero-col-r {
          align-self: end;
          padding-bottom: 12px;
        }
        .hero-frame {
          width: 100%;
          max-width: 240px;
          margin-left: auto;
        }
        .hero-frame .placeholder {
          aspect-ratio: 4 / 5;
        }
        .hero-frame-cap {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          margin-top: 12px;
          font-size: 12px;
          color: var(--muted);
        }
        .hero-frame-cap .mono { font-size: 10px; }

        .hero-bottom {
          display: grid;
          grid-template-columns: 2fr 1.3fr 1fr;
          gap: clamp(20px, 4vw, 64px);
          align-items: end;
          padding-top: 24px;
          border-top: 1px solid var(--line-soft);
          padding-top: 28px;
        }
        @media (max-width: 1100px) {
          .hero-bottom { grid-template-columns: 1fr; gap: 24px; }
        }

        .hero-sub {
          font-size: clamp(15px, 1.2vw, 18px);
          color: var(--slate);
          max-width: 46ch;
          line-height: 1.55;
          font-weight: 300;
        }

        .hero-actions {
          display: inline-flex;
          gap: 10px;
          flex-wrap: wrap;
        }

        .hero-scroll {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 12px;
          color: var(--muted);
        }
        .scroll-line {
          width: 120px;
          height: 1px;
          background: var(--line);
        }
        .scroll-fill {
          height: 100%;
          background: var(--slate-ink);
          width: 0;
          transition: width 0.05s linear;
        }
        @media (max-width: 700px) {
          .hero-scroll { align-items: flex-start; }
        }
      `}</style>
    </section>);

}

window.Hero = Hero;