// Pricing, Flow, FAQ, CTA

function Pricing() {
  const [mode, setMode] = React.useState("initial"); // initial | monthly
  const plans = [
    {
      key: "light",
      name: "ライトプラン",
      tag: "小規模サイトにおすすめ",
      initial: 198000,
      monthly: 19000,
      features: [
        "トップ含む最大5ページ",
        "スマホ対応",
        "お問い合わせフォーム",
        "Googleアナリティクス導入",
        "公開後30日サポート",
      ],
      featured: false,
    },
    {
      key: "standard",
      name: "スタンダードプラン",
      tag: "企業サイトに人気",
      initial: 398000,
      monthly: 39000,
      features: [
        "最大15ページ",
        "オリジナルデザイン",
        "CMS（更新システム）導入",
        "SEO基本対策",
        "公開後90日サポート",
      ],
      featured: true,
    },
    {
      key: "premium",
      name: "プレミアムプラン",
      tag: "集客・運用までしっかり支援",
      initial: 898000,
      monthly: 98000,
      features: [
        "ページ数無制限",
        "戦略設計・コピー制作",
        "高度なSEO・LP制作含む",
        "月次レポート＆改善提案",
        "公開後12ヶ月運用支援",
      ],
      featured: false,
    },
  ];

  return (
    <section id="pricing" className="section" style={{ background: "var(--bg-soft)" }}>
      <div className="container">
        <Reveal><div style={{ textAlign: "center", marginBottom: 16 }}><span className="eyebrow">Pricing</span></div></Reveal>
        <Reveal delay={60}><h2 className="section-title">料金<span className="accent">プラン</span></h2></Reveal>
        <Reveal delay={120}>
          <p style={{ textAlign: "center", color: "var(--fg-3)", marginTop: -32, marginBottom: 36, fontSize: 14 }}>
            目的やご予算に合わせて、分かりやすい料金プランをご用意しています。
          </p>
        </Reveal>

        <Reveal delay={160}>
          <div style={{ display: "flex", justifyContent: "center", marginBottom: 36 }}>
            <div style={{
              display: "inline-flex", padding: 4,
              background: "var(--surface)", border: "1px solid var(--border)",
              borderRadius: 999,
            }}>
              {[
                { key: "initial", label: "初期費用" },
                { key: "monthly", label: "月額（保守・運用）" },
              ].map((t) => (
                <button
                  key={t.key}
                  onClick={() => setMode(t.key)}
                  style={{
                    border: "none", padding: "10px 22px", borderRadius: 999,
                    background: mode === t.key ? "var(--primary-600)" : "transparent",
                    color: mode === t.key ? "#fff" : "var(--fg-2)",
                    fontWeight: 600, fontSize: 13, transition: "all .2s",
                  }}
                >
                  {t.label}
                </button>
              ))}
            </div>
          </div>
        </Reveal>

        <div style={{ display: "grid", gap: 20 }} className="pricing-grid">
          {plans.map((p, i) => {
            const price = mode === "initial" ? p.initial : p.monthly;
            return (
              <Reveal key={p.key} delay={i * 80}>
                <div className="card" style={{
                  padding: 28, height: "100%", position: "relative",
                  borderColor: p.featured ? "var(--primary-600)" : "var(--border)",
                  borderWidth: p.featured ? 2 : 1,
                  background: "var(--surface)",
                  boxShadow: p.featured ? "var(--shadow-lg)" : "var(--shadow-sm)",
                }}>
                  {p.featured && (
                    <span style={{
                      position: "absolute", top: 18, right: 18,
                      background: "var(--primary-600)", color: "#fff",
                      fontSize: 11, fontWeight: 700, padding: "5px 12px", borderRadius: 999,
                      letterSpacing: "0.04em",
                    }}>
                      おすすめ
                    </span>
                  )}
                  <div style={{ fontSize: 16, fontWeight: 700, color: "var(--fg)" }}>{p.name}</div>
                  <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 4 }}>{p.tag}</div>
                  <div style={{ margin: "20px 0 4px", display: "flex", alignItems: "baseline", gap: 4 }}>
                    <span style={{ fontFamily: "var(--font-en)", fontSize: 38, fontWeight: 800, color: p.featured ? "var(--primary-600)" : "var(--fg)", letterSpacing: "-0.02em" }}>
                      ¥{price.toLocaleString()}
                    </span>
                    <span style={{ fontSize: 13, color: "var(--fg-3)", fontWeight: 600 }}>～</span>
                  </div>
                  <div style={{ fontSize: 11, color: "var(--fg-4)", marginBottom: 18 }}>
                    {mode === "initial" ? "（税抜）初期費用" : "（税抜）月額"}
                  </div>
                  <ul style={{ listStyle: "none", padding: 0, margin: "0 0 22px", display: "flex", flexDirection: "column", gap: 10 }}>
                    {p.features.map((f) => (
                      <li key={f} style={{ display: "flex", gap: 10, fontSize: 13, color: "var(--fg-2)", lineHeight: 1.6 }}>
                        <span style={{ color: "var(--primary-600)", flex: "0 0 auto", marginTop: 2 }}>
                          <Icon name="check" size={16} strokeWidth={2.4} />
                        </span>
                        {f}
                      </li>
                    ))}
                  </ul>
                  <a href="#contact" className={p.featured ? "btn btn-primary btn-block" : "btn btn-outline btn-block"}>
                    このプランで相談する
                  </a>
                </div>
              </Reveal>
            );
          })}
        </div>
        <p style={{ textAlign: "center", marginTop: 28, color: "var(--fg-3)", fontSize: 12 }}>
          ※ 表示価格はすべて税抜です。要件に応じてカスタマイズも承ります。
        </p>
      </div>
    </section>
  );
}

function Flow() {
  const steps = [
    { no: "01", icon: "mail",     title: "お問い合わせ・相談", desc: "フォームよりお気軽にご相談ください。" },
    { no: "02", icon: "chat",     title: "ヒアリング・お見積り", desc: "課題と目的を丁寧にヒアリングします。" },
    { no: "03", icon: "doc",      title: "ご契約・制作開始",     desc: "お見積りにご納得いただけたら開始。" },
    { no: "04", icon: "sparkles", title: "デザイン・構築",       desc: "デザイン案から構築まで一貫して対応。" },
    { no: "05", icon: "send",     title: "確認・公開",           desc: "最終チェックの後、公開・納品します。" },
    { no: "06", icon: "headset",  title: "運用サポート",         desc: "公開後の更新や改善も伴走します。" },
  ];
  return (
    <section id="flow" className="section">
      <div className="container">
        <Reveal><div style={{ textAlign: "center", marginBottom: 16 }}><span className="eyebrow">Flow</span></div></Reveal>
        <Reveal delay={60}><h2 className="section-title">制作の<span className="accent">流れ</span></h2></Reveal>

        <div style={{ display: "grid", gap: 12, position: "relative" }} className="flow-grid">
          <div className="flow-line" style={{
            position: "absolute", top: 38, left: "8%", right: "8%", height: 2,
            background: "repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 12px)",
            zIndex: 0,
          }} />
          {steps.map((s, i) => (
            <Reveal key={s.no} delay={i * 80}>
              <div style={{ position: "relative", textAlign: "center", zIndex: 1 }}>
                <div style={{
                  width: 76, height: 76, margin: "0 auto", borderRadius: "50%",
                  background: "var(--surface)", border: "2px solid var(--primary-600)",
                  color: "var(--primary-600)", display: "grid", placeItems: "center",
                  position: "relative", boxShadow: "var(--shadow-sm)",
                }}>
                  <Icon name={s.icon} size={30} />
                  <span style={{
                    position: "absolute", top: -8, right: -8,
                    background: "var(--primary-600)", color: "#fff",
                    width: 26, height: 26, borderRadius: 999,
                    display: "grid", placeItems: "center",
                    fontFamily: "var(--font-en)", fontWeight: 700, fontSize: 11,
                  }}>{s.no}</span>
                </div>
                <div style={{ marginTop: 14, fontSize: 13, fontWeight: 700, color: "var(--fg)", lineHeight: 1.4 }}>{s.title}</div>
                <div style={{ marginTop: 4, fontSize: 11, color: "var(--fg-3)", lineHeight: 1.6 }}>{s.desc}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: "相談や見積もりに費用はかかりますか？", a: "ご相談・お見積もりは無料で承ります。お気軽にお問い合わせください。" },
    { q: "制作期間はどのくらいですか？",         a: "規模にもよりますが、コーポレートサイトで1ヶ月〜、LPで1〜3週間が目安です。" },
    { q: "自社で更新できますか？",                a: "WordPress等のCMSを導入すれば、専門知識がなくても更新可能です。レクチャーも行います。" },
    { q: "写真や文章の準備は必要ですか？",        a: "ご準備いただくことも可能ですし、撮影・コピーライティングのご依頼もお受けしています。" },
    { q: "公開後のサポートはありますか？",        a: "保守・運用プランをご用意しています。トラブル対応・更新代行・改善提案まで対応可能です。" },
    { q: "どのような業種に対応していますか？",    a: "BtoB企業、士業、製造業、医療、飲食、EC等、幅広い業種で実績があります。" },
  ];
  return (
    <section id="faq" className="section" style={{ background: "var(--bg-soft)" }}>
      <div className="container" style={{ maxWidth: 960 }}>
        <Reveal><div style={{ textAlign: "center", marginBottom: 16 }}><span className="eyebrow">FAQ</span></div></Reveal>
        <Reveal delay={60}><h2 className="section-title">よくあるご<span className="accent">質問</span></h2></Reveal>
        <div style={{ display: "grid", gap: 12 }} className="faq-grid">
          {items.map((it, i) => <FAQItem key={i} {...it} delay={i * 50} />)}
        </div>
      </div>
    </section>
  );
}

function FAQItem({ q, a, delay }) {
  const [open, setOpen] = React.useState(false);
  return (
    <Reveal delay={delay}>
      <div className="card" style={{ overflow: "hidden", background: "var(--surface)" }}>
        <button
          onClick={() => setOpen((o) => !o)}
          style={{
            width: "100%", textAlign: "left", border: "none", background: "transparent",
            padding: "18px 20px", display: "flex", alignItems: "center", gap: 12,
            color: "var(--fg)", fontSize: 14, fontWeight: 600, lineHeight: 1.5,
          }}
        >
          <span style={{
            color: "var(--primary-600)", fontFamily: "var(--font-en)",
            fontWeight: 700, fontSize: 15, flex: "0 0 auto",
          }}>Q.</span>
          <span style={{ flex: 1 }}>{q}</span>
          <span style={{
            transition: "transform .2s", color: "var(--primary-600)",
            transform: open ? "rotate(45deg)" : "rotate(0)",
          }}>
            <Icon name="plus" size={20} strokeWidth={2.2} />
          </span>
        </button>
        <div style={{
          maxHeight: open ? 200 : 0,
          transition: "max-height .25s ease",
          overflow: "hidden",
        }}>
          <div style={{
            padding: "0 20px 18px 44px", color: "var(--fg-3)", fontSize: 13, lineHeight: 1.85,
            display: "flex", gap: 8,
          }}>
            <span style={{ color: "var(--primary-500)", fontFamily: "var(--font-en)", fontWeight: 700, fontSize: 14 }}>A.</span>
            <span>{a}</span>
          </div>
        </div>
      </div>
    </Reveal>
  );
}

function FinalCTA() {
  return (
    <section id="contact" className="section" style={{ background: "var(--bg-2)", position: "relative" }}>
      <div className="container">
        <Reveal>
          <div style={{ textAlign: "center", marginBottom: 48 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: "var(--primary-600)", letterSpacing: "0.12em", marginBottom: 12 }}>CONTACT</div>
            <h2 style={{ fontSize: "clamp(28px, 3.6vw, 42px)", fontWeight: 800, letterSpacing: "-0.01em", margin: "0 0 14px", color: "var(--fg)" }}>
              お問い合わせ
            </h2>
            <p style={{ color: "var(--fg-2)", lineHeight: 1.85, fontSize: 15, margin: 0 }}>
              ご相談・お見積もりは無料です。お気軽にお問い合わせください。<br />
              通常2営業日以内にご返信いたします。
            </p>
          </div>
        </Reveal>

        <div style={{ maxWidth: 880, margin: "0 auto" }}>
          <Reveal>
            <ContactForm />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function FormField({ label, required, children, hint }) {
  return (
    <label style={{ display: "block" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
        <span style={{ fontSize: 13, fontWeight: 700, color: "var(--fg)" }}>{label}</span>
        {required && (
          <span style={{
            fontSize: 10, fontWeight: 700, color: "#fff",
            background: "var(--primary-600)", padding: "2px 7px", borderRadius: 4,
            letterSpacing: "0.04em",
          }}>必須</span>
        )}
        {!required && (
          <span style={{
            fontSize: 10, fontWeight: 700, color: "var(--fg-3)",
            background: "var(--bg-2)", border: "1px solid var(--border)",
            padding: "1px 7px", borderRadius: 4,
          }}>任意</span>
        )}
      </div>
      {children}
      {hint && <div style={{ fontSize: 11, color: "var(--fg-3)", marginTop: 6 }}>{hint}</div>}
    </label>
  );
}

function ContactForm() {
  const WEB3FORMS_KEY = "55e36df2-28aa-44dd-9b00-3e53d1a93dd0";
  const TOPICS = ["ホームページ制作", "ランディングページ", "SEO・集客", "保守・運用", "リニューアル", "その他"];

  const [status, setStatus] = React.useState("idle"); // idle | loading | success | error
  const [checkedTopics, setCheckedTopics] = React.useState([]);

  const inputStyle = {
    width: "100%", padding: "12px 14px",
    background: "var(--bg)", color: "var(--fg)",
    border: "1px solid var(--border)", borderRadius: 10,
    fontSize: 14, fontFamily: "inherit", outline: "none",
    transition: "border-color 0.15s, box-shadow 0.15s",
    boxSizing: "border-box",
  };

  const toggleTopic = (topic) => {
    setCheckedTopics(prev =>
      prev.includes(topic) ? prev.filter(t => t !== topic) : [...prev, topic]
    );
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    setStatus("loading");
    const form = e.target;
    const formData = new FormData(form);

    // JSON オブジェクトに変換
    const payload = {
      access_key: WEB3FORMS_KEY,
      お名前: formData.get("お名前") || "",
      会社名: formData.get("会社名") || "",
      email: formData.get("email") || "",
      電話番号: formData.get("電話番号") || "",
      ご相談内容: checkedTopics.join("、") || "未選択",
      ご予算: formData.get("ご予算") || "",
      お問い合わせ詳細: formData.get("お問い合わせ詳細") || "",
      subject: `【ITtechWorks】お問い合わせ：${formData.get("お名前") || ""}様`,
      from_name: "ITtechWorks HP",
      botcheck: false,
    };

    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Accept": "application/json",
        },
        body: JSON.stringify(payload),
      });
      const json = await res.json();
      if (json.success) {
        setStatus("success");
      } else {
        console.error("Web3Forms error:", json);
        setStatus("error");
      }
    } catch (err) {
      console.error("Fetch error:", err);
      setStatus("error");
    }
  };

  if (status === "success") {
    return (
      <div style={{
        background: "var(--surface)", borderRadius: 18, padding: "56px 32px",
        boxShadow: "var(--shadow-md)", border: "1px solid var(--border)", textAlign: "center",
      }}>
        <div style={{
          width: 64, height: 64, margin: "0 auto 20px", borderRadius: "50%",
          background: "var(--primary-100)", color: "var(--primary-600)",
          display: "grid", placeItems: "center",
        }}>
          <Icon name="check" size={32} />
        </div>
        <h3 style={{ fontSize: 22, fontWeight: 800, margin: "0 0 12px", color: "var(--fg)" }}>送信が完了しました</h3>
        <p style={{ color: "var(--fg-2)", lineHeight: 1.85, margin: 0, fontSize: 14 }}>
          お問い合わせいただきありがとうございます。<br />
          内容を確認の上、2営業日以内にご返信いたします。
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} style={{
      background: "var(--surface)", borderRadius: 18, padding: "32px",
      boxShadow: "var(--shadow-md)", border: "1px solid var(--border)",
      display: "flex", flexDirection: "column", gap: 20,
    }} className="contact-form">
      {/* honeypot スパム対策 */}
      <input type="checkbox" name="botcheck" style={{ display: "none" }} />

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="form-row">
        <FormField label="お名前" required>
          <input style={inputStyle} type="text" name="お名前" placeholder="山田 太郎" required />
        </FormField>
        <FormField label="会社名">
          <input style={inputStyle} type="text" name="会社名" placeholder="株式会社○○" />
        </FormField>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="form-row">
        <FormField label="メールアドレス" required>
          <input style={inputStyle} type="email" name="email" placeholder="example@company.co.jp" required />
        </FormField>
        <FormField label="電話番号">
          <input style={inputStyle} type="tel" name="電話番号" placeholder="090-1234-5678" />
        </FormField>
      </div>
      <FormField label="ご相談内容" required>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 8 }}>
          {TOPICS.map((topic, i) => {
            const checked = checkedTopics.includes(topic);
            return (
              <label key={i} onClick={() => toggleTopic(topic)} style={{
                display: "flex", alignItems: "center", gap: 8,
                padding: "10px 12px", border: `1px solid ${checked ? "var(--primary-500)" : "var(--border)"}`,
                borderRadius: 10, cursor: "pointer",
                background: checked ? "var(--primary-50)" : "var(--bg)",
                fontSize: 13, fontWeight: 600,
                color: checked ? "var(--primary-600)" : "var(--fg-2)",
                transition: "all 0.15s",
              }}>
                <input type="checkbox" checked={checked} onChange={() => {}} style={{ accentColor: "var(--primary-600)" }} />
                <span>{topic}</span>
              </label>
            );
          })}
        </div>
      </FormField>
      <FormField label="ご予算">
        <select style={inputStyle} name="ご予算" defaultValue="">
          <option value="" disabled>選択してください</option>
          <option>〜30万円</option>
          <option>30〜80万円</option>
          <option>80〜150万円</option>
          <option>150万円〜</option>
          <option>未定・相談したい</option>
        </select>
      </FormField>
      <FormField label="お問い合わせ詳細" required hint="現状の課題や、実現したいことをご記入ください。">
        <textarea style={{ ...inputStyle, minHeight: 140, resize: "vertical", lineHeight: 1.7 }}
          name="お問い合わせ詳細"
          placeholder="例：自社のコーポレートサイトをリニューアルしたい。スマホ対応と、お問い合わせ件数を増やしたい。" required />
      </FormField>
      <label style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 13, color: "var(--fg-2)", lineHeight: 1.6 }}>
        <input type="checkbox" required style={{ accentColor: "var(--primary-600)", marginTop: 3 }} />
        <span><a href="policy.html#privacy" style={{ color: "var(--primary-600)", fontWeight: 600 }}>プライバシーポリシー</a>に同意の上、送信します。</span>
      </label>
      {status === "error" && (
        <div style={{ background: "#fff1f0", border: "1px solid #ffa39e", borderRadius: 10, padding: "12px 16px", fontSize: 13, color: "#cf1322" }}>
          送信に失敗しました。時間をおいて再度お試しいただくか、メールにてご連絡ください。
        </div>
      )}
      <button
        type="submit"
        disabled={status === "loading"}
        className="btn btn-primary btn-lg"
        style={{ alignSelf: "stretch", justifyContent: "center", marginTop: 4, opacity: status === "loading" ? 0.7 : 1 }}
      >
        <Icon name="mail" size={18} />
        {status === "loading" ? "送信中..." : "送信する"}
      </button>
      <style>{`
        .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
          border-color: var(--primary-500) !important;
          box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-500) 18%, transparent) !important;
        }
        @media (max-width: 640px){.contact-form .form-row{grid-template-columns:1fr !important;}}
      `}</style>
    </form>
  );
}

function ContactInfoCard() {
  return (
    <div style={{
      background: "var(--surface)", borderRadius: 18, padding: 24,
      boxShadow: "var(--shadow-md)", border: "1px solid var(--border)",
    }}>
      <h3 style={{ fontSize: 15, fontWeight: 800, margin: "0 0 16px", color: "var(--fg)" }}>その他のお問い合わせ方法</h3>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {[
          { icon: "phone", label: "お電話", value: "03-1234-5678", sub: "平日 10:00–18:00" },
          { icon: "mail",  label: "メール", value: "info@itttechworks.co.jp", sub: "24時間受付" },
          { icon: "pin",   label: "所在地", value: "東京都千代田区一番町 1-2-3", sub: "" },
        ].map((it, i) => (
          <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
            <span style={{
              width: 36, height: 36, flex: "0 0 auto",
              background: "var(--primary-100)", color: "var(--primary-600)",
              borderRadius: 10, display: "grid", placeItems: "center",
            }}>
              <Icon name={it.icon} size={18} />
            </span>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 11, color: "var(--fg-3)", fontWeight: 600 }}>{it.label}</div>
              <div style={{ fontSize: 14, fontWeight: 700, color: "var(--fg)", lineHeight: 1.4 }}>{it.value}</div>
              {it.sub && <div style={{ fontSize: 11, color: "var(--fg-3)", marginTop: 2 }}>{it.sub}</div>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function PlaceholderQR({ size = 220 }) {
  // Deterministic faux QR pattern — clearly a placeholder, but reads as "a QR code"
  const N = 25;
  const cell = size / N;
  const cells = [];
  // Pseudo-random but stable
  let seed = 7;
  const rnd = () => {
    seed = (seed * 9301 + 49297) % 233280;
    return seed / 233280;
  };
  const isFinder = (x, y) =>
    (x < 7 && y < 7) || (x >= N - 7 && y < 7) || (x < 7 && y >= N - 7);
  for (let y = 0; y < N; y++) {
    for (let x = 0; x < N; x++) {
      if (isFinder(x, y)) continue;
      if (rnd() > 0.5) cells.push([x, y]);
    }
  }
  const finder = (cx, cy) => (
    <g key={`f-${cx}-${cy}`}>
      <rect x={cx * cell} y={cy * cell} width={cell * 7} height={cell * 7} fill="#0a0f1f" />
      <rect x={(cx + 1) * cell} y={(cy + 1) * cell} width={cell * 5} height={cell * 5} fill="#fff" />
      <rect x={(cx + 2) * cell} y={(cy + 2) * cell} width={cell * 3} height={cell * 3} fill="#0a0f1f" />
    </g>
  );
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: "block" }}>
      <rect width={size} height={size} fill="#fff" />
      {cells.map(([x, y], i) => (
        <rect key={i} x={x * cell + 0.5} y={y * cell + 0.5} width={cell - 1} height={cell - 1} fill="#0a0f1f" />
      ))}
      {finder(0, 0)}
      {finder(N - 7, 0)}
      {finder(0, N - 7)}
      {/* center logo cutout */}
      <rect x={size / 2 - cell * 3} y={size / 2 - cell * 3} width={cell * 6} height={cell * 6} fill="#fff" />
      <rect x={size / 2 - cell * 2.5} y={size / 2 - cell * 2.5} width={cell * 5} height={cell * 5} rx={6} fill="#06C755" />
      <text x={size / 2} y={size / 2 + cell * 1.4} textAnchor="middle" fontSize={cell * 3.2} fontWeight="800" fill="#fff" fontFamily="system-ui, sans-serif">L</text>
    </svg>
  );
}

function LineQRCard() {
  return (
    <div style={{
      background: "#fff",
      borderRadius: 20,
      padding: "28px 24px",
      boxShadow: "0 24px 60px rgba(0,0,0,0.3)",
      color: "var(--fg)",
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      gap: 16,
      position: "relative",
      overflow: "hidden",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, alignSelf: "stretch", justifyContent: "center" }}>
        <span style={{
          width: 36, height: 36, borderRadius: 10, background: "#06C755",
          display: "grid", placeItems: "center", color: "#fff", fontWeight: 800, fontSize: 18,
          fontFamily: "system-ui, sans-serif",
        }}>L</span>
        <div style={{ textAlign: "left" }}>
          <div style={{ fontSize: 11, color: "var(--fg-3)", fontWeight: 600, letterSpacing: "0.04em" }}>OFFICIAL</div>
          <div style={{ fontSize: 16, fontWeight: 800, color: "var(--fg)", lineHeight: 1.2 }}>公式LINE</div>
        </div>
      </div>

      <div style={{
        padding: 14,
        background: "linear-gradient(135deg, #f3f8ff, #ffffff)",
        border: "1px solid var(--border)",
        borderRadius: 14,
        position: "relative",
      }}>
        <PlaceholderQR size={220} />
        <span style={{
          position: "absolute", top: 8, right: 8,
          background: "rgba(10,15,31,0.78)", color: "#fff",
          fontSize: 10, fontWeight: 700, padding: "3px 8px", borderRadius: 999,
          letterSpacing: "0.04em",
        }}>SAMPLE</span>
      </div>

      <div style={{ textAlign: "center" }}>
        <div style={{ fontSize: 15, fontWeight: 700, color: "var(--fg)", marginBottom: 4 }}>
          友だち追加で無料相談
        </div>
        <div style={{ fontSize: 12, color: "var(--fg-3)", lineHeight: 1.6 }}>
          QRコードを読み取って<br />お気軽にメッセージください
        </div>
      </div>

      <a href="#" className="btn" style={{
        background: "#06C755", color: "#fff", padding: "10px 20px",
        fontSize: 13, fontWeight: 700, borderRadius: 999, alignSelf: "stretch",
        justifyContent: "center", boxShadow: "0 6px 16px rgba(6,199,85,0.35)",
      }}>
        友だち追加する
      </a>
    </div>
  );
}

// ─── 会社概要 ──────────────────────────────────────────────────────────────
function About() {
  const rows = [
    { label: "屋号",       value: "ITtechWorks" },
    { label: "代表者",     value: "白石 智" },
    { label: "設立",       value: "2018年2月" },
    { label: "所在地",     value: "神奈川県川崎市" },
    { label: "事業内容",   value: "Webサイト制作・ランディングページ制作・SEO／集客支援・保守運用サポート" },
    { label: "メール",     value: "info@ittech-works.com" },
    { label: "営業時間",   value: "平日 10:00〜18:00" },
    { label: "対応エリア", value: "全国対応" },
    { label: "URL",        value: "https://ittech-works.com", isUrl: true },
  ];

  return (
    <section id="about" className="section">
      <div className="container" style={{ maxWidth: 860 }}>
        <Reveal>
          <div style={{ textAlign: "center", marginBottom: 16 }}>
            <span className="eyebrow">About</span>
          </div>
        </Reveal>
        <Reveal delay={60}>
          <h2 className="section-title">事業<span className="accent">概要</span></h2>
        </Reveal>

        <Reveal delay={120}>
          <div className="card" style={{ overflow: "hidden" }}>
            {rows.map((row, i) => (
              <div
                key={i}
                style={{
                  display: "grid",
                  gridTemplateColumns: "140px 1fr",
                  borderBottom: i < rows.length - 1 ? "1px solid var(--border)" : "none",
                }}
                className="about-row"
              >
                <div style={{
                  padding: "18px 20px",
                  fontSize: 13,
                  fontWeight: 700,
                  color: "var(--fg-3)",
                  background: "var(--bg-soft)",
                  display: "flex",
                  alignItems: "center",
                  borderRight: "1px solid var(--border)",
                  letterSpacing: "0.02em",
                }}>
                  {row.label}
                </div>
                <div style={{
                  padding: "18px 24px",
                  fontSize: 14,
                  color: "var(--fg)",
                  lineHeight: 1.7,
                  display: "flex",
                  alignItems: "center",
                }}>
                  {row.isUrl ? (
                    <a href={row.value} style={{ color: "var(--primary-600)", fontWeight: 600 }}>{row.value}</a>
                  ) : row.value}
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 480px) {
          .about-row { grid-template-columns: 1fr !important; }
          .about-row > div:first-child { border-right: none !important; border-bottom: 1px solid var(--border); padding: 10px 16px !important; }
          .about-row > div:last-child  { padding: 12px 16px !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Pricing, Flow, FAQ, FinalCTA, About, PlaceholderQR });