// scenes-philosophy.jsx — Philosophy + Heritage

/* ============================================================
   2. PHILOSOPHY — navy, big serif statement, word-by-word
   ============================================================ */
function PhilosophyScene() {
  const wrapRef = useRef(null);
  const p = useElementProgress(wrapRef);

  // Word-by-word reveal driven by scroll progress
  const sentence = "Built on trust. Grounded in integrity. Practiced with care.";
  const words = sentence.split(' ');
  // Reveal between p=0.1 and p=0.65
  const reveal = clamp((p - 0.10) / 0.55, 0, 1);
  const visibleCount = reveal * words.length;

  // Tagline fades in at the end
  const tailOpacity = clamp((p - 0.6) / 0.3, 0, 1);

  return (
    <div ref={wrapRef} className="scene" style={{ height: '260vh' }}>
      <div className="scene-pin" style={{
        background: `radial-gradient(ellipse at 50% 30%, var(--navy-soft), var(--navy) 55%, var(--navy-deep) 100%)`,
        color: 'var(--cream)'
      }}>
        {/* Faint tooth watermark */}
        <div style={{
          position: 'absolute',
          left: '50%', top: '50%',
          transform: `translate(-50%,-50%) scale(${1 + p * 0.18})`,
          opacity: 0.05 + p * 0.05,
          pointerEvents: 'none'
        }}>
          <ToothMonogram size={620} color="var(--gold)" accent="var(--gold-light)" sheen={false} stroke={1.6} />
        </div>

        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          padding: '0 32px', textAlign: 'center'
        }}>
          <div className="eyebrow" style={{ color: 'var(--gold)', marginBottom: 36 }}>
            ● &nbsp;Our Philosophy
          </div>

          <h2 className="h-serif" style={{
            fontSize: 'clamp(38px, 6.4vw, 96px)',
            margin: 0,
            maxWidth: 1100,
            lineHeight: 1.12,
            fontStyle: 'normal',
            fontWeight: 400,
            letterSpacing: '-0.01em',
            color: 'var(--cream)',
          }}>
            {words.map((w, i) => {
              const wordT = clamp(visibleCount - i, 0, 1);
              return (
                <span key={i} style={{
                  display: 'inline-block',
                  opacity: wordT,
                  transform: `translateY(${(1 - wordT) * 28}px)`,
                  marginRight: '0.28em',
                  color: i === 1 || i === 4 || i === 7 ? 'var(--gold-light)' : 'inherit',
                  fontWeight: i === 1 || i === 4 || i === 7 ? 500 : 400,
                  transition: 'opacity .25s, transform .25s'
                }}>
                  {w}
                </span>);

            })}
          </h2>

          <div style={{ height: 48 }} />

          <div className="divider-leaf" style={{ opacity: tailOpacity, transition: 'opacity .6s', color: 'var(--gold)' }}>
            <span className="line" style={{ background: 'linear-gradient(90deg, transparent, var(--gold), transparent)' }} />
            <LeafOrnament size={26} color="var(--gold)" />
            <span className="line" style={{ background: 'linear-gradient(90deg, transparent, var(--gold), transparent)' }} />
          </div>

          <p style={{
            maxWidth: 620,
            margin: '36px auto 0',
            fontFamily: 'var(--f-serif)',
            fontSize: 'clamp(17px, 1.55vw, 21px)',
            lineHeight: 1.7,
            color: 'rgba(245,239,228,.78)',
            opacity: tailOpacity,
            transform: `translateY(${(1 - tailOpacity) * 20}px)`,
            transition: 'opacity .6s, transform .6s'
          }}>
            Dental Avenue is a second-generation family practice — modern,
            ethical, and quietly precise. Our patients aren't appointments.
            They are relationships that span careers, kids, and lifetimes.
          </p>
        </div>

        {/* Bottom marquee — quiet, slow */}
        <div className="marquee" style={{
          position: 'absolute',
          bottom: 30, left: 0, right: 0,
          color: 'rgba(201,165,91,.42)',
          fontFamily: 'var(--f-display)',
          fontSize: 13, letterSpacing: '0.6em'
        }}>
          <div className="marquee-track" style={{ animationDuration: '60s' }}>
            {Array(2).fill(0).map((_, k) =>
            <React.Fragment key={k}>
                <span>ETHICAL DENTISTRY</span>
                <span>·</span>
                <span>PRECISION & COMFORT</span>
                <span>·</span>
                <span>FAMILY LEGACY</span>
                <span>·</span>
                <span>HYGIENE FIRST</span>
                <span>·</span>
                <span>MODERN TECHNIQUE</span>
                <span>·</span>
                <span>LONG-TERM CARE</span>
                <span>·</span>
              </React.Fragment>
            )}
          </div>
        </div>
      </div>
    </div>);

}

/* ============================================================
   3. HERITAGE — split layout, two generations, scroll-tied
   ============================================================ */
function HeritageScene() {
  return (
    <section className="full paper" style={{
      background: 'var(--cream)',
      padding: 'clamp(70px, 12vw, 180px) clamp(20px, 6vw, 96px)',
      minHeight: 'auto'
    }}>
      <div style={{
        maxWidth: 1380,
        margin: '0 auto'
      }} className="heritage-grid">
        {/* Left — text */}
        <div className="heritage-text">
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 22 }}>● Heritage</div>
          </Reveal>

          <Reveal delay={0.05}>
            <h2 className="h-serif" style={{
              fontSize: 'clamp(38px, 4.6vw, 68px)',
              margin: '0 0 28px',
              color: 'var(--navy)',
              fontWeight: 400
            }}>
              Two generations.<br />
              <span className="accent">One promise of care.</span>
            </h2>
          </Reveal>

          <Reveal delay={0.15}>
            <p style={{
              fontFamily: 'var(--f-serif)',
              fontSize: 'clamp(17px, 1.4vw, 20px)',
              lineHeight: 1.75,
              color: 'var(--ink)',
              maxWidth: 540,
              margin: '0 0 24px',
              opacity: 0.82
            }}>
              The Dental Avenue chair has been a place of quiet trust for
              more than two decades — a legacy now carried forward by a new
              generation of careful, modern hands.
            </p>
          </Reveal>

          <Reveal delay={0.22}>
            <p style={{
              fontFamily: 'var(--f-serif)',
              fontSize: 'clamp(17px, 1.4vw, 20px)',
              lineHeight: 1.75,
              color: 'var(--ink)',
              maxWidth: 540,
              margin: 0,
              opacity: 0.82
            }}>
              We don't believe in overselling. We believe in conservative,
              honest treatment — the kind you'd want for your own family.
            </p>
          </Reveal>

          <Reveal delay={0.32}>
            <div className="hairline" style={{ margin: '40px 0 28px', maxWidth: 480 }} />
          </Reveal>

          <Reveal delay={0.38}>
            <div style={{ display: 'flex', gap: 60, flexWrap: 'wrap' }}>
              <div>
                <div className="h-display" style={{ fontSize: 56, color: 'var(--navy)', lineHeight: 1 }}>
                  <Counter to={20} suffix="+" />
                </div>
                <div className="eyebrow" style={{ marginTop: 8 }}>Years of practice</div>
              </div>
              <div>
                <div className="h-display" style={{ fontSize: 56, color: 'var(--navy)', lineHeight: 1 }}>
                  <Counter to={2} />
                </div>
                <div className="eyebrow" style={{ marginTop: 8 }}>Generations</div>
              </div>
            </div>
          </Reveal>
        </div>

        {/* Right — video tile with parallax (instruments b-roll) */}
        <Reveal delay={0.2} y={40} scale={0.96}>
          <div style={{ position: 'relative', aspectRatio: '4/5' }}>
            <Parallax speed={0.14}>
              <div style={{
                position: 'relative',
                aspectRatio: '4/5',
                overflow: 'hidden',
                background: 'var(--navy)',
                border: '1px solid rgba(11,30,63,.14)',
              }}>
                <video
                  src="https://videos.pexels.com/video-files/6630293/6630293-uhd_1440_2732_25fps.mp4"
                  autoPlay muted loop playsInline preload="auto"
                  style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(.94) contrast(1.02)' }}
                />
                <div style={{
                  position: 'absolute', inset: 0,
                  background: 'linear-gradient(180deg, transparent 60%, rgba(11,30,63,.45))',
                }} />
              </div>
            </Parallax>

            {/* Gold frame accent */}
            <div style={{
              position: 'absolute',
              inset: '24px -24px -24px 24px',
              border: '1px solid var(--gold)',
              zIndex: -1,
              pointerEvents: 'none'
            }} />

            {/* Floating sticker */}
            <div style={{
              position: 'absolute',
              right: -20, bottom: -28,
              background: 'var(--navy)',
              color: 'var(--cream)',
              padding: '20px 26px',
              border: '1px solid var(--gold)',
              boxShadow: '0 18px 40px rgba(11,30,63,.22)',
              display: 'flex', alignItems: 'center', gap: 14
            }}>
              <LeafOrnament size={20} />
              <div>
                <div className="eyebrow" style={{ color: 'var(--gold)' }}>Since 1998</div>
                <div className="h-display" style={{ fontSize: 14, letterSpacing: '0.22em', marginTop: 4 }}>FAMILY LEGACY</div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

Object.assign(window, { PhilosophyScene, HeritageScene });