// Hero — cinematic fullscreen
const { useEffect, useRef, useState } = React;

function HeroParallax() {
  const ref = useRef(null);
  useEffect(() => {
    const onScroll = () => {
      if (!ref.current) return;
      const y = window.scrollY;
      const layers = ref.current.querySelectorAll('[data-par]');
      layers.forEach(l => {
        const f = parseFloat(l.dataset.par);
        l.style.transform = `translate3d(0, ${y * f}px, 0)`;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return ref;
}

function Hero({ headline }) {
  const ref = HeroParallax();
  const lines = (headline || "Sevgi Taşan Beauty Studio").split(" ");
  return (
    <div className="hero-root" ref={ref}>
      <style>{`
        .hero-root {
          position: relative;
          min-height: 100vh;
          display: grid;
          grid-template-rows: 1fr auto;
          padding-top: 120px;
          overflow: hidden;
        }
        .hero-bg { position: absolute; inset: 0; z-index: 0; }
        .hero-content {
          position: relative; z-index: 2;
          display: grid;
          grid-template-columns: 1.3fr 1fr;
          gap: 40px;
          align-items: end;
          padding-bottom: 60px;
        }
        @media (max-width: 980px) {
          .hero-content { grid-template-columns: 1fr; }
          .hero-side { display: none; }
        }
        .hero-headline {
          font-size: clamp(58px, 11vw, 184px);
          margin: 0;
        }
        .hero-headline .row { display: block; overflow: hidden; }
        .hero-headline .row > i {
          display: inline-block;
          transform: translateY(110%);
          font-style: normal;
          opacity: 0;
          animation: hero-rise 1500ms cubic-bezier(.18,.85,.2,1) forwards;
        }
        .hero-headline .row > i.it { font-style: italic; font-weight: 300; color: #5a4530; }
        @keyframes hero-rise { to { transform: translateY(0); opacity: 1; } }

        .hero-sub {
          margin-top: 26px;
          font-family: var(--serif);
          font-style: italic;
          font-weight: 300;
          font-size: clamp(18px, 1.6vw, 22px);
          color: var(--ink-soft);
          max-width: 30ch;
          opacity: 0;
          animation: hero-fade 900ms ease 1.2s forwards;
        }
        @keyframes hero-fade { to { opacity: 1; } }

        .hero-cta {
          display: flex; gap: 14px; flex-wrap: wrap;
          margin-top: 36px;
          opacity: 0;
          animation: hero-fade 900ms ease 1.6s forwards;
        }

        .hero-side {
          display: flex; flex-direction: column; align-items: stretch; gap: 18px;
          opacity: 0;
          animation: hero-fade 1100ms ease 1.4s forwards;
        }
        .hero-card {
          aspect-ratio: 3/4;
          width: 100%;
          border-radius: 2px;
          overflow: hidden;
          box-shadow: 0 30px 80px -40px rgba(26,20,16,0.4);
          transform: translateY(0);
          transition: transform 700ms cubic-bezier(.2,.8,.2,1);
        }
        .hero-card:hover { transform: translateY(-6px); }
        .hero-meta {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
          padding: 18px 0;
          border-top: 1px solid var(--line);
        }
        .hero-meta .v {
          font-family: var(--serif); font-size: 28px; font-weight: 300; line-height: 1;
        }
        .hero-meta .l {
          font-family: var(--mono); font-size: 9px; letter-spacing: 0.24em;
          text-transform: uppercase; color: var(--muted); margin-top: 8px;
        }

        .hero-marquee {
          position: relative; z-index: 2;
          padding: 22px 0;
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
          overflow: hidden;
          font-family: var(--mono);
          font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
          color: var(--ink-soft);
          background: linear-gradient(180deg, transparent, rgba(247,241,232,0.4));
        }
        .hero-marquee .track {
          display: flex; gap: 64px;
          white-space: nowrap;
          animation: marquee 38s linear infinite;
        }
        .hero-marquee .dot {
          display: inline-block; width: 6px; height: 6px; border-radius: 50%;
          background: var(--gold); margin: 0 12px; vertical-align: middle;
        }
        @keyframes marquee {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }

        .hero-tag {
          position: absolute; right: var(--pad); top: 130px;
          font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em;
          color: var(--muted); text-transform: uppercase;
          z-index: 3;
        }
        .hero-scroll-indicator {
          position: absolute; left: var(--pad); bottom: 20px;
          display: flex; align-items: center; gap: 12px;
          font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em;
          color: var(--muted); text-transform: uppercase;
          z-index: 3;
        }
        .hero-scroll-indicator .line {
          display: inline-block; width: 60px; height: 1px;
          background: var(--ink-soft);
          position: relative; overflow: hidden;
        }
        .hero-scroll-indicator .line::after {
          content: ""; position: absolute; left: -100%; top: 0; bottom: 0; width: 100%;
          background: var(--gold);
          animation: scroll-trail 2.4s ease-in-out infinite;
        }
        @keyframes scroll-trail {
          0% { left: -100%; } 100% { left: 100%; }
        }
      `}</style>

      <div className="hero-bg" data-par="-0.08">
        <Visual.HeroBloom />
      </div>

      <div className="hero-tag">Est. 2014 — Bursa · Yıldırım</div>

      <div className="container hero-content">
        <div>
          <div className="ornate" style={{maxWidth: 320, marginBottom: 28}}>
            <i /><span>Atelier de Beauté</span><i />
          </div>
          <h1 className="display hero-headline">
            {lines.map((w, i) => {
              const it = (i === 1 || /^bir|en|the$/i.test(w));
              return (
                <span className="row" key={i}>
                  <i style={{animationDelay: `${0.2 + i*0.12}s`}} className={it ? 'it' : ''}>{w}{i < lines.length-1 ? '\u00A0' : ''}</i>
                </span>
              );
            })}
          </h1>
          <p className="hero-sub">Güzelliğinize zarif bir dokunuş — uzman elinde, sakin bir atelyede.</p>
          <div className="hero-cta">
            <a href="#randevu" className="btn" data-cursor="hover">
              Randevu Al
              <svg className="arrow" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
            </a>
            <a href="#hizmetler" className="btn btn-ghost" data-cursor="hover">
              Hizmetleri Keşfet
            </a>
          </div>
        </div>

        <div className="hero-side">
          <div className="hero-card">
            <Visual.Portrait tone="champ" label="ATELIER · 01" />
          </div>
          <div className="hero-meta">
            <div style={{gridColumn: '1 / -1'}}>
              <div className="v" style={{display:'flex', alignItems:'baseline', gap:10}}>
                <span>4.97</span>
                <span style={{display:'inline-flex', gap:2, color:'var(--gold)', fontSize:18}} aria-label="4.97 yıldız">
                  <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
                </span>
              </div>
              <div className="l">Misafir Memnuniyeti · Google</div>
            </div>
          </div>
        </div>
      </div>

      <div className="hero-scroll-indicator">
        <span>Aşağı kaydır</span><span className="line" />
      </div>

      <div className="hero-marquee">
        <div className="track">
          {Array.from({length: 2}).map((_, k) => (
            <React.Fragment key={k}>
              <span>Cilt Bakımı</span><span className="dot" />
              <span>Kalıcı Makyaj</span><span className="dot" />
              <span>Kaş & Kirpik</span><span className="dot" />
              <span>Protez Tırnak</span><span className="dot" />
              <span>Medikal Bakım</span><span className="dot" />
              <span>Lazer Epilasyon</span><span className="dot" />
              <span>Makeup Studio</span><span className="dot" />
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
}

window.Hero = Hero;