/* global React */
// Comparison table · Cases

function ComparisonSection() {
  const { Icon, SectionHead, Reveal, useIsMobile, Accordion } = window;
  const { comparison } = window.LP;
  const isMobile = useIsMobile();
  return (
    <section className="lp-section" id="comparison" style={{ background: "var(--surface-tint)" }}>
      <div className="lp-container">
        <SectionHead
          index="02"
          eyebrow="違い"
          title={["一般的な", "ツール導入との", "違い。"]}
          lead="業務を理解し、小さく試し、定着まで支援します。"
        />
        {isMobile ? (
          <Accordion
            defaultOpen={[comparison[0].category]}
            items={comparison.map((row) => ({
              key: row.category,
              head: (
                <>
                  <span className="lp-cmp-acc__chip"><Icon name={row.icon} size={18} color="var(--accent)" /></span>
                  <span className="lp-acc__title">{row.category}</span>
                </>
              ),
              body: (
                <div className="lp-cmp-acc">
                  <div className="lp-cmp-acc__block lp-cmp-acc__block--general">
                    <span className="lp-cmp-acc__label"><Icon name="minus" size={15} color="var(--gray-300)" />一般的なツール導入</span>
                    <p>{row.general}</p>
                  </div>
                  <div className="lp-cmp-acc__block lp-cmp-acc__block--ours">
                    <span className="lp-cmp-acc__label"><Icon name="check-circle-2" size={16} color="#DCEBFF" />はたラクAI</span>
                    <p>{row.ours}</p>
                  </div>
                </div>
              ),
            }))}
          />
        ) : (
          <Reveal className="lp-cmp lp-stagger--rise" stagger={0.06}>
            <div className="lp-cmp__head" aria-hidden="true">
              <div className="lp-cmp__head-spacer"></div>
              <div className="lp-cmp__head-general">一般的なツール導入</div>
              <div className="lp-cmp__head-ours"><svg className="lp-cmp__spark" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 1.4C12.7 8 14 9.3 20.6 10 14 10.7 12.7 12 12 18.6 11.3 12 10 10.7 3.4 10 10 9.3 11.3 8 12 1.4Z" fill="#FDCB17"></path></svg>はたラクAI</div>
            </div>
            {comparison.map((row) => (
              <div key={row.category} className="lp-cmp__row">
                <div className="lp-cmp__cat">
                  <span className="lp-cmp__cat-chip"><Icon name={row.icon} size={18} color="var(--accent)" /></span>
                  <span>{row.category}</span>
                </div>
                <div className="lp-cmp__cell lp-cmp__cell--general">
                  <Icon name="minus" size={16} color="var(--gray-300)" />
                  <span>{row.general}</span>
                </div>
                <div className="lp-cmp__cell lp-cmp__cell--ours">
                  <Icon name="check-circle-2" size={20} color="var(--accent)" />
                  <span>{row.ours}</span>
                </div>
              </div>
            ))}
          </Reveal>
        )}
      </div>
    </section>
  );
}

function CaseCard({ c, i }) {
  const { Badge } = window.AIDesignSystem_dabded;
  const { Icon } = window;
  return (
    <article className="lp-case">
      <div className="lp-case__head">
        <span className="lp-icon-chip lp-icon-chip--navy"><Icon name={c.icon} size={20} color="#fff" /></span>
        <div className="lp-case__headtext">
          <h3 className="lp-case__title">{c.label}</h3>
          <p className="lp-case__tool">{c.title}</p>
        </div>
        <div className="lp-case__meta">
          <span className="lp-case__no">{String(i + 1).padStart(2, "0")}</span>
          <Badge variant="soft">{c.theme}</Badge>
        </div>
      </div>
      <div className="lp-case__ba">
        <span className="lp-case__ba-before">{c.before}</span>
        <Icon name="arrow-right" size={15} color="var(--accent)" />
        <span className="lp-case__ba-after">{c.after}</span>
      </div>
      <dl className="lp-case__dl">
        <div><dt>課題</dt><dd>{c.issue}</dd></div>
        <div><dt>結果</dt><dd>{c.result}</dd></div>
      </dl>
    </article>
  );
}

function CasesCarousel({ cases }) {
  const trackRef = React.useRef(null);
  const [idx, setIdx] = React.useState(0);
  const onScroll = () => {
    const el = trackRef.current;
    if (!el) return;
    const i = Math.round(el.scrollLeft / el.clientWidth);
    setIdx(Math.max(0, Math.min(cases.length - 1, i)));
  };
  const go = (i) => {
    const el = trackRef.current;
    if (!el) return;
    el.scrollTo({ left: i * el.clientWidth, behavior: "smooth" });
  };
  return (
    <div className="lp-cases-carousel">
      <div className="lp-cases-track" ref={trackRef} onScroll={onScroll}>
        {cases.map((c, i) => (
          <div className="lp-cases-slide" key={c.title}>
            <CaseCard c={c} i={i} />
          </div>
        ))}
      </div>
      <div className="lp-cases-dots" role="tablist" aria-label="支援事例">
        {cases.map((c, i) => (
          <button
            key={c.title}
            type="button"
            className={`lp-cases-dot ${i === idx ? "is-on" : ""}`}
            aria-label={`事例 ${i + 1}`}
            aria-selected={i === idx}
            onClick={() => go(i)}
          />
        ))}
      </div>
    </div>
  );
}

function CasesSection() {
  const { SectionHead, Reveal, useIsMobile } = window;
  const { cases } = window.LP;
  const isMobile = useIsMobile();
  return (
    <section className="lp-section" id="cases" style={{ background: "var(--surface-tint)" }}>
      <div className="lp-container">
        <SectionHead
          index="04"
          eyebrow="支援事例"
          title={["現場が", "ラクになった事例。"]}
          lead="1業務から始めて、こう変わりました。"
        />
        {isMobile ? (
          <CasesCarousel cases={cases} />
        ) : (
          <Reveal className="lp-grid-2" stagger={0.12}>
            {cases.map((c, i) => (
              <CaseCard key={c.title} c={c} i={i} />
            ))}
          </Reveal>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { ComparisonSection, CasesSection });

/* (AboutSection / founder profile removed — not part of the approved layout.) */