// Header + Hero components (standalone — direct image paths)
const { useState: useState2, useEffect: useEffect2 } = React;
const HERO_IMG = {
  A: "assets/work-tennoji-roof-after.jpg",
  B: "assets/photo-roof-removal.jpg",
  C: "assets/photo-scaffold-townhouse.jpg",
};

function Header({ onMenu, transparent }){
  return (
    <header className={`header ${transparent ? "transparent" : ""}`}>
      <div className="wrap header-inner">
        <a href="#top" className="logo">
          <span className="logo-en">TAKEUCHI KOUBOU</span>
          <span className="logo-jp">武内工房</span>
        </a>
        <nav className="nav">
          {NAV.map(n => (
            <a key={n.en} href={n.href} className="nav-link">{n.en}</a>
          ))}
        </nav>
        <div style={{display:"flex", alignItems:"center", gap: 12}}>
          <a className="header-phone" href={`tel:${SITE.telLink}`}>
            <Phone /> {SITE.tel}
          </a>
          <button className="menu-btn" onClick={onMenu} aria-label="メニューを開く">
            <span></span>
          </button>
        </div>
      </div>
    </header>
  );
}

function MobileMenu({ open, onClose }){
  return (
    <div className={`mobile-menu ${open ? "open" : ""}`}>
      <div className="mobile-menu-head">
        <div className="logo">
          <span className="logo-en" style={{color:"var(--gold)"}}>TAKEUCHI KOUBOU</span>
          <span className="logo-jp" style={{color:"var(--paper)"}}>武内工房</span>
        </div>
        <button className="mobile-menu-close" onClick={onClose} aria-label="閉じる">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.2">
            <path d="M6 6 L18 18 M18 6 L6 18"/>
          </svg>
        </button>
      </div>
      <nav className="mobile-menu-nav">
        {NAV.map(n => (
          <a key={n.en} href={n.href} onClick={onClose}>
            <span>{n.en}</span><span className="jp">{n.jp}</span>
          </a>
        ))}
      </nav>
      <div className="mobile-menu-foot">
        <small>CALL US</small>
        <a href={`tel:${SITE.telLink}`}>{SITE.tel}</a>
      </div>
    </div>
  );
}

function HeroA(){
  return (
    <section className="hero v-a" id="top">
      <div className="hero-bg">
        <img src={HERO_IMG.A} alt="" />
      </div>
      <div className="hero-sidebar">TAKEUCHI KOUBOU — OSAKA, JAPAN</div>
      <div className="hero-inner">
        <div className="wrap">
          <div className="hero-eyebrow reveal in">CRAFTSMANSHIP &amp; TRUST</div>
          <h1 className="hero-headline reveal in" style={{transitionDelay:"120ms"}}>
            地域に根ざした、<br/>
            <span className="accent">丁寧な仕事。</span>
          </h1>
          <div className="hero-sub reveal in" style={{transitionDelay:"240ms"}}>
            Craftsmanship &amp; Trust
          </div>
          <p className="hero-desc reveal in" style={{transitionDelay:"320ms"}}>
            屋根の一枚から、家一棟まで。<br/>
            大阪を拠点に、近畿圏のお住まいを、ひとつひとつ手をかけて直しています。
          </p>
          <div className="hero-ctas reveal in" style={{transitionDelay:"440ms"}}>
            <a className="btn solid" href="#contact">無料相談はこちら <span className="arrow">→</span></a>
            <a className="btn" href="#works">施工事例を見る <span className="arrow">→</span></a>
          </div>
        </div>
      </div>
      <div className="hero-scroll"><span>SCROLL</span><div className="line"/></div>
    </section>
  );
}

function HeroB(){
  return (
    <section className="hero v-b" id="top">
      <div className="hero-bg">
        <img src={HERO_IMG.B} alt="" />
      </div>
      <div className="hero-inner">
        <div className="wrap">
          <div className="hero-eyebrow reveal in">CRAFTSMANSHIP &amp; TRUST</div>
          <h1 className="hero-headline reveal in" style={{transitionDelay:"120ms"}}>
            地域に根ざした、<br/>
            <span className="accent">丁寧な仕事。</span>
          </h1>
          <div className="hero-sub reveal in" style={{transitionDelay:"240ms"}}>
            Craftsmanship &amp; Trust
          </div>
          <p className="hero-desc reveal in" style={{transitionDelay:"320ms"}}>
            屋根・外壁・内装・水回り・解体。<br/>
            規模を問わず、ひとつひとつの現場に誠実に向き合います。
          </p>
          <div className="hero-ctas reveal in" style={{transitionDelay:"440ms"}}>
            <a className="btn solid" href="#contact">無料相談はこちら <span className="arrow">→</span></a>
            <a className="btn" href="#works">施工事例を見る <span className="arrow">→</span></a>
          </div>
        </div>
      </div>
      <div className="hero-scroll"><span>SCROLL</span><div className="line"/></div>
    </section>
  );
}

function HeroC(){
  return (
    <section className="hero v-c" id="top">
      <div className="hero-bg">
        <img src={HERO_IMG.C} alt="" />
      </div>
      <div className="hero-frame" />
      <div className="hero-inner">
        <div className="wrap">
          <div className="hero-eyebrow reveal in">— TAKEUCHI KOUBOU —</div>
          <h1 className="hero-headline reveal in" style={{transitionDelay:"120ms"}}>
            地域に根ざした、<br/>
            <span className="accent">丁寧な仕事。</span>
          </h1>
          <div className="hero-ornament reveal in" style={{transitionDelay:"200ms"}}>
            <span className="dash"/>
            <span>CRAFTSMANSHIP &amp; TRUST</span>
            <span className="dash"/>
          </div>
          <p className="hero-desc reveal in" style={{transitionDelay:"320ms"}}>
            屋根の一枚から、家一棟まで。<br/>大阪を拠点に、近畿圏のお住まいを、手をかけて直しています。
          </p>
          <div className="hero-ctas reveal in" style={{transitionDelay:"440ms"}}>
            <a className="btn solid" href="#contact">無料相談はこちら <span className="arrow">→</span></a>
            <a className="btn" href="#works">施工事例を見る <span className="arrow">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Hero({ variant }){
  if(variant === "B") return <HeroB />;
  if(variant === "C") return <HeroC />;
  return <HeroA />;
}

Object.assign(window, { Header, MobileMenu, Hero });