/* global React, Icon, ASSET */

// ============== FEATURED PROJECTS ==============
function FeaturedProjects({ lang }) {
  const big = lang === "jp" ? [
    {
      num: "01", t: "SNS広告運用自動化SaaS（0→1立ち上げ）", cat: "SaaS / AdTech / 0→1", img: "components/project_cards/featured_project_01_marketing_automation.webp",
      rows: [
        ["役割", "事業責任者 / フルスタックエンジニア / PdM"],
        ["支援範囲", "市場分析・要件定義・アーキ設計・開発・リリース・CS体制構築"],
        ["技術スタック", "Next.js, React, TypeScript, Hono, GCP, Cloud Run, Terraform, Turborepo"],
        ["成果・インパクト", "ヒューマンエラー最大90%・広告運用工数最大90%削減を掲げてプレスリリース配信。"],
      ]
    },
    {
      num: "02", t: "AI採用評価SaaS『Enma』（個人事業 / 0→1立ち上げ中）", cat: "SaaS / HR Tech / AI / 0→1", img: "components/project_cards/featured_project_07_enma.webp",
      rows: [
        ["役割", "個人事業主 / プロダクトオーナー / フルスタックエンジニア"],
        ["支援範囲", "プロダクト企画・アーキ設計・開発・自社運用・継続改善"],
        ["技術スタック", "Next.js, React, TypeScript, AI / LLM 連携, クラウド"],
        ["成果・インパクト", "候補者の経歴・面接メモをAIで分析し『スキル盛り・受け身・ROI赤字・AI丸コピ』の4リスクを自動検出。自社採用で実運用しながら継続改善中、早期導入パートナー募集中。"],
      ]
    },
  ] : [
    {
      num: "01", t: "Social Ad Ops Automation SaaS (0→1)", cat: "SaaS / AdTech / 0→1", img: "components/project_cards/featured_project_01_marketing_automation.webp",
      rows: [
        ["Role", "Business owner / Full-stack engineer / PdM"],
        ["Scope", "Market analysis → requirements → architecture → build → release → CS"],
        ["Stack", "Next.js, React, TypeScript, Hono, GCP, Cloud Run, Terraform, Turborepo"],
        ["Impact", "Launched with public claim of up to 90% reduction in human error and ad-ops workload."],
      ]
    },
    {
      num: "02", t: "Enma — AI-Powered Hiring Intelligence (Solo venture, 0→1)", cat: "SaaS / HR Tech / AI / 0→1", img: "components/project_cards/featured_project_07_enma.webp",
      rows: [
        ["Role", "Founder / Product owner / Full-stack engineer"],
        ["Scope", "Product strategy, architecture, build, in-house ops, iteration"],
        ["Stack", "Next.js, React, TypeScript, AI / LLM integration, Cloud"],
        ["Impact", "AI flags 4 candidate risks (skill inflation, passive worker, ROI deficit, AI-generated content). In active in-house use, recruiting early-adopter partners."],
      ]
    },
  ];
  const small = lang === "jp" ? [
    { num: "03", t: "HR / チーム運営SaaS 機能開発・基盤刷新", cat: "SaaS / HR・チーム運営", img: "components/project_cards/featured_project_03_workflow_web_app.webp",
      rows: [["役割","フルスタックエンジニア（業務委託）"],["技術スタック","Next.js, AWS Amplify, GitHub Actions"],["成果・インパクト","コアフレームワークのメジャーバージョンアップをダウンタイムゼロで実施。"]] },
    { num: "04", t: "航空部品管理システムのフルスクラッチ開発", cat: "業務システム / フルスクラッチ", img: "components/project_cards/featured_project_04_hr_team_saas.webp",
      rows: [["役割","フルスタックエンジニア（業務委託）"],["技術スタック","Next.js 16 (RSC), React 19, Hono, Drizzle ORM, Playwright"],["成果・インパクト","航空部品管理システムをゼロから構築。RSC対応フロントとクリーンアーキ採用のAPIを設計・実装。"]] },
    { num: "05", t: "広告配信実績レポーティングDB基盤", cat: "データ基盤 / 広告データ", img: "components/project_cards/featured_project_05_data_dashboard.webp",
      rows: [["役割","フルスタックエンジニア / PM"],["技術スタック","AWS, GCP, サーバーレスデータパイプライン"],["成果・インパクト","複数広告プラットフォームAPIを統合し、広告配信実績のレポーティングDB基盤を構築。"]] },
    { num: "06", t: "美容系マッチングプラットフォーム管理画面リビルド", cat: "Web管理画面 / 0→1 リビルド", img: "components/project_cards/featured_project_06_zero_to_one_launch.webp",
      rows: [["役割","Web管理画面責任者（業務委託）"],["技術スタック","Next.js 16, React 19, AWS Amplify, Terraform"],["成果・インパクト","管理画面をフルスクラッチでリビルドし、コア機能を0から再構築。"]] },
  ] : [
    { num: "03", t: "HR / Team Ops SaaS — Features & Platform Refresh", cat: "SaaS / HR & Ops", img: "components/project_cards/featured_project_03_workflow_web_app.webp",
      rows: [["Role","Full-stack engineer (contract)"],["Stack","Next.js, AWS Amplify, GitHub Actions"],["Impact","Executed major version upgrades of core frameworks with zero downtime."]] },
    { num: "04", t: "Aircraft Parts Management System — Full-Scratch Build", cat: "Enterprise System / Full Scratch", img: "components/project_cards/featured_project_04_hr_team_saas.webp",
      rows: [["Role","Full-stack engineer (contract)"],["Stack","Next.js 16 (RSC), React 19, Hono, Drizzle ORM, Playwright"],["Impact","Built an aircraft-parts management system from scratch — RSC-based front-end and clean-architecture API end-to-end."]] },
    { num: "05", t: "Ad-Delivery Reporting DB Platform", cat: "Data Platform / Ads", img: "components/project_cards/featured_project_05_data_dashboard.webp",
      rows: [["Role","Full-stack engineer / PM"],["Stack","AWS, GCP, Serverless data pipelines"],["Impact","Integrated multiple ad-platform APIs into a single ad-delivery reporting database platform."]] },
    { num: "06", t: "Beauty-industry Matching Platform — Admin Rebuild", cat: "Web Admin / Rebuild", img: "components/project_cards/featured_project_06_zero_to_one_launch.webp",
      rows: [["Role","Admin web lead (contract)"],["Stack","Next.js 16, React 19, AWS Amplify, Terraform"],["Impact","Rebuilding the admin platform from scratch — every core function reconstructed."]] },
  ];

  return (
    <section id="projects" data-screen-label="05 Projects">
      <div className="container">
        <div className="section-head">
          <div>
            <h2 className="h-section">
              <small>FEATURED PROJECTS</small>
              {lang === "jp" ? "注目プロジェクト" : "Featured projects"}
            </h2>
            <p className="lead" style={{ maxWidth: 480, marginTop: 16 }}>
              {lang === "jp" ? "これまでにご支援したB2Bプロダクト・システム開発の一部をご紹介します。匿名化した事例のため、詳細な背景や構成は「もっと見る」からご覧いただけます。" : "Selected B2B product and system engagements. Cases are anonymized — full context available on request."}
            </p>
          </div>
          <div className="sh-right" style={{ display: "flex", justifyContent: "flex-end" }}>
            <div className="note-box">
              <span style={{ color: "var(--navy)" }}>{Icon.shield(18)}</span>
              <span><strong>{lang === "jp" ? "情報はすべて匿名化しています" : "All cases anonymized"}</strong><br />{lang === "jp" ? "クライアントの秘密保持のため、企業名・プロダクト名は非公開です。" : "Client names and products withheld for confidentiality."}</span>
            </div>
          </div>
        </div>

        <div className="projects-row">
          {big.map((p, i) => (
            <div className="proj reveal" key={i} style={{ transitionDelay: `${i*80}ms` }}>
              <div className="img"><img className="visual-img" src={ASSET(p.img)} alt="" /></div>
              <div>
                <div className="num-row"><span className="num">{p.num}</span></div>
                <h3 className="h-card">{p.t}</h3>
                <div className="cat">{p.cat}</div>
                <dl>
                  {p.rows.map(([k,v], j) => (
                    <div key={j}><dt>{k}</dt><dd>{v}</dd></div>
                  ))}
                </dl>
              </div>
            </div>
          ))}
        </div>

        <div className="projects-grid-4">
          {small.map((p, i) => (
            <div className="proj-sm-card reveal" key={i} style={{ transitionDelay: `${i*60}ms` }}>
              <div className="img"><img className="visual-img" src={ASSET(p.img)} alt="" /></div>
              <div className="num-row"><span className="num">{p.num}</span></div>
              <h3 className="h-card">{p.t}</h3>
              <div className="cat">{p.cat}</div>
              <dl>
                {p.rows.map(([k,v], j) => (
                  <div key={j}><dt>{k}</dt><dd>{v}</dd></div>
                ))}
              </dl>
            </div>
          ))}
        </div>

        <div style={{ display: "flex", justifyContent: "center", marginTop: 40 }}>
          <a href="projects.html" className="btn btn-ghost">{lang === "jp" ? "実績一覧をすべて見る" : "View all projects"} <span className="arrow">{Icon.arrow(14)}</span></a>
        </div>
      </div>
    </section>
  );
}

// ============== PROFILE ==============
function Profile({ lang }) {
  return (
    <section id="profile" data-screen-label="06 Profile">
      <div className="container">
        <div className="profile-intro">
          <div>
            <h2 className="h-section">
              <small>PROFILE</small>
              {lang === "jp" ? "プロフィール" : "Profile"}
            </h2>
          </div>
          <div className="sh-right">
            <p className="lead" style={{ margin: 0 }}>
              {lang === "jp" ? "ソフトウェアエンジニア / PdMとして5年以上の経験を持ち、現在はSNS広告運用自動化SaaSの0→1立ち上げを事業責任者として推進中。業務委託として複数のSaaS・Web開発にも並行して関わり、企画から開発・運用まで一気通貫で支援します。" : "Software engineer & PdM with 5+ years of experience. Currently leading the 0→1 launch of a social ad-ops automation SaaS as business owner, while partnering on several SaaS and web engagements as a contractor — end-to-end from idea to operation."}
            </p>
          </div>
        </div>

        <div className="profile-grid">
          <div className="profile-card reveal">
            <div className="profile-photo"><img className="visual-img portrait-img" src={ASSET("components/profile/profile_headshot.webp")} alt="Kenya Fujisaki portrait" /></div>
            <div className="profile-info">
              <h3>Kenya Fujisaki</h3>
              <div className="role-line">{lang === "jp" ? "ソフトウェアエンジニア / PdM（事業責任者・業務委託）" : "Software Engineer / PdM (Business Owner & Contractor)"}</div>
              <div className="meta">
                <div>{Icon.pin(14)}<span>{lang === "jp" ? "東京拠点（リモートワーク可）" : "Based in Tokyo (Remote OK)"}</span></div>
                <div>{Icon.globe(14)}<span>{lang === "jp" ? "日本語（ネイティブ） / 英語（CEFR C1）" : "Japanese (Native) / English (CEFR C1)"}</span></div>
              </div>
              <p>{lang === "jp" ? "SaaS・AdTech・業務自動化・データ活用の領域で、要件定義からアーキ設計・実装・運用までを担当。ビジネス課題を起点に、ユーザーと事業の双方に価値あるプロダクトをスピーディに届けることを大切にしています。" : "Across SaaS, AdTech, automation, and data — covering requirements, architecture, build, and operations. Business-rooted, user-centered delivery."}</p>
              <div className="badges">
                <div className="badge"><span className="ico">{Icon.laurel(18)}</span><b>{lang === "jp" ? "5年以上の経験" : "5+ years"}</b><span style={{color:"var(--muted)"}}>{lang === "jp" ? "多様な業界・規模" : "Diverse industries"}</span></div>
                <div className="badge"><span className="ico">{Icon.rocket(18)}</span><b>{lang === "jp" ? "0→1 SaaS立ち上げ" : "0→1 SaaS launch"}</b><span style={{color:"var(--muted)"}}>{lang === "jp" ? "事業責任者として推進" : "As business owner"}</span></div>
                <div className="badge"><span className="ico">{Icon.globe(18)}</span><b>{lang === "jp" ? "CEFR C1 英語" : "CEFR C1 EN"}</b><span style={{color:"var(--muted)"}}>{lang === "jp" ? "Cambridge CAE取得" : "Cambridge CAE"}</span></div>
                <div className="badge"><span className="ico">{Icon.building(18)}</span><b>{lang === "jp" ? "東京拠点" : "Tokyo-based"}</b><span style={{color:"var(--muted)"}}>{lang === "jp" ? "リモート可" : "Remote OK"}</span></div>
              </div>
              <div className="stack-tags">
                {["SaaS","AdTech","0→1","Automation","Data","Cloud","PdM"].map((t, i) => <span className="chip" key={i}>{t}</span>)}
              </div>
            </div>
          </div>

          <div className="career-card reveal">
            <img className="career-photo" src={ASSET("visual_assets/career_laptop_photo.webp")} alt="" />
            <h3>{lang === "jp" ? "キャリアハイライト" : "Career highlights"}</h3>
            <div className="timeline">
              {[
                { yr: "2020–2022", t: lang==="jp"?"バックエンド / フルスタックエンジニア（長期インターン）":"Backend / Full-stack engineer (Intern)", d: lang==="jp"?"D2C向けECカートシステム等のサービス開発に長期インターンとして参画。Stripe決済機能のバックエンド実装やRuby on Railsによる新機能開発を担当。":"Joined a D2C e-commerce cart system project as a long-term intern — Stripe payments backend and Ruby on Rails feature development." },
                { yr: "2022–2024", t: lang==="jp"?"フルスタックエンジニア / PM（デジタル広告領域）":"Full-stack engineer / PM (Digital Ads)", d: lang==="jp"?"広告入稿自動化システムを新規開発し、月250時間以上の業務削減を実現。社内1,000名以上が使う広告配信シミュレーション・予測システムや広告配信実績レポーティングDB基盤の設計・開発・運用を担当。":"Built an ad-submission automation system that saved 250+ hrs/mo. Designed, built, and operated an ad-delivery simulation system used by 1,000+ in-house operators, and an ad-delivery reporting DB platform." },
                { yr: "2024–現在", t: lang==="jp"?"事業責任者 / フルスタックエンジニア（広告自動化SaaS 0→1）":"Business owner / Full-stack engineer (Ad-ops SaaS 0→1)", d: lang==="jp"?"SNS広告運用自動化SaaSの0→1立ち上げを事業責任者として統括。プロダクト戦略・アーキ設計・開発・PR・CS体制構築までを一気通貫で推進。":"Owning the 0→1 launch of a social ad-ops automation SaaS — strategy, architecture, build, PR, and customer success.", current: true },
                { yr: "2024–現在", t: lang==="jp"?"業務委託フルスタックエンジニア（複数SaaS / Web）":"Contract Full-stack Engineer (Multiple SaaS / Web)", d: lang==="jp"?"並行して複数のSaaS・Web開発に業務委託として関わり、Next.js / Hono / AWS / Terraformによる設計・実装、フレームワーク移行、CI/CD再構築、管理画面のフルスクラッチリビルド等を担当。":"In parallel, partner on several SaaS / web engagements as a contractor — Next.js / Hono / AWS / Terraform builds, framework migrations, CI/CD rebuilds, full admin rebuilds.", current: true },
              ].map((it, i) => (
                <div className={`tl-item${it.current ? " current" : ""}`} key={i}>
                  <div className="yr">{it.yr}</div>
                  <h4>{it.t}</h4>
                  <p>{it.d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="values-bar reveal">
          <h3 style={{ gridColumn: "1 / -1", fontSize: 14, marginBottom: 4, color: "var(--ink)" }}>{lang === "jp" ? "得意とする価値提供" : "Where I add value"}</h3>
          {(lang === "jp" ? [
            "ビジネス課題を起点としたプロダクト戦略・要件定義",
            "データ活用・ダッシュボードによる意思決定の支援",
            "モダンな技術スタックによる高品質な設計・開発",
            "アジャイルな改善サイクルでの継続的な価値向上",
          ] : [
            "Business-rooted product strategy and requirements",
            "Data and dashboards that improve decisions",
            "High-quality design and engineering with modern stacks",
            "Continuous improvement through agile delivery",
          ]).map((v, i) => (
            <div className="v" key={i}><span className="check">✓</span>{v}</div>
          ))}
        </div>

        <div className="profile-bottom reveal">
          <div className="ico">{Icon.handshake(22)}</div>
          <div>
            <h3>{lang === "jp" ? "一緒に取り組みたいこと" : "What I'd love to build with you"}</h3>
            <p>{lang === "jp" ? "SaaS・自動化・データ活用など、プロダクトの企画からグロースまで幅広くご支援します。まずはお気軽にご相談ください。" : "SaaS, automation, data — concept to growth. Reach out, even just to talk."}</p>
          </div>
          <div className="actions">
            <a href="#projects" className="btn btn-ghost">{lang === "jp" ? "実績を見る" : "View work"} <span className="arrow">{Icon.arrow(14)}</span></a>
            <a href="#contact" className="btn btn-primary">{lang === "jp" ? "無料で案件相談する" : "Get a free consultation"} <span className="arrow">{Icon.arrow(14)}</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.FeaturedProjects = FeaturedProjects;
window.Profile = Profile;