// Top / Home page — hero with 3 variations + sections
const { useEffect: useEffectTop, useState: useStateTop, useRef: useRefTop } = React;

/* ---------- Custom "frevia" wordmark with red i-dot ---------- */
const FREVIA_PALETTE = ["#335C8E", "#7BC7E2", "#C84632", "#335C8E", "#7BC7E2", "#1F3D63"];

function FreviaWordmark() {
  const [colorized, setColorized] = useStateTop(true);
  useEffectTop(() => {
    setColorized(true);
    const t = setTimeout(() => setColorized(false), 900);
    return () => clearTimeout(t);
  }, []);

  // f, r, e, v, i, a — the "i" carries an absolutely-positioned terra dot
  // that overlays (and slightly hides) the natural ink dot.
  const chars = [
    { c: "f" },
    { c: "r" },
    { c: "e" },
    { c: "v" },
    { c: "i", isI: true },
    { c: "a" },
  ];

  return (
    <span className="kinetic" style={{ display: "inline-block" }}>
      {chars.map((item, i) => {
        const color = FREVIA_PALETTE[i % FREVIA_PALETTE.length];
        return (
          <span
            key={i}
            className="kinetic__char"
            style={{
              display: "inline-block",
              position: "relative",
              color: colorized ? color : "inherit",
              transitionDelay: `${i * 0.06}s`,
            }}
          >
            {item.c}
            {item.isI ? (
              <span
                id="frevia-i-dot"
                aria-hidden="true"
                style={{
                  position: "absolute",
                  left: "50%",
                  top: "0.08em",
                  width: "0.22em",
                  height: "0.22em",
                  borderRadius: "50%",
                  background: "var(--terra)",
                  transform: "translate(calc(-50% + 0.02em), 0)",
                  pointerEvents: "none",
                }} />
            ) : null}
          </span>
        );
      })}
    </span>
  );
}

/* ---------- HERO variations ---------- */

function HeroKinetic({ onNav, bgStyle = "grid" }) {
  return (
    <section style={{ padding: "140px 0 96px", position: "relative", overflow: "hidden" }}>
      <HeroBackground variant={bgStyle} />
      <FloatingShapes />
      <div className="rail-right" />

      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <h1 className="display" style={{ fontSize: "clamp(72px, 14vw, 240px)", letterSpacing: "-0.05em" }}>
          <span style={{ display: "block" }}>
            <FreviaWordmark />
          </span>
        </h1>
        <div style={{ marginTop: 24, fontFamily: "var(--f-display)", fontWeight: 700, fontSize: "clamp(20px, 2.6vw, 38px)", lineHeight: 1.4, letterSpacing: "-0.01em", color: "var(--ink-2)" }}>
          向き合える<span style={{ color: "var(--navy)" }}>自由</span>を、全ての人に。
        </div>

        <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1fr auto", gap: 40, alignItems: "end" }}>
          <p style={{ fontSize: 17, lineHeight: 1.95, maxWidth: 620, color: "var(--ink-2)", textWrap: "pretty" }}>
            人手不足に悩む中小企業様に、デジタルマーケティング機能そのものを提供し、日本の中小企業の成長スピードを最大化させます。
          </p>
          <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
            <Magnetic strength={0.22}>
              <a
                href="#service"
                className="btn-hero btn-hero--primary"
                data-cursor="hover"
                onClick={(e) => { e.preventDefault(); onNav("service"); }}>
                <span className="btn-hero__label">サービスを見る</span>
                <span className="btn-hero__icon" aria-hidden="true">
                  <svg viewBox="0 0 24 24" width="18" height="18" fill="none">
                    <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </span>
              </a>
            </Magnetic>
            <Magnetic strength={0.22}>
              <a
                href="#contact"
                className="btn-hero btn-hero--ghost"
                data-cursor="hover"
                onClick={(e) => { e.preventDefault(); onNav("contact"); }}>
                <span className="btn-hero__label">お問い合わせ</span>
                <span className="btn-hero__icon" aria-hidden="true">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none">
                    <path d="M7 17L17 7M9 7h8v8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </span>
              </a>
            </Magnetic>
          </div>
        </div>
      </div>
    </section>);

}

function HeroCollage({ onNav }) {
  return (
    <section style={{ padding: "140px 0 96px", position: "relative", overflow: "hidden" }}>
      <div className="rail-right" />
      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 60, alignItems: "stretch" }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 40, flexWrap: "wrap" }}>
              <span className="tag">Company Profile</span>
              <span className="tag tag--terra">v2026</span>
            </div>
            <h1 className="display" style={{ fontSize: "clamp(56px, 9vw, 140px)", marginBottom: 32 }}>
              <span style={{ display: "block" }}>向き合える</span>
              <span style={{ display: "block", color: "var(--navy)" }}>自由を、</span>
              <span style={{ display: "block" }}>すべての人に。</span>
            </h1>
            <div style={{ display: "flex", gap: 12 }}>
              <a href="#service" className="btn btn--primary" data-cursor="hover" onClick={(e) => {e.preventDefault();onNav("service");}}>
                Service<span className="btn__arrow">→</span>
              </a>
              <a href="#about" className="btn btn--ghost" data-cursor="hover" onClick={(e) => {e.preventDefault();onNav("about");}}>
                About frevia
              </a>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gridTemplateRows: "auto auto auto", gap: 16, height: "100%" }}>
            <div style={{ gridColumn: "span 2", background: "var(--navy)", borderRadius: 16, padding: 28, color: "#fff", aspectRatio: "16/7", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div className="eyebrow" style={{ color: "rgba(255,255,255,0.7)" }}>EST</div>
              <div style={{ fontFamily: "var(--f-display)", fontSize: 72, fontWeight: 900, letterSpacing: "-0.04em", color: "#fff" }}>2026.01</div>
            </div>
            <div style={{ background: "var(--sky)", borderRadius: 16, padding: 24, aspectRatio: "1/1", display: "flex", alignItems: "flex-end" }}>
              <div>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 56, fontWeight: 900, lineHeight: 1, color: "var(--ink)" }}>04</div>
                <div style={{ fontSize: 13, color: "var(--ink-2)", marginTop: 8 }}>メンバー</div>
              </div>
            </div>
            <div style={{ background: "var(--sky-soft)", borderRadius: 16, padding: 24, aspectRatio: "1/1", display: "flex", alignItems: "flex-end" }}>
              <div>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 56, fontWeight: 900, lineHeight: 1, color: "var(--navy)" }}>¥5B</div>
                <div style={{ fontSize: 13, marginTop: 8, color: "var(--ink-2)" }}>月間運用実績</div>
              </div>
            </div>
            <div style={{ gridColumn: "span 2", background: "var(--terra)", borderRadius: 16, padding: 24, aspectRatio: "16/4", display: "flex", alignItems: "center", justifyContent: "space-between", color: "#fff" }}>
              <span style={{ fontFamily: "var(--f-display)", fontWeight: 900, fontSize: 24 }}>Banner · LP · Strategy</span>
              <span style={{ fontSize: 28 }}>↗</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function HeroMarquee({ onNav }) {
  const marqueeText = "向き合える自由を、すべての人に。 / ";
  return (
    <section style={{ minHeight: "100vh", padding: "140px 0 80px", position: "relative", overflow: "hidden", background: "var(--navy-deep)", color: "#fff" }}>
      <div className="rail-right" />
      <div style={{ position: "absolute", inset: 0, overflow: "hidden", opacity: 0.12, pointerEvents: "none" }}>
        <div style={{ position: "absolute", top: "5%", left: "-5%", fontFamily: "var(--f-display)", fontWeight: 900, fontSize: "clamp(180px, 30vw, 480px)", lineHeight: 0.8, letterSpacing: "-0.05em", color: "var(--sky)", whiteSpace: "nowrap" }}>
          FREVIA
        </div>
      </div>

      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 80, flexWrap: "wrap" }}>
          <span className="sticker sky" style={{ background: "var(--sky)", color: "var(--navy-deep)" }}>Est. 2026</span>
          <span style={{ fontFamily: "var(--f-en)", fontSize: 12, letterSpacing: "0.16em", opacity: 0.7, textTransform: "uppercase" }}>Company · Profile · v2026</span>
        </div>

        <div className="marquee" style={{ marginBottom: 24 }}>
          <div className="marquee__track" style={{ fontFamily: "var(--f-display)", fontWeight: 900, fontSize: "clamp(72px, 14vw, 220px)", lineHeight: 1, color: "var(--sky)", letterSpacing: "-0.04em" }}>
            <span>{marqueeText.repeat(4)}</span>
            <span>{marqueeText.repeat(4)}</span>
          </div>
        </div>
        <div className="marquee" style={{ marginBottom: 80 }}>
          <div className="marquee__track" style={{ fontFamily: "var(--f-display)", fontWeight: 900, fontSize: "clamp(72px, 14vw, 220px)", lineHeight: 1, letterSpacing: "-0.04em", animationDirection: "reverse", animationDuration: "48s", color: "#fff" }}>
            <span>{marqueeText.repeat(4)}</span>
            <span>{marqueeText.repeat(4)}</span>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "end" }}>
          <p style={{ fontSize: 18, lineHeight: 1.95, opacity: 0.9, maxWidth: 520 }}>
            人手不足に悩む中小企業様に、デジタルマーケティング機能そのものを提供し、<br />
            日本の中小企業の成長スピードを最大化させます。
          </p>
          <div style={{ display: "flex", gap: 12, justifyContent: "flex-end" }}>
            <a href="#service" className="btn btn--terra" data-cursor="hover" onClick={(e) => {e.preventDefault();onNav("service");}}>
              サービス<span className="btn__arrow">→</span>
            </a>
            <a href="#contact" className="btn btn--ghost" data-cursor="hover" style={{ borderColor: "#fff", color: "#fff" }} onClick={(e) => {e.preventDefault();onNav("contact");}}>
              Contact
            </a>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Sections shared on Top ---------- */

function ScrollReveal({ children, delay = 0 }) {
  const ref = useRefTop(null);
  const [visible, setVisible] = useStateTop(false);
  useEffectTop(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) setVisible(true);});
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <div ref={ref} style={{ opacity: visible ? 1 : 0, transform: visible ? "translateY(0)" : "translateY(40px)", transition: `opacity 0.8s var(--easing) ${delay}s, transform 0.8s var(--easing) ${delay}s`, height: "100%" }}>
      {children}
    </div>);

}

function StatementSection() {
  return (
    <section style={{ padding: "160px 0", position: "relative" }}>
      <div className="container">
        {/* Top: eyebrow + headline */}
        <ScrollReveal>
          <span className="eyebrow">Why frevia exists</span>
          <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 900, fontSize: "clamp(44px, 7vw, 104px)", lineHeight: 1.18, letterSpacing: "-0.04em", marginTop: 24, textWrap: "balance", maxWidth: 1200 }}>
            <span style={{ color: "var(--terra)" }}>マーケティング</span>を、<br />
            企業の<span style={{ color: "var(--navy)" }}>自由</span>な「<u style={{ textDecorationColor: "var(--sky)", textDecorationThickness: "8px", textUnderlineOffset: "14px" }}>選択</u>」に。
          </h2>
        </ScrollReveal>

        {/* Body essay — single column, no photo */}
        <div style={{ marginTop: 80 }}>
          <ScrollReveal delay={0.1}>
            <div style={{ display: "flex", flexDirection: "column", gap: 32, maxWidth: 820, fontSize: "clamp(18px, 1.4vw, 21px)", lineHeight: 2.2, color: "var(--ink-2)", textWrap: "balance", wordBreak: "auto-phrase", lineBreak: "strict" }}>
              <p style={{ textWrap: "balance" }}>
                私たちは、単に運用を代行するだけの代理店ではありません。<br />
                戦略やノウハウをオープンにし、組織が自ら判断できる「<span style={{ color: "var(--ink)", fontWeight: 700 }}>基準</span>」を共に創り上げます。
              </p>
              <p style={{ textWrap: "balance" }}>
                私たちのゴールは、クライアントが特定の形に依存させるのではなく、変化し続けるビジネス環境において、常にベストな選択肢を手の中に持っている状態にすること。
              </p>
              <p style={{ textWrap: "balance" }}>
                自立を目指すプロセスも、高度なパートナーシップも、すべては貴社の成長のために。
              </p>
              <p style={{ textWrap: "balance" }}>
                freviaは、依存ではなく「<span style={{ color: "var(--navy)", fontWeight: 700 }}>自走</span>」と「<span style={{ color: "var(--navy)", fontWeight: 700 }}>共創</span>」を支える、最もフェアな伴走者であり続けます。
              </p>
            </div>
          </ScrollReveal>
        </div>
      </div>
    </section>);

}

function StyledIcon({ kind, color, size = 40 }) {
  // Refined branded SVG icon set.
  const c = color;
  if (kind === "triangle") {
    // Stacked layered triangles — "量×質"の層イメージ
    return (
      <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
        <path d="M20 4 L36 32 L4 32 Z" stroke={c} strokeWidth="1.8" strokeLinejoin="round" />
        <path d="M20 14 L30 30 L10 30 Z" fill={c} opacity="0.25" />
        <path d="M20 22 L26 30 L14 30 Z" fill={c} />
      </svg>
    );
  }
  if (kind === "circle") {
    // Cursor-target / bullseye — "LP改善の的中"
    return (
      <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
        <circle cx="20" cy="20" r="15" stroke={c} strokeWidth="1.8" />
        <circle cx="20" cy="20" r="9" stroke={c} strokeWidth="1.4" opacity="0.5" />
        <circle cx="20" cy="20" r="3.5" fill={c} />
        <line x1="20" y1="2" x2="20" y2="6" stroke={c} strokeWidth="1.6" strokeLinecap="round" />
        <line x1="20" y1="34" x2="20" y2="38" stroke={c} strokeWidth="1.6" strokeLinecap="round" />
        <line x1="2" y1="20" x2="6" y2="20" stroke={c} strokeWidth="1.6" strokeLinecap="round" />
        <line x1="34" y1="20" x2="38" y2="20" stroke={c} strokeWidth="1.6" strokeLinecap="round" />
      </svg>
    );
  }
  if (kind === "diamond") {
    // Radar / scope — "市場・ユーザー行動の解像度"
    return (
      <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
        <circle cx="20" cy="20" r="16" stroke={c} strokeWidth="1.6" />
        <line x1="4" y1="20" x2="36" y2="20" stroke={c} strokeWidth="1.2" opacity="0.45" />
        <line x1="20" y1="4" x2="20" y2="36" stroke={c} strokeWidth="1.2" opacity="0.45" />
        <path d="M20 20 L33 13 A 16 16 0 0 1 33 27 Z" fill={c} opacity="0.85" />
        <circle cx="20" cy="20" r="2.5" fill={c} />
      </svg>
    );
  }
  return null;
}

function ServicePreview({ onNav }) {
  const items = [
  {
    n: "01",
    title: "クリエイティブの量×質を担保",
    body: "仮説検証の圧倒的な回転数で、事業成長の「正解」を導き出す。",
    color: "var(--navy)",
    icon: "triangle"
  },
  {
    n: "02",
    title: "LP量産・改善でCVRを引き上げ",
    body: "ノーコードビルダー「Without」を活用。制作・修正無制限、最短1日で公開。A/Bテストもキャンペーン用LPも、追加コストゼロで。",
    color: "var(--navy)",
    icon: "circle"
  },
  {
    n: "03",
    title: "市場・ユーザー行動の解像度",
    body: "消費者モニターとWebユーザーの行動ログを覆う有料の分析ツールを導入。感覚ではなく、ユーザー行動・競合動向をデータドリブンに設計。",
    color: "var(--terra)",
    icon: "diamond"
  }];

  return (
    <section style={{ padding: "120px 0", position: "relative" }}>
      <div className="rail-right" />
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 64, flexWrap: "wrap", gap: 24 }}>
          <div>
            <span className="eyebrow">Strengths</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>
              <Kinetic text="強みは、" /><br />
              <Kinetic text="ぜんぶ自前で。" />
            </h2>
          </div>
          <Magnetic strength={0.22}>
            <a
              href="#service"
              className="btn-hero btn-hero--ghost"
              data-cursor="hover"
              onClick={(e) => { e.preventDefault(); onNav("service"); }}>
              <span className="btn-hero__label">事業内容をすべて見る</span>
              <span className="btn-hero__icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none">
                  <path d="M7 17L17 7M9 7h8v8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>
            </a>
          </Magnetic>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {items.map((it, i) => {
            const isDark = i === 1;
            const bg = i === 0 ? "var(--sky-soft)" : i === 1 ? "var(--navy-deep)" : "#FFFFFF";
            const numColor = i === 0 ? "var(--navy)" : i === 1 ? "var(--sky)" : "var(--terra)";
            const titleColor = isDark ? "#FFFFFF" : "var(--ink)";
            const bodyColor = isDark ? "rgba(255,255,255,0.88)" : "var(--ink-2)";
            const accent = i === 0 ? "var(--navy)" : i === 1 ? "var(--sky)" : "var(--terra)";
            const ghostColor = isDark
              ? "rgba(123, 199, 226, 0.10)"
              : i === 0
              ? "rgba(51, 92, 142, 0.07)"
              : "rgba(200, 70, 50, 0.06)";
            const stickerBg = isDark ? "rgba(123, 199, 226, 0.18)" : i === 0 ? "rgba(51, 92, 142, 0.12)" : "rgba(200, 70, 50, 0.10)";
            return (
              <ScrollReveal key={it.n} delay={i * 0.08}>
                <div
                  data-cursor="hover"
                  className="srv-card"
                  data-srv-idx={i}
                  style={{
                    background: bg,
                    border: isDark ? "none" : i === 2 ? "1.5px solid var(--line)" : "none",
                    borderRadius: 20,
                    padding: 32,
                    minHeight: 380,
                    height: "100%",
                    boxSizing: "border-box",
                    position: "relative",
                    overflow: "hidden",
                    boxShadow: isDark ? "0 24px 56px rgba(31,61,99,0.32)" : "0 10px 28px rgba(26,26,26,0.06)",
                    transition: "transform 0.5s var(--easing), box-shadow 0.5s var(--easing)",
                    cursor: "none"
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.transform = "translateY(-8px) rotate(-0.4deg)";
                    const g = e.currentTarget.querySelector("[data-ghost-num]");
                    if (g) g.style.transform = "translate(8px, -6px) rotate(-6deg)";
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.transform = "translateY(0) rotate(0)";
                    const g = e.currentTarget.querySelector("[data-ghost-num]");
                    if (g) g.style.transform = "translate(0,0) rotate(-4deg)";
                  }}>
                  {/* Decorative ghost number — playful oversized backdrop */}
                  <div
                    data-ghost-num
                    aria-hidden="true"
                    style={{
                      position: "absolute",
                      right: -28,
                      bottom: -72,
                      fontFamily: "var(--f-display)",
                      fontWeight: 900,
                      fontSize: 280,
                      lineHeight: 0.85,
                      letterSpacing: "-0.06em",
                      color: ghostColor,
                      pointerEvents: "none",
                      transform: "rotate(-4deg)",
                      transition: "transform 0.6s var(--easing)",
                      userSelect: "none"
                    }}>
                    {it.n}
                  </div>
                  {/* Tiny decorative dot cluster removed per user request */}
                  {/* top accent bar */}
                  <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 4, background: accent }} />

                  <div style={{ position: "relative", zIndex: 2 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 56 }}>
                      <span style={{ fontFamily: "var(--f-display)", fontWeight: 900, fontSize: 48, lineHeight: 1, letterSpacing: "-0.04em", color: numColor }}>{it.n}</span>
                      <span style={{ fontFamily: "var(--f-en)", fontSize: 10, fontWeight: 700, letterSpacing: "0.18em", color: numColor, padding: "5px 10px", borderRadius: 999, background: stickerBg, textTransform: "uppercase" }}>
                        Pillar
                      </span>
                      <div style={{ marginLeft: "auto" }}>
                        <StyledIcon kind={it.icon} color={accent} size={44} />
                      </div>
                    </div>
                    <h3 style={{ fontFamily: "var(--f-display)", fontWeight: 900, fontSize: "clamp(17px, 1.6vw, 22px)", lineHeight: 1.35, letterSpacing: "-0.04em", marginBottom: 18, color: titleColor, whiteSpace: "nowrap" }}>
                      {it.title}
                    </h3>
                    <p style={{ color: bodyColor, fontSize: 15.5, lineHeight: 1.9 }}>{it.body}</p>
                  </div>
                </div>
              </ScrollReveal>
            );
          })}
        </div>
      </div>
    </section>);

}

function StatIcon({ kind, color, size = 36 }) {
  if (kind === "cases") {
    // Stack of documents
    return (
      <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
        <rect x="10" y="6" width="20" height="24" rx="2" stroke={color} strokeWidth="1.8" />
        <rect x="14" y="10" width="20" height="24" rx="2" fill="var(--navy-deep)" stroke={color} strokeWidth="1.8" />
        <line x1="18" y1="18" x2="30" y2="18" stroke={color} strokeWidth="1.6" strokeLinecap="round" />
        <line x1="18" y1="23" x2="28" y2="23" stroke={color} strokeWidth="1.6" strokeLinecap="round" />
        <line x1="18" y1="28" x2="26" y2="28" stroke={color} strokeWidth="1.6" strokeLinecap="round" />
      </svg>
    );
  }
  if (kind === "industry") {
    // Grid of industry tiles
    return (
      <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
        <rect x="6" y="6" width="11" height="11" rx="1.5" stroke={color} strokeWidth="1.8" />
        <rect x="23" y="6" width="11" height="11" rx="1.5" fill={color} />
        <rect x="6" y="23" width="11" height="11" rx="1.5" fill={color} />
        <rect x="23" y="23" width="11" height="11" rx="1.5" stroke={color} strokeWidth="1.8" />
      </svg>
    );
  }
  if (kind === "support") {
    // Upward growth arrow
    return (
      <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
        <path d="M8 30 L18 20 L24 26 L34 12" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M26 12 L34 12 L34 20" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <circle cx="8" cy="30" r="2.5" fill={color} />
      </svg>
    );
  }
  return null;
}

function StatsRow() {
  const stats = [
  { num: "100+", suffix: "Cases", category: "運用案件数", label: "累計100案件以上の戦略立案・運用実績", color: "var(--sky)", textColor: "var(--ink)", icon: "cases", rotate: -2 },
  { num: "Multi", suffix: "Industry", category: "対応業界", label: "EC・住宅・BtoBなど、多種多様な業種への対応力", color: "#FFFFFF", textColor: "var(--ink)", icon: "industry", rotate: 1.5 },
  { num: "0→100", suffix: "Support", category: "予算規模", label: "小規模予算から月数千万規模まで、フェーズに合わせた最適化", color: "var(--terra)", textColor: "#fff", icon: "support", rotate: -1 }];

  return (
    <section style={{ padding: "80px 0 40px", background: "var(--navy-deep)", color: "#fff", marginTop: 60, position: "relative", overflow: "hidden" }}>
      <div className="rail-right" />

      {/* Decorative — large rotating ring */}
      <div style={{ position: "absolute", top: -100, right: -80, width: 360, height: 360, pointerEvents: "none", opacity: 0.5 }}>
        <svg viewBox="0 0 360 360" style={{ animation: "spin-slow 60s linear infinite" }}>
          <defs>
            <path id="stats-circ" d="M 180 180 m -140 0 a 140 140 0 1 1 280 0 a 140 140 0 1 1 -280 0" />
          </defs>
          <text fontFamily="var(--f-en)" fontSize="13" fontWeight="600" letterSpacing="6" fill="var(--sky)" opacity="0.6">
            <textPath href="#stats-circ">FREVIA · BY THE NUMBERS · 2026 · TRACK RECORD · </textPath>
          </text>
        </svg>
      </div>

      {/* Decorative dots */}
      <div style={{ position: "absolute", bottom: 20, left: 40, display: "grid", gridTemplateColumns: "repeat(8, 6px)", gap: 12, opacity: 0.25, pointerEvents: "none" }}>
        {Array.from({ length: 48 }).map((_, i) => (
          <div key={i} style={{ width: 6, height: 6, borderRadius: "50%", background: i % 7 === 0 ? "var(--terra)" : "var(--sky)" }} />
        ))}
      </div>

      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 16, flexWrap: "wrap" }}>
          <span className="eyebrow" style={{ color: "var(--sky)" }}>By the numbers</span>
          <span style={{ fontFamily: "var(--f-en)", fontSize: 12, opacity: 0.5, letterSpacing: "0.15em" }}>★ ★ ★</span>
        </div>
        <h2 style={{ marginTop: 16, fontFamily: "var(--f-display)", fontWeight: 900, fontSize: "clamp(32px, 5vw, 72px)", lineHeight: 1.1, letterSpacing: "-0.03em", color: "#fff", whiteSpace: "nowrap" }}>
          数字で見る<span style={{ display: "inline-block", padding: "2px 18px", background: "var(--terra)", borderRadius: 6, transform: "rotate(-1.5deg)", marginLeft: 8 }}>実績</span>
        </h2>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28, marginTop: 64 }}>
          {stats.map((s, i) =>
          <ScrollReveal key={i} delay={i * 0.08}>
              <div className="stat-card" style={{
                background: s.color,
                color: s.textColor,
                borderRadius: 24,
                padding: 32,
                minHeight: 360,
                position: "relative",
                overflow: "hidden",
                transform: `rotate(${s.rotate}deg)`,
                transition: "transform 0.5s var(--easing)",
                cursor: "default",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = "rotate(0deg) translateY(-6px) scale(1.02)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = `rotate(${s.rotate}deg)`; }}
              >
                {/* corner number badge */}
                <div style={{
                  position: "absolute", top: 18, right: 18,
                  padding: "5px 12px", borderRadius: 999,
                  background: s.textColor === "#fff" ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.08)",
                  color: s.textColor,
                  fontFamily: "var(--f-en)", fontSize: 11, fontWeight: 700, letterSpacing: "0.12em",
                  whiteSpace: "nowrap",
                }}>
                  0{i + 1}
                </div>

                {/* Top row: icon */}
                <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 32 }}>
                  <div style={{
                    width: 52, height: 52, borderRadius: 14,
                    background: s.textColor === "#fff" ? "rgba(255,255,255,0.18)" : "rgba(0,0,0,0.06)",
                    display: "grid", placeItems: "center",
                  }}>
                    <StatIcon kind={s.icon} color={s.textColor} size={28} />
                  </div>
                </div>

                {/* category labels */}
                <div className="eyebrow" style={{ color: s.textColor, opacity: 0.7 }}>{s.suffix}</div>
                <div style={{ marginTop: 8, fontFamily: "var(--f-display)", fontWeight: 900, fontSize: 28, color: s.textColor, letterSpacing: "-0.01em" }}>
                  {s.category}
                </div>

                {/* Big number block */}
                <div style={{
                  marginTop: 28,
                  fontFamily: "var(--f-display)", fontWeight: 900,
                  fontSize: "clamp(56px, 7vw, 110px)",
                  lineHeight: 0.92, letterSpacing: "-0.04em",
                  color: s.textColor,
                }}>
                  {s.num}
                </div>

                {/* Description */}
                <p style={{ marginTop: 24, fontSize: 15, opacity: 0.82, lineHeight: 1.85, textWrap: "pretty", color: s.textColor }}>{s.label}</p>

                {/* Faded background number */}
                <div style={{
                  position: "absolute", bottom: -50, right: -10,
                  fontFamily: "var(--f-display)", fontWeight: 900,
                  fontSize: 220, lineHeight: 1,
                  color: s.textColor, opacity: 0.06,
                  pointerEvents: "none",
                }}>
                  0{i + 1}
                </div>
              </div>
            </ScrollReveal>
          )}
        </div>

      </div>
    </section>);

}

function MembersPreview({ onNav }) {
  return (
    <section style={{ padding: "120px 0", position: "relative" }}>
      <div className="rail-right" />
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 64, flexWrap: "wrap", gap: 24 }}>
          <div>
            <span className="eyebrow">Representative</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>代表紹介</h2>
          </div>
          <Magnetic strength={0.22}>
            <a
              href="#about"
              className="btn-hero btn-hero--ghost"
              data-cursor="hover"
              onClick={(e) => { e.preventDefault(); onNav("about"); }}>
              <span className="btn-hero__label">会社概要を見る</span>
              <span className="btn-hero__icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none">
                  <path d="M7 17L17 7M9 7h8v8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>
            </a>
          </Magnetic>
        </div>

        <ScrollReveal>
          <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 48, alignItems: "start", background: "var(--bg-soft)", borderRadius: 24, padding: 48, position: "relative", overflow: "hidden" }}>
            {/* Label rail */}
            <div style={{ display: "flex", flexDirection: "column", gap: 16, minWidth: 80 }}>
              <span className="sticker sticker--terra">CEO</span>
              <span style={{ fontFamily: "var(--f-en)", fontSize: 11, fontWeight: 600, letterSpacing: "0.18em", color: "var(--ink-3)", textTransform: "uppercase", writingMode: "vertical-rl", marginTop: 12 }}>
                Shinnosuke · Morita
              </span>
            </div>

            {/* Bio */}
            <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", maxWidth: 880 }}>
              <span className="eyebrow">代表取締役</span>
              <h3 style={{ fontFamily: "var(--f-display)", fontWeight: 900, fontSize: "clamp(40px, 4.8vw, 72px)", letterSpacing: "-0.03em", lineHeight: 1.05, marginTop: 18 }}>
                森田 伸之介
              </h3>
              <div style={{ fontFamily: "var(--f-en)", fontSize: 16, fontWeight: 500, color: "var(--ink-3)", marginTop: 6 }}>
                Shinnosuke Morita
              </div>
              <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 18, fontSize: 15, lineHeight: 2.0, color: "var(--ink-2)" }}>
                <p>大学生時代、自ら野菜販売事業を立ち上げ、仕入れから販売までの一連のプロセスを経験。この「商売の原点」ともいえる実体験が、後のマーケティングキャリアの礎となりました。</p>
                <p>大学卒業後、ソフトバンクグループのWeb広告代理店に入社。アライアンス事業のプロジェクトマネージャーや新規営業本部のマネージャー、課長を歴任し、一貫して現場の最前線でマーケティング支援に従事しました。</p>
                <p>月額数十万円から数千万円規模まで、予算規模を問わず多種多様な案件に携わり、特にECや住宅業界において、戦略立案から運用、データ分析までを網羅する課題解決を主導。</p>
                <p>代理店としての豊富な支援実績と、組織マネジメントの経験を背景に、2026年1月、株式会社freviaを設立。「自走」を支援するマーケティングパートナーとして、企業の事業成長を牽引しています。</p>
              </div>
            </div>

            {/* corner accent */}
            <div style={{ position: "absolute", bottom: -40, right: -40, width: 200, height: 200, borderRadius: "50%", background: "var(--sky)", opacity: 0.18, pointerEvents: "none" }} />
          </div>
        </ScrollReveal>
      </div>
    </section>);

}

function CTASection({ onNav }) {
  return (
    <section style={{ padding: "160px 0", position: "relative", overflow: "hidden", background: "var(--bg-soft)" }}>
      <div className="rail-right" />
      <div className="container" style={{ textAlign: "center", position: "relative", zIndex: 2 }}>
        <span className="eyebrow" style={{ justifyContent: "center" }}>Get in touch</span>
        <h2 style={{ fontFamily: "var(--f-display)", fontWeight: 900, fontSize: "clamp(28px, 7.6vw, 120px)", lineHeight: 1.08, letterSpacing: "-0.04em", marginTop: 24, marginBottom: 48, color: "var(--ink)" }}>
          <span style={{ whiteSpace: "nowrap", display: "block" }}>ここから選びましょう。</span>
          <span style={{ whiteSpace: "nowrap", display: "block", color: "var(--navy)" }}>最適な「形」を。</span>
        </h2>
        <Magnetic strength={0.25}>
          <a href="#contact" className="btn btn--terra" data-cursor="hover" style={{ fontSize: 17, padding: "22px 36px" }} onClick={(e) => {e.preventDefault();onNav("contact");}}>
            お問い合わせはこちら<span className="btn__arrow">→</span>
          </a>
        </Magnetic>
      </div>
    </section>);

}

function TopPage({ onNav, heroVariant, heroBg }) {
  let Hero = HeroKinetic;
  if (heroVariant === "collage") Hero = HeroCollage;
  if (heroVariant === "marquee") Hero = HeroMarquee;
  return (
    <div className="page-wrap">
      <Hero onNav={onNav} bgStyle={heroBg} />
      <StatementSection />
      <ServicePreview onNav={onNav} />
      <StatsRow />
      <MembersPreview onNav={onNav} />
      <CTASection onNav={onNav} />
    </div>);

}

function HeroBackground({ variant }) {
  // Three background treatments for the Top hero.
  // grid:    subtle dot grid + soft gradient wash (default — calm but textured)
  // type:    massive "frevia" wordmark watermark + grid
  // motion:  flowing aurora-like radial gradients (more dynamic)
  if (variant === "type") {
    return (
      <div style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none", zIndex: 0 }}>
        <div style={{
          position: "absolute",
          inset: 0,
          background:
            "radial-gradient(ellipse at top right, rgba(123,199,226,0.18) 0%, transparent 50%), " +
            "radial-gradient(ellipse at bottom left, rgba(200,70,50,0.08) 0%, transparent 55%)",
        }} />
        <div style={{
          position: "absolute",
          inset: 0,
          backgroundImage: "radial-gradient(rgba(51,92,142,0.18) 1px, transparent 1px)",
          backgroundSize: "28px 28px",
          maskImage: "radial-gradient(ellipse at 30% 50%, #000 30%, transparent 75%)",
          WebkitMaskImage: "radial-gradient(ellipse at 30% 50%, #000 30%, transparent 75%)",
        }} />
        <div style={{
          position: "absolute",
          bottom: "-8%",
          right: "-4%",
          fontFamily: "var(--f-display)",
          fontWeight: 900,
          fontSize: "clamp(280px, 36vw, 640px)",
          lineHeight: 0.78,
          letterSpacing: "-0.06em",
          color: "var(--navy)",
          opacity: 0.04,
          userSelect: "none",
          whiteSpace: "nowrap",
        }}>
          frevia
        </div>
      </div>
    );
  }
  if (variant === "motion") {
    return (
      <div style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none", zIndex: 0 }}>
        <style>{`
          @keyframes aurora-a { 0%,100% { transform: translate(-5%, 0%) scale(1); } 50% { transform: translate(10%, -8%) scale(1.15); } }
          @keyframes aurora-b { 0%,100% { transform: translate(0%, 0%) scale(1); } 50% { transform: translate(-12%, 6%) scale(1.12); } }
          @keyframes aurora-c { 0%,100% { transform: translate(0%, 0%) scale(1); } 50% { transform: translate(6%, 10%) scale(1.08); } }
        `}</style>
        <div style={{ position: "absolute", top: "-20%", right: "-15%", width: 720, height: 720, borderRadius: "50%", background: "radial-gradient(circle, rgba(123,199,226,0.6) 0%, transparent 70%)", filter: "blur(30px)", animation: "aurora-a 18s ease-in-out infinite" }} />
        <div style={{ position: "absolute", bottom: "-25%", left: "-10%", width: 640, height: 640, borderRadius: "50%", background: "radial-gradient(circle, rgba(51,92,142,0.45) 0%, transparent 70%)", filter: "blur(30px)", animation: "aurora-b 22s ease-in-out infinite" }} />
        <div style={{ position: "absolute", top: "20%", left: "40%", width: 420, height: 420, borderRadius: "50%", background: "radial-gradient(circle, rgba(200,70,50,0.35) 0%, transparent 70%)", filter: "blur(40px)", animation: "aurora-c 14s ease-in-out infinite" }} />
        {/* fine grid overlay */}
        <div style={{
          position: "absolute",
          inset: 0,
          backgroundImage:
            "linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), " +
            "linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)",
          backgroundSize: "80px 80px",
          opacity: 0.4,
          maskImage: "radial-gradient(ellipse at center, #000 20%, transparent 80%)",
          WebkitMaskImage: "radial-gradient(ellipse at center, #000 20%, transparent 80%)",
        }} />
      </div>
    );
  }
  // grid (default)
  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none", zIndex: 0 }}>
      <div style={{
        position: "absolute",
        inset: 0,
        background:
          "radial-gradient(ellipse 60% 50% at 100% 0%, rgba(123,199,226,0.22) 0%, transparent 60%), " +
          "radial-gradient(ellipse 50% 60% at 0% 100%, rgba(51,92,142,0.10) 0%, transparent 60%), " +
          "radial-gradient(ellipse 30% 30% at 90% 90%, rgba(200,70,50,0.10) 0%, transparent 60%)",
      }} />
      <div style={{
        position: "absolute",
        inset: 0,
        backgroundImage: "radial-gradient(rgba(51,92,142,0.22) 1px, transparent 1px)",
        backgroundSize: "26px 26px",
        maskImage: "radial-gradient(ellipse at 35% 50%, #000 25%, transparent 75%)",
        WebkitMaskImage: "radial-gradient(ellipse at 35% 50%, #000 25%, transparent 75%)",
      }} />
      {/* corner ticker — small playful detail */}
      <div data-corner-ticker style={{
        position: "absolute",
        top: 140,
        right: 80,
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-end",
        gap: 8,
        fontFamily: "var(--f-en)",
        fontSize: 10,
        fontWeight: 600,
        letterSpacing: "0.2em",
        color: "var(--ink-3)",
        textTransform: "uppercase",
      }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--terra)", animation: "pulse 2s ease-in-out infinite" }} />
          Tokyo · 35°40&apos;N
        </span>
        <span>EST. 2026.01</span>
        <span>Marketing · Strategy · Inhouse</span>
      </div>
    </div>
  );
}

Object.assign(window, { TopPage });