// ─── HOME / TOP page ─────────────────────────────────────────────

function Home({ go, tweaks }) {
  return (
    <div className="page">
      <Hero go={go} tweaks={tweaks} />
      <TickerBar />
      <ServicesOverview go={go} />
      <ApproachSection />
      <WorksPreview go={go} />
      <ProcessSection />
      <StatsSection />
      <WhyUs />
      <BlogSection />
      <FAQSection />
      <BigCTA go={go} tweaks={tweaks} />
    </div>);

}

// ── Hero ────────────────────────────────────────────────────
function Hero({ go, tweaks }) {
  const textFirst = tweaks?.heroLayout !== "visual";

  return (
    <section className="hero">
      <div className="wrap" style={{ position: "relative" }}>
        <div className="hero__meta-row">
          <div className="hero__chips">
            <span className="chip chip-accent"><span className="dot" /> SEO対策依頼 新規受付中</span>
            <span className="chip">WordPress · テーマ · プラグイン</span>
          </div>
        </div>

        {textFirst ? <HeroText go={go} /> : <HeroVisual go={go} />}

        <div className="hero__bottom">
          <div className="hero__stats">
            <MiniStat label="累計プロジェクト" value="320+" />
            <MiniStat label="保守継続契約" value="15社" />
            <MiniStat label="一次応答" value="< 15分" />
          </div>
          <div className="en hero__scroll">SCROLL ↓</div>
        </div>
      </div>
    </section>);

}

function MiniStat({ label, value }) {
  return (
    <div>
      <div className="en mini-stat__label">{label}</div>
      <div className="serif mini-stat__value">{value}</div>
    </div>);

}

function HeroText({ go }) {
  return (
    <div className="stack-mobile hero-text__grid">
      <div>
        <Eyebrow num="01">OUR PROMISE</Eyebrow>
        <h1 className="h-display hero-text__headline">
          <span style={{ display: "block" }}>Webの力で、</span>
          <span style={{ display: "block" }}>
            <span className="hero-text__headline-accent">価値ある未来</span>を
          </span>
          <span style={{ display: "block" }}>共に創る。</span>
        </h1>
        <p className="lead hero-text__lead">
          WordPress 保守・開発、Webシステム構築、SEO対策まで。<br />
          事業の継続に必要な「技術」を、同じ温度で支えるパートナーです。
        </p>

        <div className="hero-text__actions">
          <button onClick={() => go("contact", { tab: "form" })} className="btn btn-accent">
            無料相談を予約
            <Arrow />
          </button>
          <button onClick={() => go("services")} className="btn btn-ghost">
            サービスを見る
            <Arrow />
          </button>
        </div>
      </div>

      <div className="hero-text__ornament">
        <HeroOrnament />
      </div>
    </div>);

}

function HeroVisual({ go }) {
  return (
    <div style={{ position: "relative" }}>
      <div className="hero-visual__frame">
        <HeroOrnament scale={1.15} />
        <div className="hero-visual__overlay">
          <div className="hero-visual__plate">
            <Eyebrow num="01">OUR PROMISE</Eyebrow>
            <h1 className="h1 hero-visual__plate-title">
              Webの力で、<span className="hero-text__headline-accent">価値ある未来</span>を共に創る。
            </h1>
          </div>
          <button onClick={() => go("contact", { tab: "form" })} className="btn btn-accent btn-lg">
            無料相談を予約 <Arrow />
          </button>
        </div>
      </div>
      <p className="lead hero-visual__lead">
        WordPress保守・開発、Webシステム構築、SEO対策まで。事業の継続に必要な「技術」を、同じ温度で支えるパートナーです。
      </p>
    </div>);

}

// ── Ticker bar: scrolling marquee of competencies
function TickerBar() {
  const items = [
  "WordPress Maintenance", "Next.js Development", "Core Web Vitals", "AWS Infrastructure",
  "Technical SEO", "Headless CMS", "GitHub CI/CD", "24/365 Monitoring", "Accessibility",
  "Schema Markup", "ACF Pro", "GraphQL"];

  return (
    <div className="ticker">
      <div className="ticker__track">
        {[...items, ...items, ...items].map((it, i) =>
        <span key={i} className="en ticker__item">
            {it}
            <span className="ticker__dot" />
          </span>
        )}
      </div>
    </div>);

}

// ── Services Overview ───────────────────────────────────────
function ServicesOverview({ go }) {
  return (
    <section className="section">
      <div className="wrap">
        <SectionHeader
          eyebrowNum="02"
          eyebrow="SERVICES"
          title={<>事業の継続に、<br />必要なすべて。</>}
          lead="作って終わらせない。保守・改修・改善・拡張まで、一つの窓口で。6つの専門分野で、貴社のWebを長期で支えます。" />

        <div className="services-grid">
          {SERVICES.map((s, i) =>
          <ServiceTile key={s.id} service={s} index={i} go={go} />
          )}
        </div>
      </div>
    </section>);

}

function ServiceTile({ service, index, go }) {
  const canGo = !!service.page;
  return (
    <div
      onClick={() => canGo && go(service.page)}
      className={`service-tile${!canGo ? " service-tile--no-link" : ""}`}>

      <div>
        <div className="service-tile__head">
          <span className="en service-tile__meta">
            {service.num} · {service.cat}
          </span>
          <span className="service-tile__arrow-wrap">
            <ArrowUpRight size={12} />
          </span>
        </div>
        <h3 className="h3" style={{ marginBottom: 16, whiteSpace: "pre-line" }}>{service.title}</h3>
        <p className="service-tile__summary">{service.summary}</p>
      </div>
      {canGo &&
      <div className="service-tile__more">詳細を見る →</div>
      }
    </div>);

}

// ── Approach: text-led manifesto ────────────────────────────
function ApproachSection() {
  const principles = [
  { n: "壱", t: "設計に、誠実であること。", d: "流行の装飾より、ユーザーが迷わない構造を。短期のCVより、長期で効く情報設計を優先します。" },
  { n: "弐", t: "技術を、手段として使うこと。", d: "最新のフレームワークを導入することが目的ではありません。事業のゴールから逆算し、過不足ない技術選定を。" },
  { n: "参", t: "公開後から、始めること。", d: "Webは「納品」ではなく「運用」で価値が決まる。公開後こそ、継続的な計測・改善・伴走を。" }];

  return (
    <section className="section" style={{ background: "var(--bg-alt)" }}>
      <div className="wrap">
        <div className="stack-mobile approach__grid">
          <div className="approach__sticky sticky-unset">
            <Eyebrow num="03">APPROACH</Eyebrow>
            <h2 className="h1 approach__title">
              我々の、<br />
              <span className="approach__accent">三つの信条</span>。
            </h2>
            <p className="lead approach__lead">
              技術力で差別化する以上に、「考え方」で選ばれるチームでありたい。
            </p>
          </div>
          <div>
            {principles.map((p, i) =>
            <div key={i} className={`stack-mobile principle${i === 0 ? " principle--first" : ""}`}>
                <div className="serif principle__num">{p.n}</div>
                <div>
                  <h3 className="h3 principle__title">{p.t}</h3>
                  <p className="principle__desc">{p.d}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ── Works preview (TOP) ─────────────────────────────────────
function WorksPreview({ go }) {
  const featured = WORKS.slice(0, 3);
  return (
    <section className="section">
      <div className="wrap">
        <div className="works-preview__head">
          <div className="works-preview__head-left">
            <Eyebrow num="04">SELECTED WORKS</Eyebrow>
            <h2 className="h1 works-preview__title">数字で語れる実績。</h2>
          </div>
          <button onClick={() => go("works")} className="btn btn-ghost">
            すべての実績を見る <Arrow />
          </button>
        </div>

        <div className="works-preview__grid">
          {featured.map((w, i) => <CaseCard key={w.id} work={w} index={i} go={go} />)}
        </div>
      </div>
    </section>);

}

function CaseCard({ work, index, go }) {
  return (
    <article onClick={() => go("works")} className="case-card">
      <div className="case-card__visual">
        <CaseGlyph hue={work.hue} pattern={index} />
        <div className="case-card__badge">
          CASE {String(index + 1).padStart(2, "0")}
        </div>
        <div className="case-card__metric">{work.metric}</div>
      </div>
      <div className="case-card__body">
        <div className="en case-card__meta">
          {work.year} · {work.industry}
        </div>
        <h3 className="serif case-card__title">{work.title}</h3>
        <div className="case-card__tags">
          {work.scope.map((s) =>
          <span key={s} className="case-card__tag">{s}</span>
          )}
        </div>
      </div>
    </article>);

}

// ── Process ─────────────────────────────────────────────────
function ProcessSection() {
  return (
    <section className="section" style={{ background: "var(--bg-dark)", color: "#fff" }}>
      <div className="wrap">
        <SectionHeader
          eyebrowNum="05"
          eyebrow="PROCESS"
          title={<span style={{ color: "#fff", fontSize: "63px", lineHeight: "1.1", letterSpacing: "-8.9px" }}>ご依頼から公開・運用まで。</span>}
          lead={<span style={{ color: "rgba(255,255,255,0.7)" }}>透明な進行で、プロジェクトを一緒に歩きます。</span>} />

        <div className="process__grid">
          {PROCESS.map((p, i) =>
          <div key={i} className="process-cell">
              <div className="en process-cell__step">STEP {p.step}</div>
              <h3 className="serif process-cell__title">{p.title}</h3>
              <p className="process-cell__desc">{p.desc}</p>
              <div className="en process-cell__days">{p.days}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── Stats ───────────────────────────────────────────────────
function StatsSection() {
  return (
    <section className="section tight">
      <div className="wrap">
        <div className="stats-grid">
          {STATS.map((s, i) => <AnimatedStat key={i} {...s} />)}
        </div>
      </div>
    </section>);

}

// ── Why Us ──────────────────────────────────────────────────
function WhyUs() {
  const reasons = [
  { t: "代表が、直接あたる。", d: "窓口担当と開発者の間で情報が薄まらない。仕様・工数・優先度の判断が、速い。" },
  { t: "データを共有します。", d: "ブラックボックス化しません。納品物は貴社の資産、他社への乗り換えもブロックしません。" },
  { t: "計測の上で、提案する。", d: "GA4 / Search Console / CrUX を運用に組み込み、感覚ではなく数字で議論します。" },
  { t: "BCP・SLA にも対応。", d: "大手企業の情報セキュリティ審査・取引先調査にも、丁寧に対応します。" }];

  return (
    <section className="section" style={{ background: "var(--bg-alt)" }}>
      <div className="wrap">
        <SectionHeader eyebrowNum="06" eyebrow="WHY UIARB" title="選ばれる、四つの理由。" />
        <div className="reasons-grid">
          {reasons.map((r, i) =>
          <div key={i} className="reason-card">
              <div className="en reason-card__num">REASON {String(i + 1).padStart(2, "0")}</div>
              <h3 className="h3 reason-card__title">{r.t}</h3>
              <p className="reason-card__desc">{r.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function FAQSection() {
  return (
    <section className="section">
      <div className="wrap" style={{ maxWidth: 960 }}>
        <SectionHeader eyebrowNum="07" eyebrow="FAQ" title="よくあるご質問。" align="left" />
        <Accordion items={FAQS} />
      </div>
    </section>);

}

Object.assign(window, { Home });