// 消費級應用 page — QsHood (with rich imagery)
const CN_HERO_IMG = `${IMG}/2021/07/20210719-223959-001.png`;
const CN_KITCHEN_BG = `${IMG}/2021/07/20210708-122504-002.png`;
const CN_SOL_IMGS = [
  `${IMG}/2021/07/20210719-224119-001-1024x1014.png`,
  `${IMG}/2021/07/20210719-231930-001-1022x1024.png`,
];
const CN_COOKING = `${IMG}/2021/07/Cooking-1.png`;
const CN_FLOW_IMGS = [
  `${IMG}/2021/07/20210725-044853-001.png`,
  `${IMG}/2021/07/20210725-044919-001.png`,
  `${IMG}/2021/07/20210725-044939-001.png`,
  `${IMG}/2021/08/圖片6.png`,
  `${IMG}/2021/08/圖片7.png`,
];
const CN_AWARDS = [
  `${IMG}/2021/07/award1-698x1030-1-694x1024.jpg`,
  `${IMG}/2021/07/award2-698x1030-1-694x1024.jpg`,
  `${IMG}/2021/08/Award-2-b-868x1024.jpg`,
  `${IMG}/2021/07/Award-3-b-893x1024.jpg`,
];
const CN_EXP_IMGS = [
  `${IMG}/2021/08/圖片1-1.png`,
  `${IMG}/2021/08/圖片2-1.png`,
  `${IMG}/2021/08/圖片8.png`,
];

function ConsumerPage({ t, lang, variant, setPage }) {
  const c = t.consumer;
  return (
    <div className="page-enter">
      <PageHero
        eyebrow={c.eyebrow}
        title={c.title}
        tagline={c.subtitle}
        lead={c.lead}
        gradient="60% 30%"
        image={{ src: CN_HERO_IMG, alt: "QsHood", ratio: "4/5" }}
      >
        <div style={{ marginTop: 24 }}>
          <a href="mailto:qiao.shui.org@gmail.com" className="btn btn-primary" style={{ textDecoration: "none" }}>
            {lang === "zh" ? "加 LINE 預約諮詢" : "Book a consultation"}
            <span style={{ fontFamily: "var(--f-mono)" }}>→</span>
          </a>
        </div>
      </PageHero>

      {/* Pull quote with kitchen bg */}
      <section style={{ padding: "60px 0", position: "relative", overflow: "hidden" }}>
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: `linear-gradient(90deg, var(--c-bg) 0%, var(--c-bg) 35%, transparent 100%), url(${CN_KITCHEN_BG})`,
          backgroundSize: "cover", backgroundPosition: "center",
          opacity: 0.95,
        }} />
        <div className="shell" style={{ position: "relative" }}>
          <blockquote style={{
            fontFamily: "var(--f-serif)", fontSize: "clamp(22px, 2.6vw, 38px)",
            color: "var(--c-deep)", lineHeight: 1.35, letterSpacing: "-0.01em",
            margin: 0, paddingLeft: 28, borderLeft: "3px solid var(--c-aqua)",
            maxWidth: 720,
          }}>
            「{c.pullQuote}」
          </blockquote>
        </div>
      </section>

      {/* Problems */}
      <section style={{ padding: "60px 0 100px", background: "var(--c-mist)" }}>
        <div className="shell">
          <SectionHead index="01" eyebrow={lang === "zh" ? "為什麼傳統油煙機效果不彰" : "Why traditional hoods fail"}
                       title={c.problemsTitle} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
            {c.problems.map((p, i) => (
              <div key={i} className="card" style={{ padding: 28 }}>
                <div style={{
                  fontFamily: "var(--f-mono)", fontSize: 10.5, color: "var(--c-aqua)",
                  letterSpacing: "0.18em", marginBottom: 12,
                }}>
                  0{i + 1} / 03
                </div>
                <h4 style={{ fontFamily: "var(--f-serif)", fontSize: 19, fontWeight: 400,
                              margin: "0 0 12px", letterSpacing: "-0.01em" }}>
                  {p.k}
                </h4>
                <p style={{ fontSize: 13.5, color: "var(--c-muted)", lineHeight: 1.75, margin: 0 }}>
                  {p.b}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Quote */}
      <section style={{ padding: "80px 0" }}>
        <div className="shell" style={{ textAlign: "center", maxWidth: 880, margin: "0 auto" }}>
          <p style={{
            fontFamily: "var(--f-serif)", fontSize: "clamp(18px, 2vw, 26px)",
            color: "var(--c-deep)", lineHeight: 1.6, margin: 0, fontStyle: "italic",
          }}>
            {c.quote}
          </p>
        </div>
      </section>

      {/* Solution with images */}
      <section style={{ padding: "40px 0 100px" }}>
        <div className="shell">
          <SectionHead index="02" eyebrow={lang === "zh" ? "QsHood 解決方案" : "QsHood Solution"}
                       title={c.solutionTitle} lead={c.solutionSub} />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "start" }}>
            <div>
              {c.solutionBody.map((para, i) => (
                <p key={i} style={{
                  fontSize: 15, color: "var(--c-ink)", lineHeight: 1.85,
                  margin: i > 0 ? "18px 0 0" : 0,
                }}>
                  {para}
                </p>
              ))}
              <div className="card" style={{ marginTop: 28, padding: 26, background: "var(--c-mist)" }}>
                <div className="eyebrow" style={{ marginBottom: 12 }}>
                  {lang === "zh" ? "科學背書" : "Scientific Endorsement"}
                </div>
                <p style={{ fontFamily: "var(--f-serif)", fontSize: 17, color: "var(--c-deep)",
                             lineHeight: 1.55, margin: 0, letterSpacing: "-0.005em" }}>
                  {c.solutionEndorse}
                </p>
              </div>
            </div>
            <div className="qs-keep-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <RemoteImage src={CN_SOL_IMGS[0]} alt="QsHood detail" ratio="1/1" />
              <RemoteImage src={CN_SOL_IMGS[1]} alt="QsHood section" ratio="1/1" />
              <RemoteImage src={CN_COOKING} alt="Cooking" ratio="1/1" style={{ gridColumn: "1 / -1" }} />
            </div>
          </div>
        </div>
      </section>

      {/* Comparison */}
      <section style={{ padding: "80px 0", background: "var(--c-mist)" }}>
        <div className="shell">
          <SectionHead index="03" eyebrow={lang === "zh" ? "效能對比" : "Comparison"}
                       title={c.comparisonTitle} lead={c.comparisonLead} />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
            {c.comparison.map((row, i) => (
              <div key={i} style={{
                padding: 36, borderRadius: "var(--r-lg)",
                background: i === 1 ? "var(--c-deep)" : "var(--c-paper)",
                color: i === 1 ? "var(--c-paper)" : "var(--c-ink)",
                border: "1px solid var(--c-line)",
              }}>
                <div style={{
                  fontFamily: "var(--f-mono)", fontSize: 11,
                  color: i === 1 ? "var(--c-haze)" : "var(--c-muted)",
                  letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: 14,
                }}>
                  {row.k}
                </div>
                <div style={{
                  fontFamily: "var(--f-serif)",
                  fontSize: "clamp(48px, 5.8vw, 84px)",
                  letterSpacing: "-0.04em", lineHeight: 1,
                  color: i === 1 ? "var(--c-paper)" : "var(--c-deep)",
                }}>
                  {row.v}
                </div>
              </div>
            ))}
          </div>
          <p style={{ marginTop: 18, fontSize: 11.5, color: "var(--c-muted)", fontFamily: "var(--f-mono)" }}>
            {c.comparisonNote}
          </p>
        </div>
      </section>

      {/* Experience timeline + small visuals */}
      <section style={{ padding: "100px 0 80px" }}>
        <div className="shell">
          <SectionHead index="04" eyebrow={lang === "zh" ? "技術演進" : "Evolution"}
                       title={c.experienceTitle} />
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "start" }}>
            <div style={{ borderTop: "1px solid var(--c-line)" }}>
              {c.experience.map((e, i) => (
                <div key={i} style={{
                  display: "grid", gridTemplateColumns: "100px 1fr",
                  gap: 24, padding: "20px 0", borderBottom: "1px solid var(--c-line)",
                  alignItems: "baseline",
                }}>
                  <div style={{ fontFamily: "var(--f-mono)", fontSize: 14, color: "var(--c-aqua)",
                                  letterSpacing: "0.1em" }}>
                    {e.y}
                  </div>
                  <div style={{ fontSize: 14, color: "var(--c-ink)", lineHeight: 1.6 }}>
                    {e.t}
                  </div>
                </div>
              ))}
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 16, position: "sticky", top: 100 }}>
              {CN_EXP_IMGS.map((src, i) => (
                <RemoteImage key={i} src={src} alt={`evolution ${i + 1}`} ratio="4/3" />
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Advantages */}
      <section style={{ padding: "80px 0", background: "var(--c-mist)" }}>
        <div className="shell">
          <SectionHead index="05" eyebrow={lang === "zh" ? "技術優勢" : "Advantages"}
                       title={c.advantagesTitle} />
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
            borderTop: "1px solid var(--c-line)", borderBottom: "1px solid var(--c-line)",
          }}>
            {c.advantages.map((a, i) => (
              <div key={i} style={{
                padding: "36px 22px 36px 0",
                paddingLeft: i > 0 ? 22 : 0,
                borderRight: i < c.advantages.length - 1 ? "1px solid var(--c-line)" : "none",
              }}>
                <h4 style={{ fontFamily: "var(--f-serif)", fontSize: 20, fontWeight: 400,
                              margin: "0 0 10px", letterSpacing: "-0.01em", color: "var(--c-deep)" }}>
                  {a.k}
                </h4>
                <p style={{ fontSize: 13.5, color: "var(--c-muted)", lineHeight: 1.7, margin: 0 }}>
                  {a.b}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Flow with images */}
      <section style={{ padding: "100px 0" }}>
        <div className="shell">
          <SectionHead index="06" eyebrow={lang === "zh" ? "解決方案流程" : "Process"}
                       title={c.flowTitle} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 14 }}>
            {c.flow.map((f, i) => (
              <div key={i} className="card" style={{ padding: 0, overflow: "hidden",
                                                      display: "flex", flexDirection: "column" }}>
                <RemoteImage src={CN_FLOW_IMGS[i]} alt={f.k} ratio="4/3" style={{ borderRadius: 0 }} />
                <div style={{ padding: 18 }}>
                  <div style={{
                    fontFamily: "var(--f-mono)", fontSize: 10.5, color: "var(--c-aqua)",
                    letterSpacing: "0.18em", marginBottom: 8,
                  }}>
                    STEP {f.n}
                  </div>
                  <h4 style={{ fontFamily: "var(--f-serif)", fontSize: 17, fontWeight: 400,
                                margin: "0 0 8px", letterSpacing: "-0.01em" }}>
                    {f.k}
                  </h4>
                  <p style={{ fontSize: 12.5, color: "var(--c-muted)", lineHeight: 1.6, margin: 0 }}>
                    {f.b}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Awards strip */}
      <section style={{ padding: "80px 0", background: "var(--c-mist)" }}>
        <div className="shell">
          <div className="eyebrow" style={{ marginBottom: 28, textAlign: "center" }}>
            {lang === "zh" ? "品質保證最安心" : "Recognized Quality"}
          </div>
          <div className="qs-keep-2col" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
            {CN_AWARDS.map((src, i) => (
              <RemoteImage key={i} src={src} alt={`award ${i + 1}`} ratio="3/4" />
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: "80px 0 100px" }}>
        <div className="shell">
          <SectionHead index="07" eyebrow="FAQ" title={c.faqTitle} />
          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
            {c.faq.map((item, i) => (
              <FaqItem key={i} item={item} index={i} total={c.faq.length} />
            ))}
          </div>
        </div>
      </section>

      <ClosingCTA title={c.ctaTitle} body={c.ctaBody}
                  primaryLabel={lang === "zh" ? "加 LINE 預約" : "Book on LINE"} />
    </div>
  );
}

function FaqItem({ item, index, total }) {
  const [open, setOpen] = React.useState(index === 0);
  return (
    <div style={{
      borderTop: "1px solid var(--c-line)",
      borderBottom: index === total - 1 ? "1px solid var(--c-line)" : "none",
    }}>
      <button
        onClick={() => setOpen(!open)}
        style={{
          width: "100%", display: "grid", gridTemplateColumns: "60px 1fr 40px",
          alignItems: "center", gap: 24, padding: "22px 0",
          background: "transparent", border: "none", textAlign: "left", cursor: "pointer",
          fontFamily: "inherit",
        }}
      >
        <span style={{ fontFamily: "var(--f-mono)", fontSize: 12.5, color: "var(--c-aqua)",
                        letterSpacing: "0.15em" }}>
          Q{String(index + 1).padStart(2, "0")}
        </span>
        <span style={{ fontFamily: "var(--f-serif)", fontSize: 18, color: "var(--c-ink)",
                        letterSpacing: "-0.01em" }}>
          {item.q}
        </span>
        <span style={{ fontFamily: "var(--f-mono)", fontSize: 18, color: "var(--c-deep)",
                        textAlign: "right", transform: open ? "rotate(45deg)" : "rotate(0)",
                        transition: "transform 0.3s var(--ease-out)" }}>
          +
        </span>
      </button>
      <div style={{
        maxHeight: open ? 400 : 0, opacity: open ? 1 : 0,
        overflow: "hidden", transition: "all 0.4s var(--ease-out)",
      }}>
        <div style={{ padding: "0 0 24px 84px" }}>
          <p style={{ fontSize: 14, color: "var(--c-muted)", lineHeight: 1.75, margin: 0, maxWidth: 800 }}>
            {item.a}
          </p>
        </div>
      </div>
    </div>
  );
}

window.ConsumerPage = ConsumerPage;