// site-blackhair.jsx — Black-hair feature, light variant
// White-based redesign: soft pink-tinted surface with gold rule accents.
// Photos remain on warm placeholders; the "BLACK HAIR" word becomes the
// dramatic typographic element instead of a dark background.

const BH_TECHNIQUES = [
  { en: 'Cornrows', jp: 'コーンロウ', desc: '頭皮に沿って編み込む、ブラックヘアーの基礎技術。' },
  { en: 'Braids',   jp: 'ブレイズ',   desc: '長さ・太さ・編み方の組み合わせで多彩な表現を実現。' },
  { en: 'Dreads',   jp: 'ドレッド',   desc: '質感づくりとケア技術。素材選びから装着までを学ぶ。' },
  { en: 'Afro',     jp: 'アフロ',     desc: 'テクスチャーを最大限活かす、立体的なシルエット設計。' },
];

function BHCard({ t, idx }) {
  const [hov, setHov] = useState(false);
  const num = String(idx + 1).padStart(2, '0');
  return (
    <div
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        flex: '0 0 360px', scrollSnapAlign: 'start',
        position: 'relative', display: 'flex', flexDirection: 'column',
      }}>
      <div style={{ overflow: 'hidden', position: 'relative', background: BRAND.cream }}>
        <div style={{
          transform: hov ? 'scale(1.05)' : 'scale(1)',
          transition: 'transform .9s cubic-bezier(.2,.7,.2,1)',
        }}>
          <Photo tone="blush" ratio="3 / 4" label={`${t.en} — black hair technique reference.`} />
        </div>
        {/* Pink + gold L-bracket */}
        <span style={{ position: 'absolute', top: 0, left: 0, width: 28, height: 2, background: BRAND.pink }} />
        <span style={{ position: 'absolute', top: 0, left: 0, width: 2, height: 28, background: BRAND.pink }} />
        <span style={{ position: 'absolute', bottom: 0, right: 0, width: 28, height: 2, background: BRAND.gold }} />
        <span style={{ position: 'absolute', bottom: 0, right: 0, width: 2, height: 28, background: BRAND.gold }} />
        <div style={{
          position: 'absolute', top: 14, right: 14,
          padding: '5px 10px', background: BRAND.white,
          fontFamily: 'ui-monospace, monospace', fontSize: 10,
          letterSpacing: '.22em', color: BRAND.ink,
        }}>BH · {num}</div>
      </div>
      <div style={{ padding: '24px 4px 0', color: BRAND.ink }}>
        <div style={{
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12,
        }}>
          <div style={{
            fontFamily: '"Cormorant Garamond", serif',
            fontWeight: 400, fontSize: 38, letterSpacing: '.02em', color: BRAND.ink,
          }}>{t.en}</div>
          <div style={{
            fontFamily: '"Shippori Mincho", serif',
            fontSize: 13, letterSpacing: '.2em', color: BRAND.pink,
          }}>{t.jp}</div>
        </div>
        <p style={{
          margin: '14px 0 0',
          fontFamily: '"Noto Sans JP", sans-serif',
          fontSize: 13, lineHeight: 1.95, letterSpacing: '.04em',
          color: BRAND.mute, textWrap: 'pretty',
        }}>{t.desc}</p>
      </div>
    </div>
  );
}

function BlackHair() {
  return (
    <section id="blackhair" style={{
      // Soft warm-pink gradient surface — keeps the "feature" energy of the
      // original dark band without going to full black. The huge italic
      // wordmark behind the content is the dramatic element now.
      background: `
        radial-gradient(80% 60% at 80% 0%, ${BRAND.pinkSoft} 0%, transparent 60%),
        radial-gradient(70% 50% at 0% 100%, #F8EAD4 0%, transparent 55%),
        ${BRAND.cream}
      `,
      color: BRAND.ink,
      padding: '160px 0 160px', position: 'relative', overflow: 'hidden',
    }}>
      {/* Huge faint italic word — typographic background, not a dark fill */}
      <div aria-hidden="true" style={{
        position: 'absolute', left: '-2vw', top: 100,
        fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
        fontWeight: 300, fontSize: 'clamp(180px, 22vw, 360px)',
        lineHeight: .9, letterSpacing: '-.03em', whiteSpace: 'nowrap',
        color: BRAND.pink, opacity: .14, pointerEvents: 'none', userSelect: 'none',
      }}>Black Hair.</div>

      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '0 80px', position: 'relative' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr auto',
          alignItems: 'flex-end', gap: 40, marginBottom: 80,
        }}>
          <div>
            <Eyebrow color={BRAND.pink}>Specialty — 06</Eyebrow>
            <div style={{ marginTop: 28 }}>
              <SectionTitle en="Black Hair." jp="ブラックヘアー技術 / 専門講習" />
            </div>
            <p style={{
              marginTop: 36, maxWidth: 620,
              fontFamily: '"Shippori Mincho", serif',
              fontSize: 17, lineHeight: 2.1, letterSpacing: '.06em',
              color: BRAND.ink, textWrap: 'pretty',
            }}>
              コーンロウ・ブレイズ・ドレッド・アフロ ——<br />
              日本ではまだ専門領域として扱う場所が限られる技術を、<br />
              YuHouseでは体系的に学べる環境として整えています。
            </p>
          </div>
          <div style={{
            display: 'flex', gap: 12, alignItems: 'center',
            fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
            fontSize: 12, letterSpacing: '.26em', color: BRAND.gold,
          }}>
            <span style={{ width: 36, height: 1, background: BRAND.gold }} />
            04 TECHNIQUES
          </div>
        </div>
      </div>

      {/* Horizontal scroll row */}
      <div style={{
        padding: '0 80px', overflowX: 'auto', scrollSnapType: 'x mandatory',
        WebkitOverflowScrolling: 'touch', scrollbarWidth: 'none',
        position: 'relative',
      }}>
        <div style={{ display: 'flex', gap: 24, paddingBottom: 16 }}>
          {BH_TECHNIQUES.map((t, i) => <BHCard key={t.en} t={t} idx={i} />)}
        </div>
      </div>

      <div style={{
        maxWidth: 1320, margin: '64px auto 0', padding: '36px 80px 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        borderTop: `1px solid ${BRAND.hair}`, gap: 24, flexWrap: 'wrap',
      }}>
        <div style={{
          fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
          fontSize: 13, letterSpacing: '.22em', color: BRAND.gold,
        }}>→ A specialty rarely taught in Japan.</div>
        <Btn variant="secondary" onLight={true} href="#">専門講習を見る</Btn>
      </div>
    </section>
  );
}

window.BlackHair = BlackHair;