/* global React, Icon */
const { useState, useEffect, useRef } = React;
const ASSET = (path) => `assets/lp/${path}`;
window.ASSET = ASSET;

// ============== COPY (JP/EN) ==============
const C = {
  nav: {
    jp: ["プロジェクト", "サービス", "プロフィール", "お問い合わせ"],
    en: ["Projects", "Services", "Profile", "Contact"],
    sections: ["projects", "services", "profile", "contact"],
    cta: { jp: "無料案件相談", en: "Free Consult" },
  },
  hero: {
    tagline: {
      jp: "現在、新規案件のご相談を受付中",
      en: "Now accepting new project inquiries",
    },
    cta_micro: {
      jp: ["完全無料", "1分で完了", "24時間以内に返信"],
      en: ["100% Free", "1-min form", "Reply within 24h"],
    },
    title: {
      jp: ["事業理解から伴走する", "フルスタックエンジニア / PdM"],
      en: ["Full-stack engineer who", "partners from business to product."],
    },
    desc: {
      jp: "SaaS開発、広告運用自動化、業務改善システム、データ活用を、事業理解から設計・実装・改善まで一気通貫で支援します。",
      en: "SaaS, ad-ops automation, internal tools, and data platforms — designed, built, and improved end-to-end with deep business context.",
    },
    cta1: { jp: "無料で案件相談する", en: "Get a free consultation" },
    cta2: { jp: "実績を見る", en: "View work" },
  },
};

// ============== HEADER ==============
function Header({ lang, setLang }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    if (!menuOpen) return;
    const onClick = (e) => {
      if (!e.target.closest(".mobile-menu") && !e.target.closest(".menu-toggle")) {
        setMenuOpen(false);
      }
    };
    const onResize = () => { if (window.innerWidth > 960) setMenuOpen(false); };
    document.addEventListener("click", onClick);
    window.addEventListener("resize", onResize);
    return () => {
      document.removeEventListener("click", onClick);
      window.removeEventListener("resize", onResize);
    };
  }, [menuOpen]);
  const labels = C.nav[lang];
  return (
    <header className="site-header" style={scrolled ? { boxShadow: "0 1px 0 rgba(15,27,61,.05)" } : {}}>
      <div className="container nav">
        <a href="#top" className="brand">
          <div className="mark">KF</div>
          <div>
            <div className="name">Kenya Fujisaki</div>
            <div className="role">Full-stack Engineer / PdM</div>
          </div>
        </a>
        <nav className="nav-links">
          {labels.map((l, i) => (
            <a key={i} href={`#${C.nav.sections[i]}`}>{l}</a>
          ))}
        </nav>
        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
          <div className="lang-toggle" role="tablist">
            <button className={lang === "jp" ? "active" : ""} onClick={() => setLang("jp")}>JP</button>
            <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
          <a href="#contact" className="btn btn-primary btn-sm">
            {C.nav.cta[lang]} <span className="arrow">{Icon.arrow(14)}</span>
          </a>
          <button className="menu-toggle" aria-label="Menu" onClick={() => setMenuOpen(v => !v)}>
            {menuOpen ? (
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6L6 18M6 6l12 12" /></svg>
            ) : (
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18M3 12h18M3 18h18" /></svg>
            )}
          </button>
        </div>
      </div>
      <div className={`mobile-menu${menuOpen ? " open" : ""}`}>
        {labels.map((l, i) => (
          <a key={i} href={`#${C.nav.sections[i]}`} onClick={() => setMenuOpen(false)}>{l}</a>
        ))}
        <hr />
        <a href="https://github.com/kenya6565" target="_blank" rel="noreferrer">GitHub<span className="ext">External</span></a>
        <a href="https://www.linkedin.com/in/kenya-fujisaki-93a4ba185/" target="_blank" rel="noreferrer">LinkedIn<span className="ext">External</span></a>
        <a href="https://www.wantedly.com/id/kenya_fujisaki" target="_blank" rel="noreferrer">Wantedly<span className="ext">External</span></a>
      </div>
    </header>
  );
}

// ============== HERO ==============
function Hero({ lang }) {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <p className="hero-tagline">{C.hero.tagline[lang]}</p>
            <h1 className="h-display">
              {lang === "jp" ? (
                <>
                  事業理解から<span className="accent">伴走する</span><br />
                  フルスタックエンジニア<span style={{ color: "var(--muted-2)", fontWeight: 600 }}> / </span>PdM
                </>
              ) : (
                <>
                  Full-stack engineer who<br /><span className="accent">partners</span> end-to-end.
                </>
              )}
            </h1>
            <div className="hero-rule"></div>
            <p className="hero-desc">{C.hero.desc[lang]}</p>
            <div className="hero-ctas">
              <a href="#contact" className="btn btn-primary">{C.hero.cta1[lang]} <span className="arrow">{Icon.arrow(14)}</span></a>
              <a href="#projects" className="btn btn-ghost">{C.hero.cta2[lang]} <span className="arrow">{Icon.arrow(14)}</span></a>
            </div>
            <div className="cta-microcopy">
              {C.hero.cta_micro[lang].map((t, i) => (
                <span className="item" key={i}>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
                  {t}
                </span>
              ))}
            </div>
          </div>
          <div className="hero-visual">
            <div className="hero-bg"></div>
            <img src={ASSET("visual_assets/hero_laptop_dashboard.webp")} alt="Dashboard preview"
              style={{ top: 0, left: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "right center", borderRadius: 22 }} />
          </div>
        </div>
        <Stats lang={lang} />
      </div>
    </section>
  );
}

function Stats({ lang }) {
  const items = lang === "jp" ? [
    { ico: Icon.laurel(20), num: "5年以上の実務経験", lbl: "SaaS・AdTech・データ領域を網羅、即戦力として参画" },
    { ico: Icon.rocket(20), num: "0→1 SaaS立ち上げ実績", lbl: "事業責任者として推進中、企画から運用まで一貫" },
    { ico: Icon.clock(20), num: "月250時間以上の削減実績", lbl: "業務自動化・AI活用で大幅な工数削減を実現" },
    { ico: Icon.sparkle(20), num: "AI開発加速", lbl: "Claude / Cursor / GitHub Copilot で生産性最大化" },
    { ico: Icon.cloud(20), num: "AWS / GCP / Azure / Cloudflare", lbl: "マルチクラウドでスケーラブルな基盤を設計・運用" },
    { ico: Icon.globe(20), num: "海外2年・CEFR C1英語", lbl: "豪・印で計2年。英語案件・グローバル開発OK" },
  ] : [
    { ico: Icon.laurel(20), num: "5+ Years Experience", lbl: "SaaS / AdTech / Data — ready to ship from day one" },
    { ico: Icon.rocket(20), num: "0→1 SaaS Launch", lbl: "Owning as business lead, concept to operations" },
    { ico: Icon.clock(20), num: "250+ hrs/mo Saved", lbl: "Through automation and AI-assisted workflows" },
    { ico: Icon.sparkle(20), num: "AI Dev Acceleration", lbl: "Claude / Cursor / GitHub Copilot for max velocity" },
    { ico: Icon.cloud(20), num: "AWS / GCP / Azure / Cloudflare", lbl: "Multi-cloud, scalable infrastructure — designed and operated" },
    { ico: Icon.globe(20), num: "2 yrs Abroad · CEFR C1 EN", lbl: "Australia + India. English-language projects welcome" },
  ];
  return (
    <div className="stats">
      {items.map((s, i) => (
        <div className="stat reveal" key={i} style={{ transitionDelay: `${i * 70}ms` }}>
          <div className="ico">{s.ico}</div>
          <div>
            <div className="num">{s.num}</div>
            <div className="lbl">{s.lbl}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ============== REASONS ==============
function Reasons({ lang }) {
  const items = lang === "jp" ? [
    { num: "01", t: "事業理解", d: "実務経験で培った事業理解力をもとに、課題の本質を捉え、ビジネス成果に直結する提案を行います。", img: "components/cards/reason_card_business_understanding.webp" },
    { num: "02", t: "プロダクト思考", d: "ユーザー価値と事業価値の両立を重視。プロダクト全体を見通し、継続的に価値を生み出す設計を行います。", img: "components/cards/reason_card_product_thinking.webp" },
    { num: "03", t: "技術の幅広さ", d: "モダンなフルスタック技術に精通し、アーキテクチャ設計からインフラまで柔軟に最適解を提供します。", img: "components/cards/reason_card_technical_breadth.webp" },
    { num: "04", t: "実行スピード", d: "小さく始めて素早く検証し、迅速に改善するアジャイルな進め方で、成果創出までの時間を短縮します。", img: "components/cards/reason_card_execution_speed.webp" },
  ] : [
    { num: "01", t: "Business Insight", d: "Years of in-house experience let me grasp the real problem and propose solutions tied to outcomes.", img: "components/cards/reason_card_business_understanding.webp" },
    { num: "02", t: "Product Thinking", d: "I balance user value and business value, designing for continuous, compounding outcomes.", img: "components/cards/reason_card_product_thinking.webp" },
    { num: "03", t: "Technical Breadth", d: "Fluent across modern stacks — from architecture to infra — for the right tool, every time.", img: "components/cards/reason_card_technical_breadth.webp" },
    { num: "04", t: "Speed of Execution", d: "Start small, validate fast, iterate often. Agile delivery that shortens time-to-value.", img: "components/cards/reason_card_execution_speed.webp" },
  ];
  return (
    <section id="reasons" data-screen-label="02 Reasons">
      <div className="container">
        <div className="section-head">
          <div>
            <h2 className="h-section">
              <small>WHY ME</small>
              {lang === "jp" ? "選ばれる理由" : "Why work with me"}
            </h2>
          </div>
          <div className="sh-right">
            <p className="lead" style={{ margin: 0 }}>
              {lang === "jp"
                ? "戦略から開発・運用までを一気通貫で支援し、ビジネスの成長を加速させるパートナーとして伴走します。"
                : "Strategy through development and operations — a long-term partner committed to your growth."}
            </p>
          </div>
        </div>
        <div className="reasons-grid">
          {items.map((r, i) => (
            <div className="reason reveal" key={i} style={{ transitionDelay: `${i * 90}ms` }}>
              <div className="num">{r.num}</div>
              <h3 className="h-card">{r.t}</h3>
              <p>{r.d}</p>
              <div className="ph"><img className="visual-img" src={ASSET(r.img)} alt="" /></div>
            </div>
          ))}
        </div>
        <div className="banner reveal">
          <div className="banner-icon">{Icon.layers(22)}</div>
          <div>
            <h3>{lang === "jp" ? "戦略立案から開発・運用まで、エンドツーエンドでサポート。" : "End-to-end support, from strategy to operations."}</h3>
            <p>{lang === "jp" ? "事業の成長にコミットし、長期的な価値創出に貢献します。" : "Committed to your growth and long-term value creation."}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function PlaceholderArt({ kind }) {
  const stroke = "rgba(15,27,61,0.35)";
  if (kind === "strategy") return (
    <svg width="160" height="80" viewBox="0 0 160 80" fill="none">
      <rect x="20" y="14" width="120" height="56" rx="4" stroke={stroke} strokeWidth="1" />
      <path d="M30 50 L55 35 L80 45 L110 25 L135 38" stroke={stroke} strokeWidth="1.2" />
      <circle cx="55" cy="35" r="2" fill={stroke} />
      <circle cx="80" cy="45" r="2" fill={stroke} />
      <circle cx="110" cy="25" r="2" fill={stroke} />
    </svg>
  );
  if (kind === "product") return (
    <svg width="160" height="80" viewBox="0 0 160 80" fill="none">
      <rect x="20" y="14" width="60" height="56" rx="4" stroke={stroke} strokeWidth="1" />
      <rect x="84" y="14" width="56" height="26" rx="3" stroke={stroke} strokeWidth="1" />
      <rect x="84" y="44" width="56" height="26" rx="3" stroke={stroke} strokeWidth="1" />
      <path d="M30 28h40M30 36h30M30 44h35M30 52h25" stroke={stroke} strokeWidth="1" />
    </svg>
  );
  if (kind === "code") return (
    <svg width="160" height="80" viewBox="0 0 160 80" fill="none">
      <rect x="20" y="14" width="120" height="56" rx="4" fill="#0F1B3D" />
      <path d="M40 32l-6 6 6 6M70 32l6 6-6 6M58 28l-6 24" stroke="#C9A96E" strokeWidth="1.4" />
      <path d="M88 36h36M88 44h28M88 52h32" stroke="rgba(255,255,255,.4)" strokeWidth="1" />
    </svg>
  );
  if (kind === "kanban") return (
    <svg width="180" height="80" viewBox="0 0 180 80" fill="none">
      {[0,1,2,3].map(i => (
        <g key={i} transform={`translate(${10 + i*42}, 12)`}>
          <rect width="36" height="56" rx="3" stroke={stroke} strokeWidth="1" />
          <rect x="6" y="8" width="24" height="6" rx="1" fill={i < 2 ? "#C9D8E8" : stroke} fillOpacity={i<2 ? 1 : 0.15} />
          <rect x="6" y="20" width="24" height="6" rx="1" fill={stroke} fillOpacity="0.15" />
          {i === 1 && <rect x="6" y="32" width="24" height="6" rx="1" fill="#C9D8E8" />}
        </g>
      ))}
    </svg>
  );
  return null;
}

window.Header = Header;
window.Hero = Hero;
window.Reasons = Reasons;
window.C = C;