// About page — Mission/Vision/Value, 会社概要, Members detail
const { useEffect: useEffectAb, useState: useStateAb } = React;

const VALUES = [
  { n: "01", title: "関わる人の幸せを、一番の基準に。", body: "クライアント・従業員・その家族。目の前の人の幸せを、最優先の判断基準にする。" },
  { n: "02", title: "自分の言葉で、選ぶ。", body: "なんとなくではなく、自分の意志でここにいる。freviaを選んだ理由を、自分の言葉で言える人でいる。" },
  { n: "03", title: "自分で選び、全力で臨む。", body: "やりたいことを選べる環境があるからこそ、選んだ仕事には妥協しない。" },
  { n: "04", title: "正直に、フラットに。", body: "クライアントにも、仲間にも、都合の悪いことも伝える。忖度より、誠実さを選ぶ。" },
  { n: "05", title: "結果で語る。", body: "やりがいも成長も、自分で見つけるもの。freviaが約束するのは環境だけ。あとは自分次第。" },
];

const MEMBERS = [
  {
    name: "森田 伸之介",
    en: "Shinnosuke Morita",
    role: "代表取締役",
    color: "var(--blue)",
    glyph: "森",
    history: [
      "2020.04  ソフトバンクグループのWeb広告代理店に入社",
      "2021.08  ソフトバンク本社とのWeb広告協業プロジェクトメンバーに就任、本社営業へ出向",
      "2023.01  代理店事業に帰任、アライアンスのPM兼運用担当",
      "2024.01  新規営業本部マネージャーに就任",
      "2025.01  新規営業本部課長に就任",
      "2025.12  Web広告代理店 退社",
      "2026.01  株式会社frevia 設立、代表取締役 就任",
    ],
    results: "大学生時代、自ら野菜販売事業を立ち上げ、仕入れから販売までの一連のプロセスを経験。この「商売の原点」ともいえる実体験が、後のマーケティングキャリアの礎となりました。大学卒業後、ソフトバンクグループのWeb広告代理店に入社。アライアンス事業のプロジェクトマネージャーや新規営業本部のマネージャー、課長を歴任し、一貫して現場の最前線でマーケティング支援に従事しました。月額数十万円から数千万円規模まで、予算規模を問わず多種多様な案件に携わり、特にECや住宅業界において、戦略立案から運用、データ分析までを網羅する課題解決を主導。代理店としての豊富な支援実績と、組織マネジメントの経験を背景に、2026年1月、株式会社freviaを設立。「自走」を支援するマーケティングパートナーとして、企業の事業成長を牽引しています。",
  },
  {
    name: "寺野 友大",
    en: "Tomohiro Terano",
    role: "アカウント本部長",
    color: "var(--cyan)",
    glyph: "寺",
    history: [
      "2021.04  ソフトバンクグループのWeb広告代理店に入社",
      "2024.12  LPO AWARD SECOND HALF OF 2024 SILVER 受賞",
      "2025.01  営業統括本部 運用チーム マネージャーに就任",
      "2025.07  ソフトバンク本社とのLINE OA協業プロジェクトを兼務",
      "2025.12  株式会社イーエムネットジャパン 退社",
      "2026.01  株式会社frevia 設立、アカウント本部長 就任",
    ],
    results: "アパレル・家具・ヘアケアなどEC案件を中心に担当。計測環境構築・LPOを駆使した LTV/ROI ベースのデジタル戦略策定が強み。某家具ECで月予算を200万→1000万まで成長、アパレルECでLTV150%成長を達成。月間総計2.5億円。",
  },
  {
    name: "関根 涼太",
    en: "Ryota Sekine",
    role: "営業本部長",
    color: "var(--terra)",
    glyph: "関",
    history: [
      "2021.04  ソフトバンクグループのWeb広告代理店に入社",
      "2025.01  新規営業本部マネージャーに就任",
      "2025.03  ecforce共同開催セミナーに登壇",
      "2025.12  Web広告代理店 退社",
      "2026.01  株式会社frevia に入社、営業本部長 就任",
    ],
    results: "某大手不動産投資会社の新規事業Webメイン担当を約5年従事、事業再開初年度売上6,000万円から3年で1億円まで拡大。現在は月15名ほどのWeb広告レッスンを担当。CRM領域を加味したWebマーケ対応も実施。",
  },
];

function MVVBig() {
  return (
    <section style={{ padding: "120px 0 80px" }}>
      <div className="container">
        <span className="eyebrow">About</span>
        <h1 className="h-section" style={{ marginTop: 18, fontSize: "clamp(56px, 10vw, 180px)" }}>
          <Kinetic text="freviaについて" dotAt={4} />
        </h1>
      </div>

      <div className="container" style={{ marginTop: 100, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
        {[
          { label: "Mission", title: <>向き合える自由を、<br />すべての人に。</>, body: "私たちの存在意義。自分自身、家族、仲間、クライアント — すべての関係に、向き合える余白を。", bg: "var(--navy)", fg: "#fff" },
          { label: "Vision", title: <>クライアントから信頼され、<br />従業員から愛される会社であり続ける。</>, body: "私たちの目指す未来。クライアントにも、共に働く仲間にも、長く信頼される存在としてあり続ける。", bg: "var(--sky)", fg: "var(--ink)" },
          { label: "Value", title: "5つの行動指針。", body: "幸せを基準に。選ぶ。臨む。正直に。結果で語る。", bg: "var(--terra)", fg: "#fff" },
        ].map((c, i) => (
          <div key={c.label} style={{ background: c.bg, color: c.fg, borderRadius: 16, padding: 36, minHeight: 380, display: "grid", gridTemplateRows: "auto 1fr auto", gap: 24, position: "relative", overflow: "hidden" }}>
            <span className="eyebrow" style={{ color: c.fg, opacity: 0.85 }}>{c.label}</span>
            <div style={{ display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
              <h3 style={{ fontFamily: "var(--f-display)", fontWeight: 900, fontSize: "clamp(22px, 1.9vw, 28px)", lineHeight: 1.45, letterSpacing: "-0.02em", color: c.fg, textWrap: "balance", marginBottom: 18 }}>{c.title}</h3>
              <p style={{ fontSize: 16, lineHeight: 1.9, opacity: 0.92, textWrap: "pretty", minHeight: "5em" }}>{c.body}</p>
            </div>
            <div style={{ position: "absolute", bottom: -40, right: -20, fontFamily: "var(--f-en)", fontSize: 200, fontWeight: 700, opacity: 0.14, lineHeight: 1, pointerEvents: "none" }}>0{i + 1}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function ValuesList() {
  const [active, setActive] = useStateAb(0);
  return (
    <section style={{ padding: "120px 0", background: "var(--navy-deep)", color: "#fff", position: "relative" }}>
      <div className="rail-right" />
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 120 }}>
            <span className="eyebrow" style={{ color: "var(--sky)" }}>Value · 5 statements</span>
            <h2 className="h-section" style={{ marginTop: 18, fontSize: "clamp(48px, 6vw, 96px)", color: "#fff" }}>
              行動<br />指針
            </h2>
            <p style={{ marginTop: 24, color: "rgba(255,255,255,0.75)", fontSize: 15, lineHeight: 1.85, maxWidth: 380 }}>
              freviaがメンバーに約束するのは「環境」だけ。<br />
              その環境の中で、私たちが大事にしている5つの約束です。
            </p>
          </div>
          <div>
            {VALUES.map((v, i) => (
              <div
                key={v.n}
                onMouseEnter={() => setActive(i)}
                data-cursor="hover"
                style={{
                  borderTop: "1px solid rgba(255,255,255,0.2)",
                  padding: "32px 0",
                  display: "grid",
                  gridTemplateColumns: "80px 1fr auto",
                  gap: 24,
                  alignItems: "center",
                  transition: "padding 0.4s var(--easing)",
                  paddingLeft: active === i ? 24 : 0,
                  borderColor: active === i ? "var(--terra)" : "rgba(255,255,255,0.2)",
                }}
              >
                <span style={{ fontFamily: "var(--f-en)", fontSize: 18, fontWeight: 600, color: active === i ? "var(--terra)" : "var(--sky)" }}>{v.n}</span>
                <div>
                  <h3 style={{ fontFamily: "var(--f-display)", fontWeight: 900, fontSize: active === i ? 34 : 26, letterSpacing: "-0.02em", transition: "font-size 0.4s var(--easing)", color: "#fff" }}>{v.title}</h3>
                  <p style={{ marginTop: active === i ? 12 : 0, fontSize: 14, lineHeight: 1.75, color: "rgba(255,255,255,0.78)", maxHeight: active === i ? 100 : 0, opacity: active === i ? 1 : 0, overflow: "hidden", transition: "all 0.4s var(--easing)" }}>{v.body}</p>
                </div>
                <span style={{ fontSize: 24, opacity: active === i ? 1 : 0.3, transition: "transform 0.4s var(--easing)", transform: active === i ? "translateX(6px)" : "translateX(0)", color: active === i ? "var(--terra)" : "#fff" }}>→</span>
              </div>
            ))}
            <div style={{ borderTop: "1px solid rgba(255,255,255,0.2)" }} />
          </div>
        </div>
      </div>
    </section>
  );
}

function CompanyInfo() {
  const rows = [
    { en: "Company", label: "会社名", value: "株式会社 frevia", emphasis: true },
    { en: "Established", label: "設立", value: "2026年1月5日" },
    { en: "Representative", label: "代表取締役", value: "森田 伸之介" },
    { en: "Capital", label: "資本金", value: "1,000,000円" },
    { en: "Team", label: "従業員数", value: "4名", note: "2026年4月時点" },
    { en: "Address", label: "所在地", value: "東京都中央区銀座1-12-4 N&E BLD. 7階", note: "〒104-0061" },
    { en: "Business", label: "事業内容", value: "デジタルマーケティング事業 / インハウス化支援事業" },
  ];
  return (
    <section style={{ padding: "120px 0" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "minmax(280px, 380px) 1fr", gap: 80, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 120 }}>
            <span className="eyebrow">Company</span>
            <h2 className="h-section" style={{ marginTop: 18, fontSize: "clamp(48px, 6.5vw, 110px)" }}>
              会社<br />概要
            </h2>
            <div style={{ marginTop: 40, display: "flex", gap: 10, flexWrap: "wrap" }}>
              <span className="sticker">EST. 2026</span>
              <span className="sticker sticker--sky">GINZA</span>
              <span className="sticker sticker--terra">TEAM OF 4</span>
            </div>
          </div>

          <dl style={{ margin: 0 }}>
            {rows.map((r, i) => (
              <div
                key={r.label}
                style={{
                  display: "grid",
                  gridTemplateColumns: "160px 1fr",
                  gap: 32,
                  alignItems: "baseline",
                  padding: "28px 0",
                  borderTop: i === 0 ? "1px solid var(--line)" : "none",
                  borderBottom: "1px solid var(--line)",
                  position: "relative",
                }}
              >
                <dt>
                  <div style={{ fontFamily: "var(--f-en)", fontSize: 11, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--terra)", marginBottom: 6 }}>
                    {String(i + 1).padStart(2, "0")} · {r.en}
                  </div>
                  <div style={{ fontSize: 14, fontWeight: 500, color: "var(--ink-3)" }}>
                    {r.label}
                  </div>
                </dt>
                <dd style={{ margin: 0 }}>
                  <div style={{ fontFamily: "var(--f-display)", fontWeight: r.emphasis ? 900 : 700, fontSize: r.emphasis ? 26 : 19, lineHeight: 1.45, letterSpacing: "-0.01em", color: "var(--ink)" }}>
                    {r.value}
                  </div>
                  {r.note ? (
                    <div style={{ marginTop: 6, fontSize: 12, color: "var(--ink-3)", fontFamily: "var(--f-en)", letterSpacing: "0.04em" }}>
                      {r.note}
                    </div>
                  ) : null}
                </dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </section>
  );
}

function MembersDetail() {
  return (
    <section style={{ padding: "120px 0", background: "var(--bg-soft)" }}>
      <div className="container">
        <span className="eyebrow">Members · 003</span>
        <h2 className="h-section" style={{ marginTop: 18, marginBottom: 64 }}>メンバー。</h2>

        <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
          {MEMBERS.map((m, idx) => (
            <div key={m.name} style={{ display: "grid", gridTemplateColumns: "minmax(280px, 1fr) 2fr", gap: 48, alignItems: "start", padding: "48px 0", borderTop: "1px solid var(--line)" }}>
              <div>
                <div data-cursor="hover" style={{ aspectRatio: "3/4", borderRadius: 16, background: m.color, position: "relative", overflow: "hidden" }}>
                  <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", fontFamily: "var(--f-display)", fontWeight: 900, fontSize: 280, color: m.color === "var(--cyan)" ? "rgba(0,0,0,0.16)" : "rgba(255,255,255,0.18)" }}>
                    {m.glyph}
                  </div>
                  <div style={{ position: "absolute", top: 20, left: 20 }}>
                    <span className="sticker sticker--white">0{idx + 1}</span>
                  </div>
                </div>
              </div>
              <div>
                <span className="eyebrow">{m.role}</span>
                <h3 style={{ fontFamily: "var(--f-display)", fontWeight: 900, fontSize: "clamp(40px, 4.5vw, 72px)", letterSpacing: "-0.03em", lineHeight: 1, marginTop: 18 }}>
                  {m.name}
                </h3>
                <div style={{ fontFamily: "var(--f-en)", fontSize: 16, fontWeight: 500, color: "var(--ink-2)", marginTop: 8 }}>
                  {m.en}
                </div>

                <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40 }}>
                  <div>
                    <h4 className="eyebrow" style={{ marginBottom: 16 }}>略歴</h4>
                    <ul style={{ listStyle: "none", padding: 0, fontSize: 13, lineHeight: 1.9, color: "var(--ink-2)" }}>
                      {m.history.map((h, i) => (
                        <li key={i} style={{ paddingLeft: 16, position: "relative", marginBottom: 4 }}>
                          <span style={{ position: "absolute", left: 0, color: m.color }}>·</span>{h}
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div>
                    <h4 className="eyebrow" style={{ marginBottom: 16 }}>実績</h4>
                    <p style={{ fontSize: 14, lineHeight: 1.8 }}>{m.results}</p>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function MembersSimple() {
  const members = [
    { name: "森田 伸之介", en: "Shinnosuke Morita", role: "代表取締役", slotId: "about-member-morita", bg: "var(--navy)" },
    { name: "寺野 友大", en: "Tomohiro Terano", role: "アカウント本部長", slotId: "about-member-terano", bg: "var(--sky)" },
    { name: "関根 涼太", en: "Ryota Sekine", role: "営業本部長", slotId: "about-member-sekine", bg: "var(--terra)" },
  ];
  return (
    <section style={{ padding: "100px 0", position: "relative" }}>
      <div className="rail-right" />
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48, flexWrap: "wrap", gap: 24 }}>
          <div>
            <span className="eyebrow">Members</span>
            <h2 className="h-section" style={{ marginTop: 18, fontSize: "clamp(40px, 5.6vw, 88px)" }}>メンバー紹介</h2>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "clamp(16px, 3vw, 48px)" }}>
          {members.map((m) => (
            <div key={m.slotId} style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center" }}>
              <div style={{ width: "min(100%, 380px)", aspectRatio: "1/1" }}>
                <image-slot
                  id={m.slotId}
                  shape="circle"
                  placeholder="写真をドロップ"
                  style={{ width: "100%", height: "100%", background: m.bg, color: "#fff" }}>
                </image-slot>
              </div>
              <div style={{ marginTop: 24, fontFamily: "var(--f-display)", fontWeight: 900, fontSize: "clamp(20px, 1.8vw, 26px)", letterSpacing: "-0.02em", color: "var(--ink)" }}>
                {m.name}
              </div>
              <div style={{ marginTop: 4, fontFamily: "var(--f-en)", fontSize: 13, fontWeight: 500, color: "var(--ink-3)", letterSpacing: "0.02em" }}>
                {m.en}
              </div>
              <div style={{ marginTop: 10, fontSize: 14, color: "var(--ink-2)" }}>
                {m.role}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutPage({ onNav }) {
  return (
    <div className="page-wrap">
      <MVVBig />
      <ValuesList />
      <CompanyInfo />
      <CTASection onNav={onNav} />
    </div>
  );
}

window.AboutPage = AboutPage;