/* ===========================================================
   sections.jsx — page sections (Header, Hero, About, Services, etc.)
   =========================================================== */

/* ----- Intersection observer for fade-up ----- */
function useReveal() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    el.querySelectorAll(".fade-up").forEach(n => io.observe(n));
    return () => io.disconnect();
  }, []);
  return ref;
}

/* =============== HEADER (appears after scroll) =============== */
function Header() {
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => {
      // show when scrolled past 80% of viewport (cover is 100vh)
      setShown(window.scrollY > window.innerHeight * 0.75);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className="header" data-shown={shown ? "1" : "0"}>
      <div className="header-inner">
        <a className="brand" href="#top">
          <CamoufLogo size={22} />
          <span>CAMOUFLA</span>
        </a>
        <nav className="nav">
          <a href="#mission">Mission</a>
          <a href="#about">About</a>
          <a href="#services">Services</a>
          <a href="#company">Company</a>
        </nav>
        <a href="#contact" className="cta-pill">
          Contact <span aria-hidden>↗</span>
        </a>
      </div>
    </header>
  );
}

/* =============== COVER (wafu-modern, minimal) =============== */
function Cover({ camoVariant, tones }) {
  return (
    <section className="cover" id="top">
      <div className="cover-bg">
        <Camo variant={camoVariant} tones={tones} seed={4} opacity={0.55} dense={0.95} />
      </div>
      <div className="cover-grain" />

      <div className="cover-inner">
        <div className="cover-top">
          <a className="brand" href="#top">
            <CamoufLogo size={20} color="#f4f1ea" />
            <span>CAMOUFLA</span>
          </a>
          <nav className="nav-mini">
            <a href="#mission">Mission</a>
            <a href="#about">About</a>
            <a href="#services">Services</a>
            <a href="#company">Company</a>
          </nav>
          <a href="#contact" className="cta-mini">Contact <span aria-hidden>↗</span></a>
        </div>

        <div className="cover-center">
          <h1 className="cover-wordmark">
            <span className="en">CAMOUFLA</span>
          </h1>
        </div>

        <div className="cover-bottom">
          <div className="cover-scroll">
            <div className="bar" />
          </div>
        </div>
      </div>
    </section>
  );
}

/* =============== MISSION =============== */
function Mission() {
  const ref = useReveal();
  return (
    <section className="mission" id="mission" ref={ref}>
      <div className="shell">
        <div className="eyebrow fade-up">Our Mission</div>
        <h2 className="mission-statement fade-up">
          事業の景色に適応し、<br/>
          現場から、<em>確かな変革</em>を起こす。
        </h2>
        <div className="mission-body">
          <p className="fade-up">
            事業のフェーズ、組織の文化、そして市場の温度感。
            これらは企業ごとにまったく異なります。
            だからこそ私たちは、外側からテンプレートの提案を押し付けることはしません。
          </p>
          <p className="fade-up">
            まずは貴社の「現場の景色」に深く入り込み、現状を正しく観察することから始めます。
            環境に柔軟に適応し、顧客と同じ目線で泥臭く手を動かす。
            派手に目立つことではなく、事業を確実に前へと進めること。
            それが、カモフラというチームのあり方です。
          </p>
        </div>
      </div>
    </section>
  );
}

/* =============== HERO =============== */
function Hero({ camoVariant, tones }) {
  return (
    <section className="hero" id="top">
      <div className="hero-bg">
        <Camo variant={camoVariant} tones={tones} seed={9} opacity={0.55} dense={1.1} />
      </div>
      <div className="shell">
        <div className="eyebrow">Adaptive Precision — Est. 2021</div>
        <div className="hero-grid">
          <h1 className="hero-title">
            Blend in.<br/>
            <span className="accent-word">Stand</span> <span className="it">out.</span>
          </h1>
          <div className="hero-side">
            <div className="hero-meta">
              <div className="eyebrow">Who We Are</div>
              <p className="hero-jp">
                環境に溶け込み、確かな変革を起こす。<br/>
                マーケティング・事業開発・カスタマーサクセス。<br/>
                異なる専門性が一つのチームとして、<br/>
                クライアントのビジネスに最適解を描き出します。
              </p>
            </div>
            <div className="hero-services-row">
              <span className="svc-chip">LINE Marketing</span>
              <span className="svc-chip">Biz Development</span>
              <span className="svc-chip">Customer Success</span>
            </div>
          </div>
        </div>
      </div>
      <div className="hero-foot">
        <div className="coord">
          <span>36.0835° N</span>
          <span>140.0764° E</span>
        </div>
        <div className="scroll-cue">
          <span>Scroll</span>
          <div className="bar" />
        </div>
        <div className="coord" style={{ textAlign: "right" }}>
          <span>CAMOUFLA / 001</span>
          <span>TSUKUBA — TOKYO</span>
        </div>
      </div>
    </section>
  );
}

/* =============== MARQUEE =============== */
function Marquee() {
  const items = [
    "Blend in", "Stand out", "Adapt", "Execute", "Reshape",
    "Quietly", "Decisively", "Together"
  ];
  const Row = () => (
    <>
      {items.map((t, i) => (
        <React.Fragment key={i}>
          <span className={i % 3 === 1 ? "it" : ""}>{t}</span>
          <span className="dot" />
        </React.Fragment>
      ))}
    </>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">
        <Row /><Row /><Row />
      </div>
    </div>
  );
}

/* =============== ABOUT =============== */
function About() {
  const ref = useReveal();
  return (
    <section className="about" id="about" ref={ref}>
      <div className="section-hero">
        <div className="section-hero-img">
          <img src="images/about.png" alt="" />
        </div>
        <div className="section-hero-veil" aria-hidden="true" />
        <div className="shell section-hero-content fade-up">
          <div className="eyebrow eyebrow--light">About</div>
          <h2 className="section-hero-title">深く入り込み、確実に成果をあげる。</h2>
        </div>
      </div>

      <div className="shell">
        <div className="about-flow">
          <p className="about-para fade-up">
            カモフラ合同会社は、カモフラージュ（迷彩）のようにクライアントの環境に柔軟に適応し、
            確かな実行力をもってミッションを遂行するプロフェッショナル集団です。
          </p>

          <div className="about-divider fade-up" aria-hidden="true">
            <span /><span /><span />
          </div>

          <h3 className="about-statement fade-up">
            机上の空論ではなく、<br/>
            <em>ビジネスの現場</em>にコミットする。
          </h3>

          <p className="about-para fade-up">
            マーケティング、新規事業開発、カスタマーサクセス。
            異なる専門性を持つスペシャリストが、貴社の組織体制や事業特性に合わせた
            最適なチームを編成。机上の空論ではなく、ビジネスの現場にコミットします。
          </p>

          <div className="about-divider fade-up" aria-hidden="true">
            <span /><span /><span />
          </div>

          <p className="about-para fade-up">
            私たちのゴールは、美しい提案書を作ることではありません。
            「事業の成功」という、ただひとつの結果のために。
            私たちは頼れる黒子であり、最も近い伴走者として、
            成果が出るまで共に走り続けます。
          </p>
        </div>

        <div className="pillars-head fade-up">
          <div className="eyebrow">Value / Principle</div>
        </div>
        <div className="principles">
          <article className="principle fade-up">
            <div className="principle-num">
              <span className="n">01</span>
              <span className="slash">/</span>
              <span className="en">Embed, not just advise.</span>
            </div>
            <h3 className="principle-title">
              提案にとどまらず、<br/>現場に深く入り込む。
            </h3>
            <p className="principle-desc">
              アドバイスだけで終わらせず、実行の責任と成果までを共にする伴走型の支援を徹底します。
            </p>
          </article>
          <article className="principle fade-up">
            <div className="principle-num">
              <span className="n">02</span>
              <span className="slash">/</span>
              <span className="en">Tailored, not templated.</span>
            </div>
            <h3 className="principle-title">
              型にはめず、<br/>その事業に最適化する。
            </h3>
            <p className="principle-desc">
              他社の成功事例をそのまま当てはめるのではなく、貴社のフェーズと課題に合わせた最適な打ち手を設計します。
            </p>
          </article>
          <article className="principle fade-up">
            <div className="principle-num">
              <span className="n">03</span>
              <span className="slash">/</span>
              <span className="en">Quiet, but decisive.</span>
            </div>
            <h3 className="principle-title">
              表舞台に立たずとも、<br/>確実に事業を動かす。
            </h3>
            <p className="principle-desc">
              主役は常にクライアントです。私たちは黒子に徹しながらも、事業を推進する確かな原動力となります。
            </p>
          </article>
        </div>
      </div>
    </section>
  );
}

/* =============== SERVICES =============== */
const SERVICES = [
  {
    num: "S/01",
    en: "LINE Marketing",
    jp: "LINEマーケティング支援",
    desc: "公式アカウントの戦略設計・運用から、APIを活用した高度なチャットボット開発、成果直結型の広告運用まで。ユーザーとのエンゲージメントを最大化するコミュニケーション基盤を、戦略と運用の両輪で構築します。",
    tags: ["Account Design & Operation", "API & Chatbot Development", "LINE Ads Management"],
    seed: 21,
  },
  {
    num: "S/02",
    en: "Business Development",
    jp: "新規事業開発・グロース支援",
    desc: "市場調査や戦略立案といった「ゼロイチ」の立ち上げから、PoC（概念実証）による検証、実際の現場オペレーション構築、グロース（事業拡大）まで。アイデアを具現化し、軌道に乗るまで同じ熱量で伴走します。",
    tags: ["Market Research & Strategy", "PoC & Prototype Support", "Sales & Operations"],
    seed: 33,
  },
  {
    num: "S/03",
    en: "Customer Success",
    jp: "カスタマーサクセス構築支援",
    desc: "CS組織のゼロからの立ち上げ、既存体制のプロセス再設計、KPI・ヘルススコアの策定から、現場のオペレーション改善まで。「売って終わり」にしない、LTV（顧客生涯価値）を最大化し、継続的な事業成長をつくる仕組みを実装します。",
    tags: ["Organization Setup", "Process & Playbook Definition", "KPI Strategy & Execution"],
    seed: 47,
  },
];

function Services({ camoVariant, tones }) {
  const ref = useReveal();
  return (
    <section className="services" id="services" ref={ref}>
      <div className="section-hero section-hero--dark">
        <div className="section-hero-img">
          <img src="images/services.png" alt="" />
        </div>
        <div className="section-hero-veil" aria-hidden="true" />
        <div className="shell section-hero-content fade-up">
          <div className="eyebrow eyebrow--light">Services</div>
          <h2 className="section-hero-title">売る仕組みから、顧客に愛され続ける仕組みまで。</h2>
          <p className="section-hero-lead">
            課題や事業フェーズに応じて、3つのコア領域から最適なアプローチを組み合わせます。
            単発の施策ではなく、仕組み化され、持続的な成果が出るまで一気通貫でサポートします。
          </p>
        </div>
      </div>

      <div className="shell">
        <div className="svc-list">
          {SERVICES.map((s) => (
            <div key={s.en} className="svc-row fade-up">
              <div className="svc-title-block">
                <div className="svc-en">{s.en}</div>
                <div className="svc-jp">{s.jp}</div>
              </div>
              <div className="svc-desc">{s.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =============== COMPANY =============== */
function Company() {
  const ref = useReveal();
  return (
    <section className="company" id="company" ref={ref}>
      <div className="shell">
        <div className="company-wrap">
          <aside className="company-aside fade-up">
            <div className="index">Company</div>
            <h2>会社概要</h2>
          </aside>

          <div className="company-list fade-up">
            <div className="company-item">
              <div className="label">Company</div>
              <div className="value-jp">カモフラ合同会社</div>
            </div>
            <div className="company-item">
              <div className="label">Representative</div>
              <div className="value-jp">幕田 愛</div>
            </div>
            <div className="company-item">
              <div className="label">Established</div>
              <div className="value-jp">2021年 4月</div>
            </div>
            <div className="company-item">
              <div className="label">Location</div>
              <div className="value-jp">茨城県つくば市</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =============== CONTACT =============== */
function Contact({ camoVariant, tones }) {
  const darkTones = tones.map(c => c); // already-tonal
  return (
    <section className="contact" id="contact">
      <div style={{ position: "absolute", inset: 0, opacity: 0.35, mixBlendMode: "screen" }}>
        <Camo variant={camoVariant} tones={darkTones} seed={71} opacity={0.6} dense={0.9} />
      </div>
      <div className="shell" style={{ position: "relative" }}>
        <div className="eyebrow" style={{ color: "rgba(244,241,234,0.6)" }}>Get in Touch</div>
        <div className="contact-inner" style={{ marginTop: 28 }}>
          <h3>
            事業の景色を、<br/>ともに<em style={{fontStyle: "normal", color: "var(--accent-3)"}}>変える</em>。
          </h3>
          <div>
            <p className="contact-jp">
              事業フェーズ・体制・課題に関わらず、まずはお気軽にご相談ください。
              簡単なヒアリングから、最適なチーム編成をご提案します。
            </p>
            <a href="https://docs.google.com/forms/d/e/1FAIpQLSc---KLpue5kyDmn2wzvPmwJQwjSRBfBC-q41P_HIk7RH-3LA/viewform" target="_blank" rel="noopener noreferrer" className="contact-btn">
              Get in touch <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =============== FOOTER =============== */
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner shell">
        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
          <CamoufLogo size={18} color="rgba(244,241,234,0.7)" />
          <span>© 2026 CAMOUFLA LLC.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Cover, Mission, About, Services, Company, Contact, Footer });