const { useState, useEffect } = React; const useReveal = () => { useEffect(() => { const els = document.querySelectorAll('.reveal'); const io = new IntersectionObserver((entries) => entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }), { threshold: 0.12 }); els.forEach(el => io.observe(el)); return () => io.disconnect(); }, []); }; // ============ NAV ============ const Nav = ({ scrolled, isMobile, menuOpen, setMenuOpen, current }) => { const links = [ ['HOME', '#top'], ['SERVICE', '#service'], ['MISSION', '#mission'], ['VISION', '#vision'], ['VALUES', '#values'], ['RESULTS', '#results'], ['COMPANY', '#company'], ]; return ( <> {isMobile && menuOpen && (
{links.map(([label, href]) => ( setMenuOpen(false)} style={{ padding: '20px 4px', fontFamily: 'var(--font-en)', fontSize: 26, letterSpacing: '0.18em', borderBottom: '1px solid var(--line)', }}>{label} ))} setMenuOpen(false)} style={{ marginTop: 28, padding: 18, background: 'var(--blue)', color: 'var(--white)', textAlign: 'center', fontFamily: 'var(--font-en)', fontSize: 14, letterSpacing: '0.22em', borderRadius: 999, }}>CONTACT US →
)} ); }; // ============ HERO ============ const Hero = ({ isMobile }) => (
{!isMobile && } {!isMobile && } {!isMobile && } {!isMobile && (
SCROLL ↓
)}
); // ============ SERVICE ============ const ServiceCard = ({ icon, en, jp, body, delay }) => (
{ e.currentTarget.style.transform = 'translateY(-6px)'; e.currentTarget.style.boxShadow = '0 14px 40px rgba(27,93,230,0.16)'; }} onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 4px 20px rgba(14,27,44,0.05), 0 1px 3px rgba(14,27,44,0.04)'; }} >
{icon}

{en}

{jp}

{body}

→
); const IconTarget = () => ( ); const IconPen = () => ( ); const IconPlay = () => ( ); const IconChat = () => ( ); const Service = ({ isMobile }) => (
{!isMobile && (
HAYABUSA Inc.
)}
SERVICE

SERVICE

SNSの力で、ブランドと人をつなぐ。

} en="SNS Strategy" jp="SNS戦略設計" delay="0.05s" body="データ分析と戦略設計で、成果直結するSNS戦略を構築します。" /> } en="Creative Production" jp="クリエイティブ制作" delay="0.15s" body="ファンの心を動かす、クリエイティブの企画と制作力を発揮します。" /> } en="Video / Short-form Content" jp="動画 / ショートコンテンツ制作" delay="0.25s" body="短尺動画を中心に、拡散力のあるコンテンツを制作します。" /> } en="Brand Communication" jp="ブランドコミュニケーション" delay="0.35s" body="ファンとの接点を生み、ブランド価値を最大化します。" />
); // ============ MISSION + VISION ============ const MissionVision = ({ isMobile }) => (
{!isMobile && (
)}
{!isMobile && ( )} {/* MISSION */}
MISSION

一度 きりの 人生 に 、 本気 で 羽ばたく 機会 を 。

株式会社隼は、YouTube・TikTok・LINEを横断する戦略型SNSプロデュースで、挑戦するすべての人の事業を加速させます。

{/* VISION */}
VISION

誰 もが 、 本気 で 羽ばたける 場所 であり 続ける 。

関わるすべての人が、本気を出せる環境を。隼という場所そのものが、人を羽ばたかせる存在であり続けます。

); // ============ VALUES ============ const ValueRow = ({ num, en, jpHtml, body, delay, isMobile }) => { const [hover, setHover] = useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '110px 240px 1fr 1.4fr', gap: isMobile ? 12 : 32, padding: isMobile ? '28px 8px' : '36px 16px', borderTop: '1px solid var(--line)', alignItems: 'center', transition: 'transform 0.35s ease', transform: hover ? 'translateX(6px)' : 'translateX(0)', transitionDelay: delay, }}> {/* Number - skewed Bebas */}
{num}
{/* English title - italic + skew for speed */}
{en}
{/* Japanese subtitle with blue underlined keywords */}
{/* Body */}
{body}
); }; const SpeedLines = ({ style, density = 'med', angle = -8 }) => { const lines = density === 'high' ? 14 : density === 'low' ? 6 : 9; const arr = Array.from({ length: lines }); return (