/* global React */
// Trust band · Problems · Service

function TrustBand() {
  const { StatCard } = window.AIDesignSystem_dabded;
  const { Reveal } = window;
  const { trust } = window.LP;
  return (
    <section className="lp-trust">
      <Reveal className="lp-trust__grid" stagger={0.1}>
        {trust.map(([label, value]) => (
          <StatCard key={label} label={label} value={value} />
        ))}
      </Reveal>
    </section>
  );
}

// painTitle / painBody — controlled line breaks on the AI card (icon
// "sparkles"): title breaks after 「いいか」 on mobile; body breaks at the last
// 読点 on desktop. Break spans toggle display via the .pain-br-* CSS.
function painTitle(p) {
  if (p.icon !== "sparkles") return p.title;
  return (
    <>AIに興味はあるが、何から始めればいいか<span className="pain-br-sp">わからない</span></>
  );
}
function painBody(p) {
  if (p.icon === "sparkles") {
    return (
      <>AIで何ができて、何ができないのか、<span className="pain-br-pc">イメージが湧かない。</span></>
    );
  }
  if (p.icon === "clipboard-check") {
    return (
      <>確認・転記・集計など、同じ業務を何度も<span className="pain-br-pc">くり返している。</span></>
    );
  }
  return p.body;
}

function ProblemsSection() {
  const { Card } = window.AIDesignSystem_dabded;
  const { Icon, SectionHead, Reveal, useIsMobile, Accordion } = window;
  const { pains } = window.LP;
  const isMobile = useIsMobile();
  return (
    <section className="lp-section" id="problems" style={{ background: "var(--bg)" }}>
      <div className="lp-container">
        <SectionHead
          index="01"
          eyebrow="課題"
          title={["こんなお悩み、", "ありませんか？"]}
          lead={<>思い当たったら、まずは無料診断。</>}
        />
        {isMobile ? (
          <Accordion
            items={pains.map((p) => ({
              key: p.title,
              head: (
                <>
                  <span className="lp-icon-chip lp-icon-chip--white"><Icon name={p.icon} size={18} color="var(--accent)" /></span>
                  <span className="lp-acc__title">{painTitle(p)}</span>
                </>
              ),
              body: <p className="lp-card-body">{painBody(p)}</p>,
            }))}
          />
        ) : (
          <Reveal className="lp-grid-3" stagger={0.09}>
            {pains.map((p) => (
              <Card key={p.title} tone="white" pad="lg" interactive className="lp-accentcard lp-paincard">
                <span className="lp-painicon">
                  <i className="lp-painicon__blob" aria-hidden="true"></i>
                  <i className="lp-painicon__dots" aria-hidden="true"></i>
                  <span className="lp-painicon__chip"><Icon name={p.icon} size={32} color="var(--accent)" /></span>
                  <svg className="lp-painicon__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>
                </span>
                <h3 className="lp-card-title">{painTitle(p)}</h3>
                <p className="lp-card-body">{painBody(p)}</p>
              </Card>
            ))}
          </Reveal>
        )}
      </div>
    </section>
  );
}

function ServiceSection() {
  const { ServiceCard } = window.AIDesignSystem_dabded;
  const { Icon, SectionHead, Reveal } = window;
  const { services } = window.LP;
  return (
    <section className="lp-section" id="service" style={{ background: "var(--surface-tint)" }}>
      <div className="lp-container">
        <SectionHead
          index="02"
          eyebrow="SERVICE"
          title={["業務整理から、", "実装と定着まで。"]}
          lead="ツール単体ではなく、仕事の流れに組み込まれる形で支援します。"
        />
        <Reveal className="lp-grid-4" stagger={0.08}>
          {services.map((s) => (
            <ServiceCard
              key={s.title}
              icon={<Icon name={s.icon} size={20} />}
              eyebrow={s.eyebrow}
              title={s.title}
              body={s.body}
              tone={s.tone}
              chip={s.chip}
            />
          ))}
        </Reveal>
      </div>
    </section>
  );
}

function StatementSection() {
  const { Reveal } = window;
  const { Eyebrow } = window.AIDesignSystem_dabded;
  const { statement } = window.LP;
  return (
    <section className="lp-section lp-statement" style={{ background: "var(--bg)" }}>
      <div className="lp-container lp-statement__grid">
        <Reveal>
          <Eyebrow tone="blue">{statement.lead}</Eyebrow>
          <h2 className="lp-statement__big ha-serif">
            {statement.lines[0]}<br />
            <span className="lp-statement__accent">{statement.lines[1]}</span>
          </h2>
        </Reveal>
        <Reveal as="p" className="lp-statement__body" delay={0.12}>{statement.body}</Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { TrustBand, StatementSection, ProblemsSection, ServiceSection });