// site-extensions.jsx — TOP page intro to the two extension detail pages.
// Two large editorial cards linking to feather_extensions.html / seal_extensions.html.
// 羽 = pink-led (premium), シール = gold-led — matching each detail page.

const EXT_CARDS = [
  {
    no: '01',
    en: 'Feather Extension',
    jp: '羽エクステ',
    tag: '次世代の最高級ヘア',
    lead: '羽のように軽く、柔らかい。',
    desc: '韓国発・最高級の人毛エクステ。特殊な紐で地毛と極小の接合面を結ぶ、付けていることを忘れるほど自然な仕上がり。',
    points: ['極小の結び目', '約半年〜1年再利用', '究極にナチュラル'],
    img: 'assets/img/feather_hero.png',
    href: 'feather_extensions.html',
    accentKey: 'pink',
  },
  {
    no: '02',
    en: 'Seal Extension',
    jp: 'シールエクステ',
    tag: 'あっという間にイメージチェンジ',
    lead: '手軽に短時間で、自然な仕上がり。',
    desc: 'ドイツ生まれのテープイン方式。薄いシールで地毛を挟み、短時間で長さもボリュームも自在。コスパに優れた定番メニュー。',
    points: ['スピーディーな施術', '色数・毛質が豊富', '圧倒的にコスパ◎'],
    img: 'assets/img/seal_hero.png',
    href: 'seal_extensions.html',
    accentKey: 'gold',
  },
];

function ExtCard({ c }) {
  const [hov, setHov] = React.useState(false);
  const accent = c.accentKey === 'pink' ? BRAND.pink : BRAND.gold;
  const accentSoft = c.accentKey === 'pink' ? BRAND.pinkSoft : BRAND.goldSoft;

  return (
    <a href={c.href}
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        display: 'flex', flexDirection: 'column',
        background: BRAND.white, border: `1px solid ${BRAND.hair}`,
        textDecoration: 'none', color: BRAND.ink, overflow: 'hidden',
        transition: 'transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease',
        transform: hov ? 'translateY(-6px)' : 'none',
        boxShadow: hov ? '0 28px 60px -30px rgba(26,26,26,.35)' : 'none',
      }}>
      {/* Photo */}
      <div style={{ position: 'relative', overflow: 'hidden', aspectRatio: '16 / 10' }}>
        <img src={c.img} alt={`${c.jp} — ${c.tag}`}
          style={{
            display: 'block', width: '100%', height: '100%', objectFit: 'cover',
            transform: hov ? 'scale(1.05)' : 'scale(1)',
            transition: 'transform .8s cubic-bezier(.2,.7,.2,1)',
          }} />
        <div style={{
          position: 'absolute', top: 16, left: 16,
          padding: '6px 12px', background: BRAND.white,
          fontFamily: 'ui-monospace, monospace', fontSize: 10,
          letterSpacing: '.22em', color: accent,
        }}>N° {c.no}</div>
      </div>

      {/* Body */}
      <div style={{ padding: '40px 40px 44px', display: 'flex', flexDirection: 'column', gap: 24, flex: 1 }}>
        <div style={{
          fontFamily: '"Shippori Mincho", serif', fontSize: 13,
          letterSpacing: '.18em', color: accent,
        }}>{c.tag}</div>

        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap' }}>
          <h3 style={{
            margin: 0, fontFamily: '"Shippori Mincho", serif', fontWeight: 600,
            fontSize: 34, letterSpacing: '.08em', color: BRAND.ink,
          }}>{c.jp}</h3>
          <span style={{
            fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
            fontSize: 16, letterSpacing: '.16em', color: BRAND.mute,
          }}>{c.en}</span>
        </div>

        <div style={{
          fontFamily: '"Shippori Mincho", serif', fontSize: 19,
          letterSpacing: '.08em', lineHeight: 1.6, color: BRAND.ink,
        }}>{c.lead}</div>

        <p style={{
          margin: 0, fontFamily: '"Noto Sans JP", sans-serif',
          fontSize: 13.5, lineHeight: 2, letterSpacing: '.04em',
          color: BRAND.ink, textWrap: 'pretty',
        }}>{c.desc}</p>

        {/* Key points */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {c.points.map((p) => (
            <span key={p} style={{
              padding: '6px 12px', background: accentSoft,
              fontFamily: '"Noto Sans JP", sans-serif', fontSize: 11.5,
              letterSpacing: '.06em', color: BRAND.ink,
            }}>{p}</span>
          ))}
        </div>

        {/* CTA */}
        <div style={{ marginTop: 'auto', paddingTop: 8 }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 12,
            paddingBottom: 6,
            fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
            fontSize: 14, letterSpacing: '.22em', color: BRAND.ink,
            borderBottom: `1px solid ${accent}`,
          }}>
            詳しく見る
            <span style={{
              fontFamily: '"Cormorant Garamond", serif', fontSize: 16, color: accent,
              transform: hov ? 'translateX(5px)' : 'none',
              transition: 'transform .3s ease',
            }}>→</span>
          </span>
        </div>
      </div>
    </a>
  );
}

function Extensions() {
  return (
    <section id="extensions" style={{
      background: BRAND.cream, color: BRAND.ink, padding: '160px 80px',
      position: 'relative', overflow: 'hidden',
    }}>
      <div aria-hidden="true" style={{
        position: 'absolute', left: -20, top: 80,
        fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
        fontWeight: 300, fontSize: 'clamp(150px, 22vw, 340px)',
        lineHeight: .9, letterSpacing: '-.03em',
        color: BRAND.pinkSoft, opacity: .4,
        pointerEvents: 'none', userSelect: 'none',
      }}>extensions.</div>

      <div style={{ maxWidth: 1320, margin: '0 auto', position: 'relative' }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          marginBottom: 72, gap: 40, flexWrap: 'wrap',
        }}>
          <div>
            <Eyebrow>Extensions — 04.5</Eyebrow>
            <div style={{ marginTop: 28 }}>
              <SectionTitle en="Two extensions." jp="2つのエクステンション" />
            </div>
          </div>
          <p style={{
            margin: 0, maxWidth: 440,
            fontFamily: '"Noto Sans JP", sans-serif',
            fontSize: 14, lineHeight: 2.1, letterSpacing: '.05em',
            color: BRAND.mute, textWrap: 'pretty',
          }}>
            YuHouseが誇る2つの主力技術。それぞれの特長を知り、お客様に最適なご提案を。各ページで詳しくご紹介しています。
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }}>
          {EXT_CARDS.map((c) => <ExtCard key={c.no} c={c} />)}
        </div>
      </div>
    </section>
  );
}

window.Extensions = Extensions;