// AboutPage.jsx — 關於 Phinn-Phang 獨立頁
// props: { setPage }
const { useState, useRef } = React;

// ── 照片框：暗色加暖色遮罩 + 金邊框，亮色自然顯示 ──────────────────────────
function AboutPhoto({ src, alt, no, caption, aspect = '4 / 5', style }) {
  const isLight = useIsLight();           // components.jsx 已 export
  const [hov, setHov] = useState(false);

  const overlay = isLight
    ? 'none'
    : 'linear-gradient(135deg, rgba(40,24,12,0.28) 0%, rgba(20,14,10,0.42) 100%)';
  const border = isLight
    ? '1px solid rgba(var(--gold-rgb),0.18)'
    : '1px solid var(--gold2)';

  return (
    <div
      onMouseOver={() => setHov(true)}
      onMouseOut={() => setHov(false)}
      style={{
        position: 'relative',
        aspectRatio: aspect,
        overflow: 'hidden',
        border,
        background: 'radial-gradient(ellipse at 35% 40%, #4A2E14 0%, #2C1A08 45%, #1A1210 100%)',
        transition: 'all 0.45s cubic-bezier(0.4,0,0.2,1)',
        boxShadow: hov && !isLight ? '0 14px 50px rgba(0,0,0,0.22), 0 0 40px var(--gold3)' : 'none',
        ...style,
      }}
    >
      <img
        src={src}
        alt={alt || ''}
        onError={(e) => { e.target.style.display = 'none'; }}
        style={{
          position: 'absolute', inset: 0,
          width: '100%', height: '100%', objectFit: 'cover',
          transform: hov ? 'scale(1.03)' : 'scale(1)',
          transition: 'transform 0.8s ease',
          opacity: isLight ? 1 : 0.94,
        }}
      />
      {/* 暖色遮罩（僅暗色） */}
      <div style={{ position: 'absolute', inset: 0, background: overlay, pointerEvents: 'none' }} />
      {/* 缺圖 fallback 標籤 */}
      <div style={{
        position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'monospace', fontSize: 10, letterSpacing: '0.18em',
        color: 'rgba(var(--gold-rgb),0.28)', zIndex: 0,
      }}>
      </div>
      {/* 底部圖說 */}
      {caption && (
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 2,
          padding: '40px 18px 18px',
          background: 'linear-gradient(to top, rgba(20,12,6,0.78) 0%, transparent 100%)',
          fontFamily: "'Noto Serif TC', serif", fontSize: 12, letterSpacing: '0.12em',
          color: 'var(--text-main)',
        }}>
          {caption}
        </div>
      )}
    </div>
  );
}

// ── 品牌故事（左圖右文）+ 第二視覺 ─────────────────────────────────────────
function AboutStory() {
  return (
    <section className="about-section" style={{ padding: 'clamp(72px,10vw,140px) clamp(20px,5vw,80px) clamp(48px,6vw,80px)' }}>
      <div className="about-story" style={{
        maxWidth: 1100, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1fr 1.1fr',
        gap: 'clamp(28px,4vw,64px)', alignItems: 'center',
      }}>
        {/* 左圖 about_01 */}
        <div className="about-story-img">
          <AboutPhoto src="uploads/main.webp" alt="Phinn-Phang" no="01" aspect="4 / 5" />
        </div>

        {/* 右文 */}
        <div className="about-story-text">
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 11, letterSpacing: '0.3em', color: 'var(--gold)', textTransform: 'uppercase', fontStyle: 'italic', opacity: 0.85, marginBottom: 12 }}>
            The Maker
          </div>
          <div style={{ fontFamily: "'Noto Serif TC', serif", fontWeight: 300, fontSize: 'clamp(20px,3vw,28px)', letterSpacing: '0.25em', color: 'var(--text-main)', marginBottom: 16 }}>關於</div>
          <div style={{ width: 32, height: 1, background: 'var(--gold)', opacity: 0.45, margin: '18px 0 28px' }} />

          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic', fontSize: 14, color: 'var(--text-sub)', letterSpacing: '0.2em', marginBottom: 16 }}>
            ㄆㄧˇ ㄆㄤ・來自台語的「聞香」，也有湊熱鬧、一起來玩的意思
          </div>

          <p style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 14, fontWeight: 300, color: 'var(--text-sub)', lineHeight: 2.1, letterSpacing: '0.05em', marginBottom: 22 }}>
            因為喜歡氣味與記憶之間細膩的連結，我開始接觸調香，也持續進修香水與香氛相關課程。
          </p>
          <p style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 14, fontWeight: 300, color: 'var(--text-sub)', lineHeight: 2.1, letterSpacing: '0.05em', marginBottom: 28 }}>
            比起單純「做一瓶香水」，我更希望在這裡提供一段可以慢下來、好好聞香、重新感受自己的時間。Phinn-Phang 以調香體驗、香氛分享與嗅覺探索為主，希望讓氣味成為一種記錄生活、整理情緒，也與他人產生交流的方式。
          </p>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 14, fontStyle: 'italic', color: 'var(--gold)', letterSpacing: '0.08em' }}>
            — Rachel，Phinn-Phang 主理人
          </div>
        </div>
      </div>

    </section>
  );
}

// ── 工作室定位（置中大字 + 金線）──────────────────────────────────────────
function AboutPositioning() {
  return (
    <section style={{ padding: 'clamp(72px,9vw,130px) clamp(20px,5vw,80px)', textAlign: 'center' }}>
      <div style={{ maxWidth: 820, margin: '0 auto' }}>
        <GoldDivider style={{ marginBottom: 'clamp(40px,5vw,64px)' }} />
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 11, letterSpacing: '0.4em', color: 'var(--gold)', textTransform: 'uppercase', fontStyle: 'italic', opacity: 0.85, marginBottom: 28 }}>
          What We Are
        </div>
        <p style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 'clamp(16px,2vw,24px)', fontWeight: 300, color: 'var(--text-main)', letterSpacing: '0.1em', lineHeight: 1.65 }}>
          不是太嚴肅的學習，<br />
          也不是高門檻的體驗，<br />
          而是一個<span style={{ color: 'var(--gold)' }}>一起玩香、交換生活氣味</span>的空間。
        </p>
        <GoldDivider style={{ marginTop: 'clamp(40px,5vw,64px)' }} />
      </div>
    </section>
  );
}

// ── Carousel（左右箭頭桌機 + 手機 swipe + 圓點 indicator）────────────────────
function AboutCarousel({ photos }) {
  const [idx, setIdx] = useState(0);
  const touchStartX = useRef(0);
  const next = () => setIdx(i => (i + 1) % photos.length);
  const prev = () => setIdx(i => (i - 1 + photos.length) % photos.length);
  const onTouchStart = (e) => { touchStartX.current = e.changedTouches[0].clientX; };
  const onTouchEnd = (e) => {
    const dx = e.changedTouches[0].clientX - touchStartX.current;
    if (Math.abs(dx) < 50) return;
    dx > 0 ? prev() : next();
  };
  const arrowStyle = {
    position: 'absolute', top: '50%', transform: 'translateY(-50%)',
    background: 'transparent', border: '1px solid var(--gold2)', color: 'var(--gold)',
    width: 40, height: 40, fontSize: 20, lineHeight: 1, cursor: 'pointer',
    transition: 'all .25s ease', display: 'flex', alignItems: 'center', justifyContent: 'center',
  };
  return (
    <div style={{ position: 'relative', maxWidth: 560, margin: '0 auto' }}>
      <div
        onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}
        style={{
          aspectRatio: '4 / 5', overflow: 'hidden', position: 'relative',
          border: '1px solid var(--gold2)',
          background: 'radial-gradient(ellipse at 35% 40%, #4A2E14 0%, #2C1A08 45%, #1A1210 100%)',
        }}
      >
        <div style={{
          display: 'flex',
          width: `${photos.length * 100}%`,
          height: '100%',
          transform: `translateX(-${idx * (100 / photos.length)}%)`,
          transition: 'transform 0.45s cubic-bezier(0.4,0,0.2,1)',
        }}>
          {photos.map((src, i) => (
            <img
              key={i} src={src} alt="" loading="lazy"
              onError={(e) => { e.target.style.display = 'none'; }}
              style={{
                width: `${100 / photos.length}%`,
                height: '100%', objectFit: 'cover', flexShrink: 0,
              }}
            />
          ))}
        </div>
      </div>

      {/* 左右箭頭（桌機）*/}
      <button
        className="about-carousel-arrow" onClick={prev} aria-label="上一張"
        style={{ ...arrowStyle, left: 'clamp(-56px,-4vw,-44px)' }}
      >‹</button>
      <button
        className="about-carousel-arrow" onClick={next} aria-label="下一張"
        style={{ ...arrowStyle, right: 'clamp(-56px,-4vw,-44px)' }}
      >›</button>

      {/* 圓點 indicator */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: 10, marginTop: 20 }}>
        {photos.map((_, i) => (
          <button
            key={i} onClick={() => setIdx(i)} aria-label={`第 ${i + 1} 張`}
            style={{
              width: 8, height: 8, borderRadius: '50%', padding: 0, border: 'none',
              background: i === idx ? 'var(--gold)' : 'rgba(var(--gold-rgb),0.25)',
              cursor: 'pointer', transition: '.25s',
            }}
          />
        ))}
      </div>
    </div>
  );
}

// ── 空間照片（Carousel）─────────────────────────────────────────────────────
function AboutSpaces() {
  return (
    <section className="about-section" style={{ padding: 'clamp(48px,6vw,80px) clamp(20px,5vw,80px)' }}>
      <div style={{ textAlign: 'center', maxWidth: 620, margin: '0 auto clamp(40px,5vw,64px)' }}>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 11, letterSpacing: '0.4em', color: 'var(--gold)', textTransform: 'uppercase', fontStyle: 'italic', opacity: 0.85, marginBottom: 14 }}>
          The Space
        </div>
        <h2 style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 'clamp(22px,3vw,34px)', fontWeight: 300, color: 'var(--text-main)', letterSpacing: '0.15em', lineHeight: 1.4 }}>
          香氣實驗室
        </h2>
      </div>

      <AboutCarousel photos={['uploads/about_01.webp','uploads/about_02.webp','uploads/about_03.webp', 'uploads/about_04.webp', 'uploads/about_05.webp', 'uploads/about_06.webp', 'uploads/about_07.webp']} />
    </section>
  );
}

// ── Page ───────────────────────────────────────────────────────────────────
function AboutPage({ setPage }) {
  return (
    <div style={{ minHeight: '100vh' }}>
      <style>{`
        @media (max-width: 768px) {
          .about-story { grid-template-columns: 1fr !important; gap: var(--gap-md,28px) !important; }
          .about-story-img { order: 1; }
          .about-story-text { order: 2; }
          .about-story-img > div { aspect-ratio: 4 / 3 !important; }
          .about-carousel-arrow { display: none !important; }
        }
      `}</style>
      <AboutStory />
      <AboutPositioning />
      <AboutSpaces />

      <section style={{
        padding: 'clamp(60px, 8vw, 100px) clamp(20px, 5vw, 80px)',
        textAlign: 'center',
        borderTop: '1px solid rgba(var(--text-rgb),0.06)',
      }}>
        <div style={{
          fontFamily: "'Cormorant Garamond', serif",
          fontSize: 11,
          letterSpacing: '0.35em',
          color: 'var(--gold)',
          opacity: 0.85,
          textTransform: 'uppercase',
          fontStyle: 'italic',
          marginBottom: 20,
        }}>
          Follow the scent
        </div>
        <a
          href="https://www.instagram.com/phinnphang.__"
          target="_blank"
          rel="noopener noreferrer"
          style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontSize: 20,
            color: 'var(--gold)',
            letterSpacing: '0.1em',
            textDecoration: 'none',
            borderBottom: '1px solid transparent',
            transition: 'border-color 0.3s ease',
          }}
          onMouseEnter={e => e.currentTarget.style.borderBottomColor = 'var(--gold)'}
          onMouseLeave={e => e.currentTarget.style.borderBottomColor = 'transparent'}
        >
          @phinnphang.__
        </a>
      </section>

      <SiteFooter />
    </div>
  );
}

window.AboutPage = AboutPage;