/* ABOUT page — 誇KIMONO / 株式会社誇高 */

function AboutHero() {
  return (
    <section className="page-hero" data-screen-label="01 About Hero">
      <div className="page-hero__bg-kanji">誇</div>
      <div className="page-hero__content">
        <span className="page-hero__eyebrow reveal">About HOKORI KIMONO</span>
        <h1 className="page-hero__title reveal delay-1">
          日本人が、<br/>忘れかけていたもの。
        </h1>
        <p className="page-hero__lead reveal delay-2">
          誇KIMONO は、株式会社誇高が手がける和装ブランドです。<br/>
          技術不要、1分で着られる、完全オーダーメイドの着物。<br/>
          装いを変えることで、日本人としての誇りを、日常に取り戻す。
        </p>
        <div className="page-hero__crumbs reveal delay-3">
          <a href="HOKORI KIMONO - Men.html">PRODUCT</a>
          <span>/</span>
          <span className="page-hero__crumbs-current">ABOUT</span>
          <span>/</span>
          <a href="contact.html">CONTACT</a>
        </div>
      </div>
    </section>
  );
}

function AboutConcept() {
  return (
    <section className="about-concept" id="concept" data-screen-label="02 Concept">
      <div className="container">
        <div className="about-concept__grid">
          <div className="about-concept__eyebrow-col">
            <span className="eyebrow reveal">Brand Concept</span>
            <div className="about-concept__vertical reveal delay-1">誇りを、身に纏う。</div>
          </div>
          <div className="about-concept__body">
            <p className="reveal">
              日本人が着物を着なくなって、<br/>
              私たちは何を失ったのでしょうか。
            </p>
            <p className="reveal delay-1">
              それは「装い」ではありません。<br/>
              <span className="accent">「在り方」</span>です。
            </p>
            <p className="reveal delay-2">
              着物を纏う時、背筋が伸びる。<br/>
              所作が変わる。言葉が変わる。<br/>
              人としての「格」が、自然と立ち上がる。
            </p>
            <p className="reveal delay-3">
              誇KIMONO は、日本の精神性を日常に取り戻すための、<br/>
              紳士・淑女のための一着です。
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutPillars() {
  const pillars = [
    { num: "I",   en: "Dignity",      jp: "誇り",
      body: "かっこいい、ではない。誇り高い、であること。着物は内面の姿勢を引き出す装置です。" },
    { num: "II",  en: "Craftsmanship", jp: "技",
      body: "100種類以上の生地から、体型に合わせた完全オーダーメイド。世界にたった一着の誇り。" },
    { num: "III", en: "Accessibility", jp: "日常",
      body: "1分で着られる独自構造。お手入れもスーツ感覚で簡単。特別な日だけのものにしない、日常の和装。" },
  ];
  return (
    <section className="about-pillars" data-screen-label="03 Pillars">
      <div className="container">
        <div className="about-pillars__head">
          <span className="eyebrow on-dark reveal">Three Pillars</span>
          <h2 className="about-pillars__title reveal delay-1">
            誇KIMONO が<br/>
            大切にしていること。
          </h2>
        </div>
        <div className="about-pillars__grid">
          {pillars.map((p, i) => (
            <article key={p.num} className={`pillar reveal delay-${i+1}`}>
              <div className="pillar__num">{p.num}</div>
              <div className="pillar__en">— {p.en}</div>
              <h3 className="pillar__jp">{p.jp}</h3>
              <p className="pillar__body">{p.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutFounder() {
  return (
    <section className="about-founder" id="founder" data-screen-label="04 Founder">
      <div className="container">
        <div className="about-founder__grid">
          <div className="about-founder__photo reveal">
            <img src="assets/men/founder.jpg" alt="株式会社誇高 代表取締役 小倉瑞季" />
            <div className="about-founder__photo-cap">誇 × 袴</div>
          </div>
          <div className="about-founder__text">
            <span className="eyebrow reveal">Message from Founder</span>
            <h2 className="about-founder__title reveal delay-1">
              <span className="accent">「誇り」</span>と<br/>
              <span className="accent">「袴」</span>を、かけて。
            </h2>
            <div className="about-founder__body">
              <p className="reveal delay-1">
                私が着物を着るのは、<br/>かっこいいからではありません。
              </p>
              <p className="reveal delay-2">
                着物を纏った時、<br/>先祖と繋がる感覚があるのです。
              </p>
              <p className="reveal delay-3">
                歴代の当主が、家を背負い、<br/>
                国を背負って生きてきた。<br/>
                その系譜の一番末端に、私たちはいる。
              </p>
              <p className="reveal delay-4">
                着物は、その血の記憶を呼び起こす装置です。<br/>
                日本人の精神性は、装いに宿る。<br/>
                あなたも誇りを、身に纏いませんか。
              </p>
              <div className="about-founder__sign reveal delay-4">
                <span className="about-founder__sign-label">株式会社誇高 代表取締役</span>
                <span className="about-founder__sign-name">小倉 瑞季</span>
                <span className="about-founder__sign-en">Mizuki Ogura / Founder &amp; CEO, KOKOH Inc.</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutMedia() {
  const items = [
    {
      tag: "TALK / 2024",
      title: "TEDx ICU",
      body: "「何のために生まれて — 装いが教えてくれた、生き方の哲学」",
      img: "assets/about/tedx.jpg",
      meta: "Speaker / Mizuki Ogura"
    },
    {
      tag: "TRAINING",
      title: "誇高 ビジネストレーニング",
      body: "経営者・リーダー向けの研修事業。和装を通じて、内面の姿勢と立ち居振る舞いを整える。",
      img: "assets/about/training.jpg",
      meta: "B2B / Executive Programs"
    },
    {
      tag: "COMMUNITY",
      title: "和道経営塾 / 修学旅行",
      body: "島津久光公の像の前で。誇り高く立つ姿を、次の世代へ受け渡す。",
      img: "assets/about/community.jpg",
      meta: "Kagoshima / 2025",
      focus: "50% 25%"
    },
  ];
  return (
    <section className="about-media" id="activity" data-screen-label="05 Activity">
      <div className="container">
        <div className="about-media__head">
          <span className="eyebrow reveal">Media &amp; Activities</span>
          <h2 className="about-media__title reveal delay-1">
            装いを語り、<br/>
            装いを<span className="accent">伝える</span>。
          </h2>
          <p className="about-media__lead reveal delay-2">
            誇高の活動は、着物を売ることだけにとどまりません。<br/>
            講演・研修・コミュニティ — 装いを通じて、<br/>
            日本人の精神性と誇りを次世代へ受け渡しています。
          </p>
        </div>
        <div className="about-media__grid">
          {items.map((it, i) => (
            <article key={it.title} className={`media-card reveal delay-${i+1}`}>
              <div className="media-card__photo">
                <img src={it.img} alt={it.title} style={it.focus ? { objectPosition: it.focus } : undefined} />
              </div>
              <div className="media-card__body">
                <span className="media-card__tag">// {it.tag}</span>
                <h3 className="media-card__title">{it.title}</h3>
                <p className="media-card__desc">{it.body}</p>
                <span className="media-card__meta">— {it.meta}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutCompany() {
  const rows = [
    { label: "社名",     jp: "株式会社誇高",  en: "KOKOH Inc." },
    { label: "代表者",   jp: "小倉 瑞季",     en: "Mizuki Ogura, Founder & CEO" },
    { label: "設立",     jp: "2023年",        en: "Established 2023" },
    { label: "事業内容", jp: "和装ブランド「誇KIMONO」の企画・製造・販売 / ビジネストレーニング事業「誇高」の運営", en: "HOKORI KIMONO — custom kimono brand / KOKOH — business training for entrepreneurs" },
    { label: "所在地",   jp: "千葉県市川市",       en: "Ichikawa, Chiba" },
    { label: "お問い合わせ", jp: "CONTACT ページよりご連絡ください", en: "See contact page" },
  ];
  return (
    <section className="about-company" id="company" data-screen-label="06 Company">
      <div className="container">
        <div className="about-company__head">
          <span className="eyebrow reveal">Company Information</span>
          <h2 className="about-company__title reveal delay-1">会社情報</h2>
          <p className="about-company__lead reveal delay-2">
            誇KIMONO は、<strong>株式会社誇高（KOKOH Inc.）</strong> が運営する和装ブランドです。<br/>
            経営者のためのビジネストレーニング事業「誇高」と並び、<br/>
            日本人の誇りを取り戻すための事業として展開しています。
          </p>
        </div>
        <div className="about-company__table reveal delay-3">
          {rows.map((r, i) => (
            <div key={i} className="about-company__row">
              <div className="about-company__row-label">{r.label}</div>
              <div className="about-company__row-jp">{r.jp}</div>
              <div className="about-company__row-en">{r.en}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutBusiness() {
  const bizes = [
    {
      tag: "I / KIMONO",
      title: "誇KIMONO",
      en: "HOKORI KIMONO",
      body: "完全オーダーメイドの和装ブランド。紳士の和装（Men）と、大和撫子の装い（Women）。着付け不要・1分で着られる独自構造で、日常と特別な日を繋ぐ。",
      cta: { label: "紳士の和装を見る", href: "HOKORI KIMONO - Men.html" },
      cta2: { label: "大和撫子の装いを見る", href: "HOKORI KIMONO - Women.html" },
    },
    {
      tag: "II / BUSINESS",
      title: "誇高ビジネストレーニング",
      en: "KOKOH Business Training",
      body: "日本の経営者・起業家のための学びの場。「装い」「所作」「言葉」から経営者としての在り方を磨く、実践的なビジネストレーニング。",
      cta: { label: "お問い合わせ", href: "https://kokoh.co.jp", external: true },
  return (
    <section className="about-biz" id="business" data-screen-label="07 Business">
      <div className="container">
        <div className="about-biz__head">
          <span className="eyebrow on-dark reveal">Our Businesses</span>
          <h2 className="about-biz__title reveal delay-1">
            誇高が手がける、<br/>二つの事業。
          </h2>
        </div>
        <div className="about-biz__grid">
          {bizes.map((b, i) => (
            <article key={b.tag} className={`biz-card reveal delay-${i+1}`}>
              <span className="biz-card__tag">// {b.tag}</span>
              <h3 className="biz-card__title">{b.title}</h3>
              <div className="biz-card__en">{b.en}</div>
              <p className="biz-card__body">{b.body}</p>
              <div className="biz-card__ctas">
                <a href={b.cta.href} className="biz-card__cta" {...(b.cta.external ? {target: "_blank", rel: "noopener"} : {})}>
                  <span>{b.cta.label}</span>
                  <span className="cta__arrow"></span>
                </a>
                {b.cta2 && (
                  <a href={b.cta2.href} className="biz-card__cta biz-card__cta--ghost">
                    <span>{b.cta2.label}</span>
                    <span className="cta__arrow"></span>
                  </a>
                )}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutClosing() {
  return (
    <section className="about-closing" data-screen-label="08 Closing">
      <div className="about-closing__bg-kanji">誇</div>
      <div className="about-closing__content">
        <span className="eyebrow reveal">Join the Pride</span>
        <h2 className="about-closing__title reveal delay-1">
          誇りを、<br/>共に取り戻す。
        </h2>
        <p className="about-closing__body reveal delay-2">
          あなたの装いから、日本の精神性を。<br/>
          採寸・ご相談は、いつでも無料です。
        </p>
        <div className="about-closing__ctas reveal delay-3">
          <a href="contact.html#form" className="cta">
            <span>オーダー相談する</span>
            <span className="cta__arrow"></span>
          </a>
          <a href="HOKORI KIMONO - Men.html" className="cta cta--ghost">
            <span>商品を見る</span>
            <span className="cta__arrow"></span>
          </a>
        </div>
      </div>
    </section>
  );
}

function AboutApp() {
  useReveal();
  return (
    <>
      <Nav variant="men" current="about" ctaLabel="オーダー相談" />
      <AboutHero />
      <AboutConcept />
      <AboutPillars />
      <AboutFounder />
      <AboutMedia />
      <AboutCompany />
      <AboutBusiness />
      <AboutClosing />
      <Footer variant="men" />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<AboutApp />);