/* global React */
// Pricing · Contact · Footer

function PricingSection() {
  const { ServiceCard, Badge } = window.AIDesignSystem_dabded;
  const { SectionHead, Reveal, useIsMobile } = window;
  const { pricing } = window.LP;
  const featured = "STEP1";
  const isMobile = useIsMobile();
  const step1 = pricing.find((p) => p.step === featured);
  const rest = pricing.filter((p) => p.step !== featured);
  return (
    <section className="lp-section" id="pricing" style={{ background: "var(--bg)" }}>
      <div className="lp-container">
        <SectionHead
          index="03"
          eyebrow="料金"
          title={["小さく試し、", "必要な分だけ広げる。"]}
          lead={<>無料診断で効果が出やすい業務を整理し、<span className="lp-lead-br">内容と範囲に合わせて料金を提示します。</span></>}
        />
        {isMobile ? (
          <div className="lp-price-mobile">
            <div className="lp-price-cell is-featured">
              <span className="lp-price-ribbon">まずはここから</span>
              <ServiceCard
                eyebrow={step1.step}
                title={step1.title}
                body={step1.body}
                footerLabel="料金目安"
                footerValue={<span className="lp-price-free">無料</span>}
                tone="soft"
              />
            </div>
            <ul className="lp-price-list">
              {rest.map((p) => (
                <li key={p.step} className="lp-price-list__row">
                  <span className="lp-price-list__step">{p.step}</span>
                  <span className="lp-price-list__title">{p.title}</span>
                  <span className="lp-price-list__price">{p.price}</span>
                </li>
              ))}
            </ul>
          </div>
        ) : (
          <Reveal className="lp-grid-4" stagger={0.08}>
            {pricing.map((p) => {
              const isHot = p.step === featured;
              const isFree = p.price === "無料";
              return (
                <div key={p.step} className={`lp-price-cell ${isHot ? "is-featured" : ""}`}>
                  {isHot && <span className="lp-price-ribbon">まずはここから</span>}
                  <ServiceCard
                    eyebrow={p.step}
                    title={p.title}
                    body={p.body}
                    footerLabel="料金目安"
                    footerValue={isFree ? <span className="lp-price-free">無料</span> : p.price}
                    tone={isHot ? "soft" : "tint"}
                  />
                </div>
              );
            })}
          </Reveal>
        )}
        <p className="lp-pricing-note">
          STEP1の無料診断から始められます。料金は支援範囲・業務内容に応じて個別にお見積りします。
        </p>
      </div>
    </section>
  );
}

function ContactSection({ onLine }) {
  const { Button, Eyebrow } = window.AIDesignSystem_dabded;
  const { Icon, OrbitField, SplitText, Reveal } = window;
  const { contact } = window.LP;
  return (
    <section className="lp-contact" id="contact">
      <div className="lp-contact__grid" aria-hidden="true"></div>
      <div className="lp-contact__orbit" aria-hidden="true" data-parallax="0.16"><OrbitField size={360} /></div>
      <div className="lp-contact__inner">
        <div>
          <Eyebrow tone="sky" style={{ fontSize: "16px", letterSpacing: ".08em" }}>お問い合わせ</Eyebrow>
          <h2 className="lp-contact__h2 ha-serif"><SplitText lines={["まずは、AIに任せる仕事を", "ひとつ決める。"]} stagger={0.016} /></h2>
          <p className="lp-contact__lead">初回相談では、効果が出やすい自動化テーマと小さく始める進め方を整理します。</p>
        </div>
        <Reveal className="lp-contact__actions">
          <Button variant="line" size="lg" onClick={onLine} startIcon={<Icon name="message-circle" size={18} />}>LINEで無料相談する</Button>
          <a className="lp-contact__btn" href={`mailto:${contact.EMAIL}`}><Icon name="mail" size={18} />メールで相談する</a>
          <span className="lp-contact__phone">お急ぎの方はお電話でも：<a href={`tel:${contact.PHONE.replace(/-/g, "")}`}>{contact.PHONE}</a></span>
        </Reveal>
      </div>
    </section>
  );
}

function Footer({ logoSrc }) {
  const { Logo, Eyebrow } = window.AIDesignSystem_dabded;
  const { nav, business } = window.LP;
  return (
    <footer className="lp-footer" id="business">
      <div className="lp-container">
        <div className="lp-footer__top">
          <a className="lp-brand lp-brand--foot" href="#top" aria-label="はたラクAI"><img className="lp-brand__img" src={logoSrc} alt="はたラクAI" /></a>
          <nav className="lp-footer__nav" aria-label="フッターナビゲーション">
            {nav.map((item) => (
              <a key={item.href} href={item.href}>{item.label}</a>
            ))}
          </nav>
        </div>
        <div className="lp-footer__info">
          <Eyebrow tone="sky">INFORMATION</Eyebrow>
          <dl className="lp-footer__dl">
            {business.map(([label, value]) => (
              <div key={label}><dt>{label}</dt><dd>{value}</dd></div>
            ))}
          </dl>
          <p className="lp-footer__copy">© {new Date().getFullYear()} はたラクAI All rights reserved.</p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { MidCta, PricingSection, ContactSection, Footer });

function MidCta({ onLine }) {
  const { Button } = window.AIDesignSystem_dabded;
  const { Icon, Reveal } = window;
  return (
    <section className="lp-midcta">
      <Reveal className="lp-container lp-midcta__inner">
        <div className="lp-midcta__copy">
          <span className="lp-midcta__ey">START SMALL</span>
          <h2 className="lp-midcta__t ha-serif">いまの業務を、30分で棚おろし。</h2>
          <p className="lp-midcta__sub">効果の出やすい1業務から。無料診断で、AI化できる仕事を一緒に整理します。</p>
        </div>
        <div className="lp-midcta__actions">
          <Button variant="line" size="lg" onClick={onLine} startIcon={<Icon name="message-circle" size={18} />}>LINEで無料相談する</Button>
          <a className="lp-midcta__link" href="#pricing">料金プランを見る<Icon name="arrow-right" size={16} /></a>
        </div>
      </Reveal>
    </section>
  );
}