// ============== About / Services / Profile / News / Contact / Footer ==============

function AboutSection() {
  const cardStyle = {
    backgroundColor: "#ffffff",
    color: "var(--ink)",
    borderColor: "rgba(255,255,255,0.2)",
  };
  const idStyle = { color: "var(--muted-2)" };
  const labelStyle = { color: "#0f4eb0" };
  const h3Style = { color: "var(--ink)" };
  const accentStyle = { color: "#0f4eb0" };
  const pStyle = { fontWeight: 500, color: "var(--muted)" };

  return (
    <section className="about" id="about" style={{ backgroundColor: "rgb(15, 78, 176)" }}>
      <div className="container">
        <div className="sec-head about-head">
          <span className="sec-num">01 / ABOUT</span>
          <div>
            <div className="sec-eyebrow">Mission &amp; Vision</div>
            <h2 className="sec-title">私たちについて</h2>
            <p className="sec-lede">
              Who-nextは、「自分は何者か」という問いに向き合います。
            </p>
          </div>
        </div>

        <div className="mv-grid">
          <div className="mv-card" style={cardStyle}>
            <span className="mv-id mono" style={idStyle}>M · 01</span>
            <div className="mv-label" style={labelStyle}>Mission</div>
            <h3 style={h3Style}>
              <span style={accentStyle}>『自分だけ』</span>らしく。
            </h3>
            <p style={{ ...pStyle, whiteSpace: "pre-line" }}>
              いつの時代も、人が向きべきは「何をしたいか」「自分は何者か」という問い。{"\n"}Who-nextは、その問いに対する答えを言語化し、実装し、社会に接続します。
            </p>
          </div>
          <div className="mv-card" style={cardStyle}>
            <span className="mv-id mono" style={idStyle}>V · 01</span>
            <div className="mv-label" style={labelStyle}>Vision</div>
            <h3 style={h3Style}>
              個人の意思が、<br />
              <span style={accentStyle}>価値</span>として機能する社会へ。
            </h3>
            <p style={pStyle}>
              アイデアやスキルがコモディティ化する時代において、「その人にしかない意思・経験・関係性」が価値として機能する社会を目指します。
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function ServicesSection() {
  return (
    <section id="services">
      <div className="container">
        <div className="sec-head">
          <span className="sec-num">02 / SERVICES</span>
          <div>
            <div className="sec-eyebrow">Business Lines</div>
            <h2 className="sec-title">
              事業内容
            </h2>
            <p className="sec-lede">
              戦略設計から現場実装、学び、そして届け方まで。<br />
              企業・自治体・教育機関の皆さまと、事業を前に進めるための複数の事業を展開しています。
            </p>
          </div>
        </div>

        <div className="services-grid">
          {SITE.services.map((s) => (
            <div className="service" key={s.num}>
              <div className="svc-num"><span className="dash" />{s.num}</div>
              <div className="svc-en">{s.en}</div>
              <h3>{s.jp}</h3>
              <p style={{ whiteSpace: "pre-line" }}>{s.body}</p>
              <div className="tags">
                {s.tags.map((t) => <span key={t}>{t}</span>)}
              </div>
              <span className="corner">→</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProfileSection() {
  return (
    <section id="company">
      <div className="container">
        <div className="sec-head">
          <span className="sec-num">04 / COMPANY</span>
          <div>
            <div className="sec-eyebrow">Company Profile</div>
            <h2 className="sec-title">会社概要</h2>
          </div>
        </div>

        <div className="profile-grid">
          <table className="profile-table">
            <tbody>
              {SITE.profile.map((r) => (
                <tr key={r.k}>
                  <th>{r.k}</th>
                  <td>
                    {r.v}
                    <span className="jp-sub en">{r.sub}</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          <aside className="profile-side">
            <div className="marker-map" style={{ position: "relative", overflow: "hidden", borderRadius: 16, border: "1px solid var(--line)", aspectRatio: "4/3", background: "#f0f2f6" }}>
              <iframe
                title="Shibuya Location Map"
                src="https://www.google.com/maps?q=Shibuya,Tokyo,Japan&z=14&output=embed"
                width="100%"
                height="100%"
                style={{ border: 0, display: "block", filter: "grayscale(0.15)" }}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                allowFullScreen
              />
            </div>
            <h4 style={{ margin: "0 0 8px", fontSize: 16 }}>Shibuya, Tokyo, Japan</h4>
            <p style={{ margin: 0, color: "var(--muted)", fontSize: 13.5, lineHeight: 1.85 }}>
              全国の企業・自治体・教育機関の皆さまと、オンライン／オンサイトでご一緒しています。
            </p>
          </aside>
        </div>
      </div>
    </section>
  );
}

function NewsSection() {
  return (
    <section id="news" style={{ background: "var(--bg-tint)", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div className="sec-head">
          <span className="sec-num">05 / NEWS</span>
          <div>
            <div className="sec-eyebrow">Latest Updates</div>
            <h2 className="sec-title">ニュース</h2>
          </div>
        </div>

        <div className="news-list">
          {SITE.news.map((n, i) => (
            <div className="news-item" key={i}>
              <span className="date en">{n.date}</span>
              <span className="tag">{n.tag}</span>
              <h4>{n.title}</h4>
              <span className="arrow">→</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ContactSection() {
  return (
    <section id="contact" className="cta">
      <div className="container">
        <div className="cta-inner">
          <div className="grid-overlay" />
          <NetworkBackground
            density={0.00014}
            maxDist={140}
            nodeColor="rgba(255,255,255,0.55)"
            lineColor="rgba(255,255,255,0.18)"
            fadeEdges={false}
          />
          <div className="content">
            <div className="eyebrow en">06 / CONTACT</div>
            <h2 style={{ fontWeight: 700 }}>
              <span className="cta-line-1" style={{ display: "block", whiteSpace: "nowrap" }}>あなたの<span style={{ color: "#ffffff" }}>『自分だけ』</span>を、</span>
              <span style={{ display: "block" }}>一緒に形に。</span>
            </h2>
            <p>
              AI・IT活用のご相談、研修・講演のご依頼、マーケティング支援のご相談まで、お気軽にお問い合わせください。
            </p>
            <a href="mailto:rei_ookubo@who-next.com" className="btn-white">
              <span>お問い合わせはこちら</span><span>→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="foot-grid">
          <div>
            <span className="logo">
              <span className="who">Who</span>
              <span className="sep">-</span>
              <span className="next" style={{ color: "rgb(10, 15, 28)" }}>next</span>
            </span>
            <p style={{ color: "var(--muted)", fontSize: 13, marginTop: 16, maxWidth: 360, lineHeight: 1.8 }}>
              合同会社Who-next<br />
              『自分だけ』らしく。
            </p>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="#about">About</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#members">Members</a></li>
              <li><a href="#company">Profile</a></li>
            </ul>
          </div>
          <div>
            <h5>Information</h5>
            <ul>
              <li><a href="#news">News</a></li>
              <li><a href="#contact">Contact</a></li>
              <li><a href="#">Privacy Policy</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href="mailto:rei_ookubo@who-next.com">rei_ookubo@who-next.com</a></li>
              <li style={{ color: "var(--muted-2)" }}>Shibuya, Tokyo, Japan</li>
            </ul>
          </div>
        </div>
        <div className="foot-copy">
          <span>© 2026 Who-next, LLC. All rights reserved.</span>
          <span>MADE IN TOKYO / 2026—</span>
        </div>
      </div>
    </footer>
  );
}

window.AboutSection = AboutSection;
window.ServicesSection = ServicesSection;
window.ProfileSection = ProfileSection;
window.NewsSection = NewsSection;
window.ContactSection = ContactSection;
window.Footer = Footer;