function Portfolio() {
  const items = [
    { n:'P.01', tag:'データ入力',   t:'入札王',                       link:'https://www.nyusatsu-king.com/', external:true, d:'親会社・株式会社ズノーが運営する官公庁向け入札情報サービス。年間120万件超の入札情報を整理・分類する入力センターを担当。',                                 stats:[['Entries/y','1.2M+'],['Service','官公庁向け']]},
    { n:'P.02', tag:'映像制作',     t:'大鉄工業様 リクルーティング動画', link:'https://www.daitetsu.co.jp/recruit/', external:true, d:'鉄道インフラを支える企業向けの採用動画。現場密着型ドキュメンタリー形式で、若手からベテランまでのインタビューと実作業風景を撮影。', stats:[['Format','Documentary'],['Target','採用・育成']]},
    { n:'P.03', tag:'Webライティング',t:'相続プラス様', link:'https://souzokuplus.com/', external:true,                 d:'相続のお悩み解決ポータル「相続プラス」のオウンドメディア運用。法的正確さと読みやすさを両立した記事ライティングを継続的に支援。',       stats:[['Theme','相続・法律'],['Field','オウンドメディア']]},
  ];
  return (
    <section id="portfolio" className="section">
      <div className="container">
        <div className="section-head">
          <div className="section-label">S02 / Portfolio</div>
          <h2 className="section-title"><span className="en">Selected Work</span>事例紹介</h2>
          <span/>
        </div>
        <div className="pf-grid">
          {items.map(it => (
            <div key={it.n} className="pf-card"
                 onClick={it.link ? () => { it.external ? window.open(it.link, '_blank', 'noopener,noreferrer') : (window.location.href = it.link); } : undefined}
                 style={it.link ? {cursor:'pointer'} : undefined}>
              <div className="meta"><span>{it.n}</span><span>{it.tag}</span></div>
              <h4>{it.t}</h4>
              <p>{it.d}</p>
              <div className="mini-stats">
                {it.stats.map(([k,v]) => <span key={k}>{k} · <b>{v}</b></span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const items = [
    { cat:'映像制作', avatar:'../../assets/testimonials/01-o-univ.png',   q:'大学シンポジウムの撮影および動画制作を依頼しました。企画段階から丁寧にご対応いただき、進行管理もスムーズで安心してお任せできました。納品された動画のクオリティも非常に高く、関係者からも「内容が伝わりやすい」と好評でした。', who:'O大学様 · 教育関係 / 教授' },
    { cat:'BPO',     avatar:'../../assets/testimonials/02-z-telecom.png', q:'SNSの開設から運用まで一貫してお願いしています。毎日の投稿や分析をしっかり行っていただき、まもなくフォロワーが1万人に届きそうです。着実に成果が出ていて、お願いして本当に良かったと感じています。',                       who:'Z社様 · 大手通信サービス / 経営戦略マーケティング' },
    { cat:'映像制作', avatar:'../../assets/testimonials/03-n-sales.png',  q:'顧客への操作説明動画の制作をお願いしました。説明内容の整理や表現方法にも工夫があり、視聴者からは「理解しやすい」との評価を多数いただいています。ホームページだけではカバーしきれない情報を、補完できる動画として大変重宝しています。', who:'N社様 · インターネット附随サービス業 / 営業サポート' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="section-label">S03 / Testimonials</div>
          <h2 className="section-title"><span className="en">Voice of Customer</span>お客様の声</h2>
          <span style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.2em', textTransform:'uppercase', color:'var(--fg-3)'}}>03 / 28</span>
        </div>
        <div className="tm-grid">
          {items.map((it,i) => (
            <div key={i} className="tm">
              <img className="avatar" src={it.avatar} alt={it.who} />
              <div className="cat">{it.cat}</div>
              <p className="quote">{it.q}</p>
              <div className="who">{it.who}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Portfolio = Portfolio;
window.Testimonials = Testimonials;