/* global React, Icon, ASSET */
// ============== SERVICES ==============
function Services({ lang }) {
  const items = lang === "jp" ? [
    { ico: Icon.users(20), t: "プロダクト開発パートナー", d: "企画・要件定義から設計、開発、リリース後の改善まで、事業に寄り添う開発パートナーとして伴走します。", tags: ["要件定義","アーキテクチャ設計","MVP開発","継続的改善"], img: "components/service_cards/service_card_product_development_partner.webp" },
    { ico: Icon.code(20), t: "フルスタックWeb開発", d: "モダンな技術スタックで、スケーラブルで保守性の高いWebアプリケーションを開発します。", tags: ["Next.js","TypeScript","API","クラウド"], img: "components/service_cards/service_card_full_stack_web_development.webp" },
    { ico: Icon.sparkle(20), t: "AI導入支援 / 開発自動化", d: "Claude / Cursor / GitHub Copilot などの最新ツールを活用し、開発・業務の自動化や品質向上を支援。LLM API連携やAIエージェント設計まで対応します。", tags: ["Claude","Cursor","GitHub Copilot","LLM API","AIエージェント"], img: "components/service_cards/service_card_pdm_advisor.webp" },
    { ico: Icon.bullhorn(20), t: "広告運用自動化 / AdTech", d: "広告運用の自動化、レポーティングの効率化、AIを活用した運用最適化を支援します。", tags: ["自動化","API連携","レポーティング","AI活用"], img: "components/service_cards/service_card_adtech_automation.webp" },
    { ico: Icon.chart(20), t: "データダッシュボード / データ基盤", d: "データの可視化から基盤構築まで、意思決定を加速するデータ活用環境を構築します。", tags: ["ダッシュボード","データ基盤","KPI設計","データモデリング"], img: "components/service_cards/service_card_data_dashboard.webp" },
    { ico: Icon.user(20), t: "PdM / テクニカルアドバイザー", d: "プロダクト戦略の立案や技術選定、チーム支援まで、事業と開発の橋渡し役として価値を提供します。", tags: ["プロダクト戦略","技術選定","チーム支援","壁打ち"], img: "components/service_cards/service_card_product_development_partner.webp" },
  ] : [
    { ico: Icon.users(20), t: "Product Partner", d: "From idea to roadmap to release and beyond — a delivery partner aligned to your business.", tags: ["Requirements","Architecture","MVP","Iteration"], img: "components/service_cards/service_card_product_development_partner.webp" },
    { ico: Icon.code(20), t: "Full-stack Web", d: "Scalable, maintainable web apps built with modern stacks and cloud-native architectures.", tags: ["Next.js","TypeScript","API","Cloud"], img: "components/service_cards/service_card_full_stack_web_development.webp" },
    { ico: Icon.sparkle(20), t: "AI Adoption / Dev Automation", d: "Hands-on with Claude, Cursor, GitHub Copilot and beyond — I help teams adopt AI for development speed, quality, and operational automation. LLM integrations and AI agent design included.", tags: ["Claude","Cursor","GitHub Copilot","LLM API","AI Agents"], img: "components/service_cards/service_card_pdm_advisor.webp" },
    { ico: Icon.bullhorn(20), t: "Ad Ops / AdTech", d: "Automate operations, streamline reporting, and apply AI to lift performance and reduce toil.", tags: ["Automation","Integrations","Reporting","AI"], img: "components/service_cards/service_card_adtech_automation.webp" },
    { ico: Icon.chart(20), t: "Data Dashboards / Platform", d: "From visualization to platform — environments that accelerate data-driven decisions.", tags: ["Dashboards","Platform","KPI","Modeling"], img: "components/service_cards/service_card_data_dashboard.webp" },
    { ico: Icon.user(20), t: "PdM / Tech Advisor", d: "Product strategy, tech selection, team enablement — the bridge between business and engineering.", tags: ["Strategy","Tech Selection","Coaching","Sparring"], img: "components/service_cards/service_card_product_development_partner.webp" },
  ];
  return (
    <section id="services" data-screen-label="03 Services">
      <div className="container">
        <div className="section-head">
          <div>
            <h2 className="h-section">
              <small>SERVICES</small>
              {lang === "jp" ? "サービス" : "What I do"}
            </h2>
          </div>
          <div className="sh-right">
            <p className="lead" style={{ margin: 0 }}>
              {lang === "jp" ? "プロダクトの企画から開発、運用・グロースまで、事業の成長に必要な技術と知見をワンストップで提供します。" : "From concept to launch to growth — the engineering know-how your business needs, in one place."}
            </p>
          </div>
        </div>
        <div className="services-grid">
          {items.map((s, i) => (
            <div className="service reveal" key={i} style={{ transitionDelay: `${i*70}ms` }}>
              <div className="img"><img className="visual-img" src={ASSET(s.img)} alt="" /></div>
              <div className="body">
                <div className="ico">{s.ico}</div>
                <h3 className="h-card">{s.t}</h3>
                <p>{s.d}</p>
                <div className="tags">
                  {s.tags.map((t, j) => <span className="chip" key={j}>{t}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="cta-banner reveal">
          <div className="ico">{Icon.chat(22)}</div>
          <div>
            <h3>{lang === "jp" ? "プロジェクトのご相談はこちら" : "Talk about your project"}</h3>
            <p>{lang === "jp" ? "課題の整理や構想段階からのご相談も歓迎です。お気軽に、お持ちのアイデアやお困りごとをお聞かせください。" : "Discovery and early-stage discussions welcome — bring your ideas or your blockers."}</p>
          </div>
          <div className="spacer"></div>
          <a href="#contact" className="btn btn-primary">{lang === "jp" ? "無料で案件相談する" : "Get a free consultation"} <span className="arrow">{Icon.arrow(14)}</span></a>
        </div>
      </div>
    </section>
  );
}

// ============== TECH STACK ==============
function TechStack({ lang }) {
  // Icon URLs — simple-icons CDN (transparent, brand-color SVGs) with devicon fallback for AWS / Playwright.
  const ICO = {
    react: "https://cdn.simpleicons.org/react/61DAFB",
    next: "https://cdn.simpleicons.org/nextdotjs/000000",
    ts: "https://cdn.simpleicons.org/typescript/3178C6",
    tailwind: "https://cdn.simpleicons.org/tailwindcss/06B6D4",
    mui: "https://cdn.simpleicons.org/mui/007FFF",
    shadcn: "https://cdn.simpleicons.org/shadcnui/000000",
    node: "https://cdn.simpleicons.org/nodedotjs/5FA04E",
    hono: "https://cdn.simpleicons.org/hono/E36002",
    go: "https://cdn.simpleicons.org/go/00ADD8",
    python: "https://cdn.simpleicons.org/python/3776AB",
    rails: "https://cdn.simpleicons.org/rubyonrails/D30001",
    graphql: "https://cdn.simpleicons.org/graphql/E10098",
    drizzle: "https://cdn.simpleicons.org/drizzle/C5F74F",
    aws: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-plain-wordmark.svg",
    gcp: "https://cdn.simpleicons.org/googlecloud/4285F4",
    azure: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg",
    cloudflare: "https://cdn.simpleicons.org/cloudflare/F38020",
    docker: "https://cdn.simpleicons.org/docker/2496ED",
    vercel: "https://cdn.simpleicons.org/vercel/000000",
    terraform: "https://cdn.simpleicons.org/terraform/7B42BC",
    githubactions: "https://cdn.simpleicons.org/githubactions/2088FF",
    turborepo: "https://cdn.simpleicons.org/turborepo/EF4444",
    playwright: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/playwright/playwright-original.svg",
    skaffold: "https://cdn.simpleicons.org/skaffold/0091DA",
    bigquery: "https://cdn.simpleicons.org/googlebigquery/669DF6",
    airbyte: "https://cdn.simpleicons.org/airbyte/615EFF",
    postgresql: "https://cdn.simpleicons.org/postgresql/4169E1",
    github: "https://cdn.simpleicons.org/github/181717",
    notion: "https://cdn.simpleicons.org/notion/000000",
    figma: "https://cdn.simpleicons.org/figma/F24E1E",
    claude: "https://cdn.simpleicons.org/claude/D97757",
    anthropic: "https://cdn.simpleicons.org/anthropic/191919",
    cursor: "https://cdn.simpleicons.org/cursor/000000",
    copilot: "https://cdn.simpleicons.org/githubcopilot/000000",
    langchain: "https://cdn.simpleicons.org/langchain/1C3C3C",
    v0: "https://cdn.simpleicons.org/v0/000000",
  };
  const cards = lang === "jp" ? [
    { num: "01", t: "Frontend", d: "ユーザー体験を最大化する、モダンで高速なフロントエンドを構築します。", img: "components/tech_stack/tech_stack_card_frontend.webp",
      stack: [
        { n: "React 19", i: ICO.react }, { n: "Next.js 16", i: ICO.next }, { n: "TypeScript", i: ICO.ts },
        { n: "Tailwind CSS", i: ICO.tailwind }, { n: "Material UI", i: ICO.mui }, { n: "shadcn/ui", i: ICO.shadcn },
      ] },
    { num: "02", t: "Backend", d: "スケーラブルで保守性の高いAPIを設計・実装し、安定したサービス基盤を支えます。", img: "components/tech_stack/tech_stack_card_backend.webp",
      stack: [
        { n: "Node.js", i: ICO.node }, { n: "Hono", i: ICO.hono }, { n: "Go", i: ICO.go }, { n: "Python", i: ICO.python },
        { n: "Ruby on Rails", i: ICO.rails }, { n: "GraphQL", i: ICO.graphql }, { n: "Drizzle ORM", i: ICO.drizzle },
      ] },
    { num: "03", t: "Cloud / Infra", d: "信頼性・拡張性・セキュリティを考慮したインフラを設計・構築します。", img: "components/tech_stack/tech_stack_card_cloud_infra.webp",
      stack: [
        { n: "AWS", i: ICO.aws }, { n: "GCP", i: ICO.gcp }, { n: "Azure", i: ICO.azure },
        { n: "Cloudflare", i: ICO.cloudflare }, { n: "Docker", i: ICO.docker },
        { n: "Vercel", i: ICO.vercel }, { n: "Terraform", i: ICO.terraform },
      ] },
    { num: "04", t: "Data", d: "データの収集・統合・分析基盤を構築し、意思決定をデータで支援します。", img: "components/tech_stack/tech_stack_card_data.webp",
      stack: [
        { n: "BigQuery", i: ICO.bigquery }, { n: "dbt" }, { n: "Airbyte", i: ICO.airbyte },
        { n: "SQL", i: ICO.postgresql }, { n: "Modern Data Stack" },
      ] },
    { num: "05", t: "Product / Process", d: "開発生産性とプロダクトの品質を高めるツールとプロセスを実践します。", img: "components/tech_stack/tech_stack_card_product_process.webp",
      stack: [
        { n: "GitHub Actions", i: ICO.githubactions }, { n: "Turborepo", i: ICO.turborepo },
        { n: "Playwright", i: ICO.playwright }, { n: "Skaffold", i: ICO.skaffold }, { n: "TDD" },
      ] },
    { num: "06", t: "AI / 開発加速", d: "最新のAIツール・LLM APIを業務と開発に組み込み、品質と生産性を高めます。", img: "components/tech_stack/tech_stack_card_frontend.webp",
      stack: [
        { n: "Claude", i: ICO.claude }, { n: "Cursor", i: ICO.cursor }, { n: "GitHub Copilot", i: ICO.copilot },
        { n: "Anthropic API", i: ICO.anthropic }, { n: "LangChain", i: ICO.langchain }, { n: "v0", i: ICO.v0 },
      ] },
  ] : [
    { num: "01", t: "Frontend", d: "Modern, fast, polished interfaces optimized for real user experience.", img: "components/tech_stack/tech_stack_card_frontend.webp",
      stack: [
        { n: "React 19", i: ICO.react }, { n: "Next.js 16", i: ICO.next }, { n: "TypeScript", i: ICO.ts },
        { n: "Tailwind CSS", i: ICO.tailwind }, { n: "Material UI", i: ICO.mui }, { n: "shadcn/ui", i: ICO.shadcn },
      ] },
    { num: "02", t: "Backend", d: "Scalable, maintainable APIs powering reliable, observable services.", img: "components/tech_stack/tech_stack_card_backend.webp",
      stack: [
        { n: "Node.js", i: ICO.node }, { n: "Hono", i: ICO.hono }, { n: "Go", i: ICO.go }, { n: "Python", i: ICO.python },
        { n: "Ruby on Rails", i: ICO.rails }, { n: "GraphQL", i: ICO.graphql }, { n: "Drizzle ORM", i: ICO.drizzle },
      ] },
    { num: "03", t: "Cloud / Infra", d: "Reliable, scalable, secure infrastructure — designed and operated.", img: "components/tech_stack/tech_stack_card_cloud_infra.webp",
      stack: [
        { n: "AWS", i: ICO.aws }, { n: "GCP", i: ICO.gcp }, { n: "Azure", i: ICO.azure },
        { n: "Cloudflare", i: ICO.cloudflare }, { n: "Docker", i: ICO.docker },
        { n: "Vercel", i: ICO.vercel }, { n: "Terraform", i: ICO.terraform },
      ] },
    { num: "04", t: "Data", d: "Pipelines and platforms that turn raw events into trusted decisions.", img: "components/tech_stack/tech_stack_card_data.webp",
      stack: [
        { n: "BigQuery", i: ICO.bigquery }, { n: "dbt" }, { n: "Airbyte", i: ICO.airbyte },
        { n: "SQL", i: ICO.postgresql }, { n: "Modern Data Stack" },
      ] },
    { num: "05", t: "Product / Process", d: "Tools and rituals that lift team velocity and product quality.", img: "components/tech_stack/tech_stack_card_product_process.webp",
      stack: [
        { n: "GitHub Actions", i: ICO.githubactions }, { n: "Turborepo", i: ICO.turborepo },
        { n: "Playwright", i: ICO.playwright }, { n: "Skaffold", i: ICO.skaffold }, { n: "TDD" },
      ] },
    { num: "06", t: "AI / Dev Acceleration", d: "Bringing modern AI tools and LLM APIs into product and ops to accelerate quality and velocity.", img: "components/tech_stack/tech_stack_card_frontend.webp",
      stack: [
        { n: "Claude", i: ICO.claude }, { n: "Cursor", i: ICO.cursor }, { n: "GitHub Copilot", i: ICO.copilot },
        { n: "Anthropic API", i: ICO.anthropic }, { n: "LangChain", i: ICO.langchain }, { n: "v0", i: ICO.v0 },
      ] },
  ];
  return (
    <section id="tech" data-screen-label="04 Tech Stack" style={{ background: "transparent" }}>
      <div className="container">
        <div className="tech-intro">
          <div>
            <p className="kicker" style={{ marginBottom: 12 }}>Tech Stack</p>
            <h2 className="h-section" style={{ marginBottom: 24 }}>{lang === "jp" ? "技術スタック" : "Technology"}</h2>
            <div className="hero-rule" style={{ margin: "0 0 24px" }}></div>
            <p className="lead" style={{ margin: 0, maxWidth: 380 }}>
              {lang === "jp" ? "プロダクトの価値を最大化するために、目的に合った最適な技術を選定し、スケーラブルで保守性の高いシステム構築を行います。" : "We pick technology to fit the goal — and build systems that scale and stay maintainable."}
            </p>
          </div>
          <div className="tech-diagram">
            <img className="visual-img diagram-img" src={ASSET("visual_assets/architecture_overview_diagram.webp")} alt="Architecture overview diagram" />
          </div>
        </div>
        <div className="tech-cards">
          {cards.map((c, i) => (
            <div className="tech-card reveal" key={i} style={{ transitionDelay: `${i*60}ms` }}>
              <div className="num-row">
                <span className="num">{c.num}</span>
                <h3>{c.t}</h3>
              </div>
              <div className="ph"><img className="visual-img" src={ASSET(c.img)} alt="" /></div>
              <p>{c.d}</p>
              <div className="stack">
                {c.stack.map((s, j) => (
                  <span className="chip" key={j}>
                    {s.i ? <img className="tech-ico" src={s.i} alt="" loading="lazy" /> : <span className="dot"></span>}
                    {s.n}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Services = Services;
window.TechStack = TechStack;