// site.jsx — YuHouse Academy TOP page
// Luxury hair-academy site. Photo placeholders use subtly-striped SVG with
// monospace labels per the design system; the user will swap in real imagery.

const { useState, useEffect, useRef } = React;

// ── Brand tokens ────────────────────────────────────────────────────────────
// Palette pivot: white-first, with pink + gold as accent pair.
// Pink = warm primary accent, Gold = secondary / metallic accent.
const BRAND = {
  black: '#1A1A1A',            // reserved for text only — no full-bleed black surfaces
  ink: '#1A1A1A',
  mute: '#8A847C',
  white: '#FFFFFF',
  cream: '#FBF7F0',            // soft warm white — primary surface
  beige: '#F5EFE6',            // section divider tone
  beigeDeep: '#ECE3D2',
  pink: '#EF859A',             // primary accent
  pinkSoft: '#F8DDE2',
  gold: '#E5B34F',             // secondary accent
  goldSoft: '#F1D89A',
  hair: 'rgba(26,26,26,.08)',
};
// Back-compat aliases: existing call sites used BRAND.goldLight; the new
// palette names this goldSoft. Keep both so unrelated files keep working
// while the redesign rolls through.
BRAND.goldLight = BRAND.goldSoft;

// ── Placeholder photo ──────────────────────────────────────────────────────
// Striped tonal block + monospace caption describing intended subject.
// Tone is "warm" (beige) or "dark" (black). Aspect = w/h in CSS aspect-ratio.
function Photo({ label, tone = 'warm', ratio = '4 / 5', radius = 0, style = {} }) {
  // Tones map to the new white-based palette:
  //   'warm'  → cream / beige stripes (default light surface)
  //   'blush' → soft pink stripes (hero / feature accents)
  //   'dark'  → kept for legacy callers; renders as a softer charcoal
  const stripes = {
    warm:  ['#F0E8D7', '#E8DEC6'],
    blush: ['#FBE3E6', '#F4D2D8'],
    dark:  ['#26221E', '#2E2925'],
  }[tone] || ['#F0E8D7', '#E8DEC6'];
  const isDark = tone === 'dark';
  const cap = isDark ? 'rgba(255,255,255,.55)' : 'rgba(26,26,26,.42)';
  const tag = isDark ? 'rgba(229,179,79,.75)' : 'rgba(239,133,154,.85)';
  return (
    <div
      style={{
        position: 'relative',
        width: '100%',
        aspectRatio: ratio,
        background: `repeating-linear-gradient(135deg, ${stripes[0]} 0 14px, ${stripes[1]} 14px 28px)`,
        borderRadius: radius,
        overflow: 'hidden',
        ...style,
      }}
    >
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column',
        alignItems: 'flex-start', justifyContent: 'flex-end',
        padding: 18, gap: 6,
      }}>
        <div style={{
          fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
          fontSize: 10, letterSpacing: '.18em', color: tag,
        }}>{'// PHOTO'}</div>
        <div style={{
          fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
          fontSize: 11, letterSpacing: '.04em', color: cap,
          maxWidth: '85%', lineHeight: 1.4,
        }}>{label}</div>
      </div>
    </div>
  );
}

// ── Eyebrow ────────────────────────────────────────────────────────────────
// English label above a Japanese heading. Standard rhythm device for this site.
function Eyebrow({ children, color = BRAND.gold }) {
  return (
    <div style={{
      fontFamily: '"Cormorant Garamond", serif',
      fontWeight: 500, fontStyle: 'italic',
      fontSize: 14, letterSpacing: '.28em',
      textTransform: 'uppercase', color,
      display: 'flex', alignItems: 'center', gap: 14,
    }}>
      {children}
    </div>
  );
}

// ── Section title (EN big serif + JP smaller mincho) ───────────────────────
function SectionTitle({ en, jp, light = false, align = 'left' }) {
  return (
    <div style={{ textAlign: align }}>
      <h2 style={{
        fontFamily: '"Cormorant Garamond", serif',
        fontWeight: 400, fontSize: 'clamp(44px, 5.4vw, 76px)',
        lineHeight: .98, letterSpacing: '.02em',
        color: light ? BRAND.white : BRAND.ink, margin: 0,
      }}>{en}</h2>
      {jp && (
        <div style={{
          marginTop: 14,
          fontFamily: '"Shippori Mincho", serif',
          fontWeight: 500, fontSize: 16, letterSpacing: '.18em',
          color: light ? 'rgba(255,255,255,.7)' : BRAND.mute,
        }}>{jp}</div>
      )}
    </div>
  );
}

// ── Button ─────────────────────────────────────────────────────────────────
// Primary  = ink fill, white text, pink fill on hover (pink is the lead accent).
// Secondary = transparent w/ ink border on light surfaces, white on dark.
function Btn({ children, variant = 'primary', onLight = true, arrow = true, href = '#' }) {
  const [hov, setHov] = useState(false);
  const isPrimary = variant === 'primary';
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 14,
    padding: '18px 28px', minWidth: 220,
    fontFamily: '"Noto Sans JP", sans-serif',
    fontSize: 13, fontWeight: 500, letterSpacing: '.16em',
    textDecoration: 'none', cursor: 'pointer',
    border: '1px solid', borderRadius: 0,
    transition: 'background .35s ease, color .35s ease, border-color .35s ease',
    justifyContent: 'space-between',
  };
  let styled;
  if (isPrimary) {
    styled = hov
      ? { ...base, background: BRAND.pink,  color: BRAND.white, borderColor: BRAND.pink  }
      : { ...base, background: BRAND.ink,   color: BRAND.white, borderColor: BRAND.ink   };
  } else {
    // onLight=true means we're sitting on a white/cream surface
    styled = hov
      ? { ...base,
          background: onLight ? BRAND.ink  : BRAND.white,
          color:      onLight ? BRAND.white : BRAND.ink,
          borderColor: onLight ? BRAND.ink : BRAND.white }
      : { ...base, background: 'transparent',
          color:       onLight ? BRAND.ink : BRAND.white,
          borderColor: onLight ? BRAND.ink : BRAND.white };
  }
  return (
    <a href={href} style={styled}
       onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}>
      <span>{children}</span>
      {arrow && (
        <span style={{
          fontFamily: '"Cormorant Garamond", serif',
          fontSize: 16, letterSpacing: 0,
          transform: hov ? 'translateX(4px)' : 'translateX(0)',
          transition: 'transform .35s ease',
        }}>→</span>
      )}
    </a>
  );
}

// ── Top navigation ─────────────────────────────────────────────────────────
// Always-light variant: cream-tinted blur, dark text. The hairline border
// fades in on scroll so the nav has presence over content.
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  const items = [
    ['CONCEPT', '#concept'],
    ['MESSAGE', '#message'],
    ['LECTURERS', '#lecturers'],
    ['COURSES', '#courses'],
    ['FAQ', '#faq'],
    ['ACCESS', '#access'],
  ];
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      padding: '20px 40px',
      background: scrolled ? 'rgba(251,247,240,.85)' : 'rgba(251,247,240,.0)',
      backdropFilter: scrolled ? 'blur(14px) saturate(120%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(120%)' : 'none',
      borderBottom: scrolled ? `1px solid ${BRAND.hair}` : '1px solid transparent',
      transition: 'background .35s ease, border-color .35s ease',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <a href="#top" style={{ display: 'flex', alignItems: 'baseline', gap: 10, textDecoration: 'none' }}>
        <span style={{
          fontFamily: '"Cormorant Garamond", serif',
          fontWeight: 500, fontSize: 22, letterSpacing: '.14em', color: BRAND.ink,
        }}>YuHouse</span>
        <span style={{
          fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
          fontWeight: 400, fontSize: 14, letterSpacing: '.18em', color: BRAND.pink,
        }}>Academy</span>
      </a>
      <div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
        {items.map(([label, href]) => (
          <a key={label} href={href} style={{
            fontFamily: '"Cormorant Garamond", serif',
            fontSize: 13, letterSpacing: '.22em', color: BRAND.ink,
            textDecoration: 'none', opacity: .8,
          }}>{label}</a>
        ))}
        <a href="#cta" style={{
          fontFamily: '"Noto Sans JP", sans-serif',
          fontSize: 12, fontWeight: 500, letterSpacing: '.18em',
          color: BRAND.white, background: BRAND.pink,
          padding: '11px 22px', textDecoration: 'none',
        }}>お問い合わせ</a>
      </div>
    </nav>
  );
}

// ── Hero ───────────────────────────────────────────────────────────────────
// Editorial split: oversized serif headline left, hero photo right.
// Cream surface, pink + gold accents. A single half-bleed photo (using one of
// the lecturer shots until a proper hero is supplied) anchors the right side.
function Hero() {
  return (
    <section id="top" style={{
      position: 'relative', minHeight: '94vh',
      background: BRAND.cream, color: BRAND.ink, overflow: 'hidden',
    }}>
      {/* Faint outsized word watermark */}
      <div aria-hidden="true" style={{
        position: 'absolute', left: -20, bottom: -40,
        fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
        fontWeight: 300, fontSize: 'clamp(180px, 28vw, 420px)',
        lineHeight: .9, letterSpacing: '-.04em',
        color: BRAND.pinkSoft, opacity: .55, userSelect: 'none', pointerEvents: 'none',
      }}>hair.</div>

      {/* Hairline frame */}
      <div style={{
        position: 'absolute', top: 90, left: 40, right: 40, bottom: 40,
        border: `1px solid ${BRAND.hair}`, pointerEvents: 'none',
      }} />

      {/* Vertical EN tagline at left edge */}
      <div style={{
        position: 'absolute', left: 22, top: '50%',
        transform: 'translateY(-50%) rotate(-90deg)', transformOrigin: 'left center',
        fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
        fontSize: 12, letterSpacing: '.36em', color: BRAND.mute,
        whiteSpace: 'nowrap', zIndex: 3,
      }}>Hair Artist Academy &nbsp;·&nbsp; Est. Tokyo</div>

      {/* Frame number top-right */}
      <div style={{
        position: 'absolute', top: 116, right: 64,
        fontFamily: 'ui-monospace, monospace', fontSize: 11,
        letterSpacing: '.24em', color: BRAND.mute, zIndex: 3,
      }}>N° 01 / HERO</div>

      <div style={{
        position: 'relative', zIndex: 2, height: '94vh', minHeight: 720,
        maxWidth: 1440, margin: '0 auto', padding: '160px 80px 80px',
        display: 'grid', gridTemplateColumns: '1.05fr 1fr',
        gap: 80, alignItems: 'center',
      }}>
        {/* Left: text */}
        <div>
          <Eyebrow color={BRAND.pink}>YuHouse Academy · 2026</Eyebrow>
          <h1 style={{
            margin: '32px 0 0',
            fontFamily: '"Cormorant Garamond", serif',
            fontWeight: 300, fontSize: 'clamp(64px, 8.2vw, 128px)',
            lineHeight: .94, letterSpacing: '-.01em', color: BRAND.ink,
          }}>
            Technique<br />
            <span style={{ fontStyle: 'italic', color: BRAND.pink }}>expands</span>{' '}
            <span style={{
              display: 'inline-block', verticalAlign: 'middle',
              width: '.55em', height: 2, background: BRAND.gold,
              margin: '0 .15em .12em',
            }} /><br />
            expression.
          </h1>
          <p style={{
            marginTop: 36, maxWidth: 480,
            fontFamily: '"Shippori Mincho", serif',
            fontSize: 18, lineHeight: 2.1, letterSpacing: '.1em',
            color: BRAND.ink,
          }}>
            技術で、表現の幅を広げる。<br />
            美容師のための、実践型ヘアアカデミー。
          </p>
          <div style={{ marginTop: 48, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            <Btn href="#courses">講習を見る</Btn>
            <Btn href="#cta" variant="secondary" onLight={true}>お問い合わせ</Btn>
          </div>
        </div>

        {/* Right: hero photo card */}
        <div style={{ position: 'relative', height: '100%', minHeight: 480 }}>
          <div style={{
            position: 'absolute', inset: 0, overflow: 'hidden',
            background: BRAND.beige,
          }}>
            <img
              src="assets/img/sara.jpg" alt="" aria-hidden="true"
              style={{
                width: '100%', height: '100%',
                objectFit: 'cover', objectPosition: 'center 30%',
                filter: 'grayscale(.04) contrast(1.04) saturate(.95)',
              }}
            />
            {/* Soft pink wash for tonal unity */}
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(180deg, rgba(239,133,154,.04) 0%, rgba(229,179,79,.06) 100%)',
              mixBlendMode: 'multiply',
            }} />
          </div>

          {/* Pink badge top-right */}
          <div style={{
            position: 'absolute', top: -16, right: -16,
            width: 110, height: 110, borderRadius: '50%',
            background: BRAND.pink, color: BRAND.white,
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center', gap: 4,
            fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
            transform: 'rotate(-8deg)',
          }}>
            <span style={{ fontSize: 11, letterSpacing: '.26em' }}>SINCE</span>
            <span style={{ fontSize: 26, letterSpacing: '.04em' }}>2026</span>
          </div>

          {/* Gold tick top-left */}
          <div style={{
            position: 'absolute', top: 16, left: 16,
            padding: '8px 12px', background: BRAND.cream, color: BRAND.gold,
            border: `1px solid ${BRAND.gold}`,
            fontFamily: 'ui-monospace, monospace', fontSize: 10,
            letterSpacing: '.22em',
          }}>FIG. A — ACADEMY</div>

          {/* Caption bar bottom */}
          <div style={{
            position: 'absolute', left: 0, right: 0, bottom: -1,
            padding: '14px 18px',
            background: BRAND.ink, color: BRAND.cream,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
            fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
            fontSize: 12, letterSpacing: '.22em',
          }}>
            <span>Hair, as expression.</span>
            <span style={{ color: BRAND.goldSoft }}>01 / 09</span>
          </div>
        </div>
      </div>

      {/* Scroll cue */}
      <div style={{
        position: 'absolute', bottom: 24, left: '50%',
        transform: 'translateX(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
        color: BRAND.mute,
      }}>
        <span style={{
          fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
          fontSize: 12, letterSpacing: '.32em',
        }}>SCROLL</span>
        <span style={{
          width: 1, height: 40, background: BRAND.ink, opacity: .35,
          animation: 'scrollCue 2.4s ease-in-out infinite',
        }} />
      </div>
    </section>
  );
}

// ── Concept / Intro ────────────────────────────────────────────────────────
function Concept() {
  return (
    <section id="concept" style={{
      background: BRAND.white, color: BRAND.ink,
      padding: '160px 80px',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.05fr 1fr',
          gap: 100, alignItems: 'center',
        }}>
          <div>
            <Eyebrow>About — 01</Eyebrow>
            <div style={{ marginTop: 28 }}>
              <SectionTitle en="The Academy" jp="YuHouseアカデミーとは" />
            </div>
            <p style={{
              marginTop: 48,
              fontFamily: '"Shippori Mincho", serif',
              fontSize: 19, lineHeight: 2.2, letterSpacing: '.06em',
              color: BRAND.ink, textWrap: 'pretty',
            }}>
              美容師・ヘアアーティストが、現場で活かせる<br />
              技術を実践的に学ぶための専門アカデミー。
            </p>
            <p style={{
              marginTop: 28, maxWidth: 540,
              fontFamily: '"Noto Sans JP", sans-serif',
              fontSize: 14, lineHeight: 2, letterSpacing: '.04em',
              color: BRAND.mute, textWrap: 'pretty',
            }}>
              シールエクステ、羽エクステ、ブラックヘアー、カラー、カットなど、多様な技術講習を通じて、表現の幅とサロンワークの可能性を広げます。第一線で活躍する講師陣が、サロンワークの延長としての教育を提供します。
            </p>
            <div style={{
              marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 24, paddingTop: 40,
              borderTop: `1px solid ${BRAND.hair}`,
            }}>
              {[
                ['10+', 'Lecturers', '在籍講師'],
                ['7', 'Categories', '講習カテゴリ'],
                ['1on1', 'Approach', '実践指導'],
              ].map(([n, en, jp]) => (
                <div key={en}>
                  <div style={{
                    fontFamily: '"Cormorant Garamond", serif',
                    fontWeight: 400, fontSize: 56, lineHeight: 1,
                    color: BRAND.black, letterSpacing: '-.01em',
                  }}>{n}</div>
                  <div style={{
                    marginTop: 14,
                    fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
                    fontSize: 13, letterSpacing: '.22em',
                    color: BRAND.gold,
                  }}>{en}</div>
                  <div style={{
                    marginTop: 4,
                    fontFamily: '"Noto Sans JP", sans-serif',
                    fontSize: 12, color: BRAND.mute, letterSpacing: '.06em',
                  }}>{jp}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right photo stack */}
          <div style={{ position: 'relative', height: 720 }}>
            <div style={{ position: 'absolute', top: 0, right: 0, width: '78%' }}>
              <Photo ratio="3 / 4" label="Lecture in progress — close-up of hands, scissors, and hair." />
            </div>
            <div style={{ position: 'absolute', bottom: 0, left: 0, width: '50%' }}>
              <Photo ratio="1 / 1" label="Studio detail — tools laid out on warm marble or wood." />
            </div>
            <div style={{
              position: 'absolute', bottom: 24, right: 24,
              fontFamily: 'ui-monospace, monospace', fontSize: 10,
              letterSpacing: '.22em', color: BRAND.mute,
            }}>FIG. 01</div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Photo = Photo;
window.Eyebrow = Eyebrow;
window.SectionTitle = SectionTitle;
window.Btn = Btn;
window.Nav = Nav;
window.Hero = Hero;
window.Concept = Concept;
window.BRAND = BRAND;