// Scroll storytelling + Felsefe (philosophy) sections
const { useEffect: useEffectS, useRef: useRefS, useState: useStateS } = React;

function StorytellingSection() {
  const phrases = [
    { t: "Profesyonel Dokunuş", s: "Her detay, on iki yıllık tecrübenin sessiz dilinde." },
    { t: "Doğal Güzelliği Ortaya Çıkar", s: "Maskelemek değil — ışığı geri kazandırmak." },
    { t: "Kendinizin En Işıltılı Hali", s: "Cilt, ifade ve duruşun yeniden kavuştuğu yer." },
    { t: "Zarafetinizi Ön Plana Çıkarın", s: "Modern bir atelye, klasik bir özen." },
  ];
  const stickyRef = useRefS(null);
  const [idx, setIdx] = useStateS(0);
  useEffectS(() => {
    const onScroll = () => {
      if (!stickyRef.current) return;
      const r = stickyRef.current.getBoundingClientRect();
      const total = stickyRef.current.offsetHeight - window.innerHeight;
      const passed = Math.min(Math.max(-r.top, 0), total);
      const p = total > 0 ? passed / total : 0;
      const i = Math.min(phrases.length - 1, Math.floor(p * phrases.length * 0.999));
      setIdx(i);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div className="story-root">
      <style>{`
        .story-root {
          background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 60%, var(--bg) 100%);
          position: relative;
        }
        .story-sticky-wrap { height: 380vh; position: relative; }
        .story-sticky {
          position: sticky; top: 0; height: 100vh;
          display: grid; grid-template-columns: 1fr 1fr; gap: 0;
          align-items: stretch;
        }
        @media (max-width: 880px) {
          .story-sticky { grid-template-columns: 1fr; }
          .story-visual { display: none; }
        }
        .story-text-col {
          display: grid; place-items: center; padding: 0 var(--pad);
          position: relative;
        }
        .story-text-stack { position: relative; width: 100%; max-width: 560px; }
        .story-phrase {
          position: absolute; inset: 0;
          opacity: 0;
          transform: translateY(28px);
          transition: opacity 900ms cubic-bezier(.2,.8,.2,1), transform 900ms cubic-bezier(.2,.8,.2,1);
          pointer-events: none;
        }
        .story-phrase.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
        .story-phrase h3 {
          font-family: var(--serif);
          font-weight: 300;
          font-size: clamp(40px, 6vw, 88px);
          line-height: 0.98;
          letter-spacing: -0.02em;
          margin: 0 0 24px;
          text-wrap: balance;
        }
        .story-phrase p {
          font-family: var(--serif); font-style: italic; font-weight: 300;
          color: var(--ink-soft);
          font-size: clamp(16px, 1.5vw, 20px);
          max-width: 38ch;
          margin: 0;
        }
        .story-counter {
          position: absolute; left: var(--pad); top: 60px;
          font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em;
          text-transform: uppercase; color: var(--muted);
        }

        .story-visual {
          position: relative; overflow: hidden;
          border-left: 1px solid var(--line-soft);
        }
        .story-img {
          position: absolute; inset: 0;
          opacity: 0; transform: scale(1.04);
          transition: opacity 1100ms cubic-bezier(.2,.8,.2,1), transform 1800ms cubic-bezier(.2,.8,.2,1);
        }
        .story-img.active { opacity: 1; transform: scale(1); }

        .story-progress {
          position: absolute; right: 24px; top: 50%;
          transform: translateY(-50%);
          display: flex; flex-direction: column; gap: 14px;
          z-index: 5;
        }
        .story-progress .dot {
          width: 6px; height: 6px; border-radius: 50%;
          background: rgba(255,255,255,0.4);
          transition: background 500ms ease, transform 500ms ease;
        }
        .story-progress .dot.active { background: var(--gold); transform: scale(1.6); }
      `}</style>

      <div className="story-sticky-wrap" ref={stickyRef}>
        <div className="story-sticky">
          <div className="story-text-col">
            <div className="story-counter">Bölüm 0{idx+1} / 04</div>
            <div className="story-text-stack" style={{height: '40vh'}}>
              {phrases.map((p, i) => (
                <div key={i} className={`story-phrase ${i === idx ? 'active' : ''}`}>
                  <h3>{p.t}</h3>
                  <p>{p.s}</p>
                </div>
              ))}
            </div>
          </div>
          <div className="story-visual">
            <div className={`story-img ${idx === 0 ? 'active' : ''}`}><Visual.Portrait tone="champ"  label="STUDIO · 02"/></div>
            <div className={`story-img ${idx === 1 ? 'active' : ''}`}><Visual.Portrait tone="ivory"  label="STUDIO · 03"/></div>
            <div className={`story-img ${idx === 2 ? 'active' : ''}`}><Visual.Stilllife /></div>
            <div className={`story-img ${idx === 3 ? 'active' : ''}`}><Visual.Portrait tone="ink"   label="STUDIO · 04"/></div>
            <div className="story-progress">
              {phrases.map((_, i) => <span key={i} className={`dot ${i === idx ? 'active' : ''}`} />)}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function FelsefeSection() {
  return (
    <div className="felsefe section-pad">
      <style>{`
        .felsefe { background: var(--paper); position: relative; }
        .felsefe::before {
          content: ""; position: absolute; inset: 0; pointer-events: none;
          background:
            radial-gradient(60% 40% at 50% 0%, rgba(201,169,97,0.06), transparent 70%);
        }
        .felsefe-grid {
          display: grid; grid-template-columns: 1.1fr 1fr;
          gap: 80px; align-items: center;
        }
        @media (max-width: 880px) { .felsefe-grid { grid-template-columns: 1fr; gap: 40px; } }

        .felsefe-img-stack {
          position: relative;
          aspect-ratio: 4/5;
          width: 100%;
        }
        .felsefe-img-stack > div {
          position: absolute;
          border-radius: 2px;
          overflow: hidden;
          box-shadow: 0 30px 80px -40px rgba(26,20,16,0.35);
        }
        .felsefe-img-stack > .a { left: 0; top: 0; width: 65%; aspect-ratio: 3/4; }
        .felsefe-img-stack > .b { right: 0; bottom: 0; width: 55%; aspect-ratio: 4/5; }
        .felsefe-img-stack > .c {
          right: 8%; top: 6%; width: 28%; aspect-ratio: 1/1;
          background: var(--paper);
          padding: 16px;
          font-family: var(--serif); font-style: italic; font-size: 14px;
          color: var(--ink-soft);
          display: flex; align-items: center; justify-content: center;
          text-align: center; line-height: 1.4;
        }

        .felsefe-h {
          font-family: var(--serif); font-weight: 300;
          font-size: clamp(40px, 5vw, 72px);
          line-height: 1; letter-spacing: -0.02em;
          margin: 16px 0 24px;
        }
        .felsefe-h em { font-style: italic; color: #5a4530; }
        .felsefe-p {
          font-size: 16px; line-height: 1.7; color: var(--ink-soft);
          max-width: 52ch;
        }

        .felsefe-pillars {
          margin-top: 48px;
          display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
          padding-top: 28px;
          border-top: 1px solid var(--line);
        }
        .felsefe-pillar h4 {
          font-family: var(--serif); font-weight: 400; font-size: 18px;
          margin: 0 0 6px;
        }
        .felsefe-pillar p {
          font-size: 13px; color: var(--muted); margin: 0; line-height: 1.6;
        }
      `}</style>
      <div className="container felsefe-grid">
        <div className="felsefe-img-stack reveal">
          <div className="a"><Visual.Portrait tone="champ" label="FOUNDER" /></div>
          <div className="c">"Sakin bir özen, en güçlü estetiktir."</div>
          <div className="b"><Visual.Stilllife /></div>
        </div>
        <div className="reveal">
          <div className="eyebrow">— Felsefemiz</div>
          <h2 className="felsefe-h">
            Hızlı değil, <em>doğru.</em><br/>
            Çok değil, <em>incelikle.</em>
          </h2>
          <p className="felsefe-p">
            Sevgi Taşan Beauty Studio, 2014'te Yıldırım'da bir kişisel atelye olarak doğdu.
            Bugün hâlâ aynı düşüncede: cildi yormayan, ifadeyi bozmayan,
            kişiye özel bir bakım — uzman elinde, sessiz bir mekânda.
          </p>
          <div className="felsefe-pillars">
            <div className="felsefe-pillar">
              <h4>Hijyen Standartları</h4>
              <p>Tek kullanımlık ekipman, klinik düzeyde sterilizasyon, şeffaf süreç.</p>
            </div>
            <div className="felsefe-pillar">
              <h4>Sertifikalı Uzmanlar</h4>
              <p>Uluslararası eğitim almış, sürekli güncellenen kadro.</p>
            </div>
            <div className="felsefe-pillar">
              <h4>Kişiye Özel Yaklaşım</h4>
              <p>Her cilt farklıdır — protokol değil, kişisel bir okuma yaparız.</p>
            </div>
            <div className="felsefe-pillar">
              <h4>Premium Ürünler</h4>
              <p>Yalnızca dermatolojik onaylı, klinik testli profesyonel markalar.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.StorytellingSection = StorytellingSection;
window.FelsefeSection = FelsefeSection;