// SoftWarm — content sections (story, features, spotlight, how, price, voices, faq, cta)
// Compositional pieces of the polished A landing page.

const { useState: useStateSWS, useRef: useRefSWS, useEffect: useEffectSWS } = React;

// Reveal-on-scroll hook — single global IntersectionObserver, no per-element cost
function useReveal(threshold = 0.12) {
  const ref = useRefSWS(null);
  useEffectSWS(() => {
    const el = ref.current;
    if (!el) return;
    el.style.opacity = '0';
    el.style.transform = 'translateY(14px)';
    el.style.transition = 'opacity .8s ease, transform .8s ease';
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          el.style.opacity = '1';
          el.style.transform = 'translateY(0)';
          io.unobserve(el);
        }
      });
    }, { threshold });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

// --- Trust strip ----------------------------------------------------------
function SWTrust({ t, C, display }) {
  const ref = useReveal();
  return (
    <section ref={ref} className="sw-trust-sec" style={{
      padding: '36px 64px',
      borderTop: `1px solid ${C.line}`,
      borderBottom: `1px solid ${C.line}`,
      background: C.surface,
    }}>
      <div className="sw-trust-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, maxWidth: 1100, margin: '0 auto' }}>
        {t.trustItems.map((it, i) => (
          <div key={i} style={{ textAlign: 'center', position: 'relative' }}>
            {i > 0 && (
              <div aria-hidden className="sw-trust-divider" style={{
                position: 'absolute', left: 0, top: '20%', height: '60%', width: 1,
                background: C.line,
              }} />
            )}
            <div style={{ fontFamily: display, fontSize: 28, fontWeight: 500, color: C.greenDeep, marginBottom: 8 }}>{it.v}</div>
            <div style={{ fontSize: 12, color: C.inkSoft, letterSpacing: '0.12em', fontWeight: 600 }}>{it.l.toUpperCase()}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// --- Quote bridge ---------------------------------------------------------
function SWBridge({ t, C, display }) {
  const ref = useReveal();
  return (
    <section ref={ref} className="sw-bridge-sec" style={{ padding: '96px 64px', textAlign: 'center' }}>
      <div className="sw-bridge-q" style={{
        fontFamily: display, fontSize: 38, lineHeight: 1.7,
        whiteSpace: 'pre-line', maxWidth: 820, margin: '0 auto',
        letterSpacing: '0.02em', color: C.ink,
      }}>
        <span className="sw-bridge-mark" style={{ fontSize: 84, color: C.peach, lineHeight: 0.5, verticalAlign: '-0.2em', marginRight: 12 }}>“</span>
        {t.bridgeQuote}
        <span className="sw-bridge-mark" style={{ fontSize: 84, color: C.peach, lineHeight: 0.5, verticalAlign: '-0.5em', marginLeft: 12 }}>”</span>
      </div>
    </section>
  );
}

// --- Mini bridge (one-line transition copy) -----------------------------
function SWMiniBridge({ text, C, display, accent = 'green' }) {
  const ref = useReveal();
  const bg = accent === 'sand' ? (C.sand + '60') : (C.greenSoft + '50');
  return (
    <section ref={ref} className="sw-minibridge-sec" style={{
      padding: '64px 56px', textAlign: 'center', background: bg,
      borderTop: `1px solid ${C.line}`, borderBottom: `1px solid ${C.line}`,
    }}>
      <p className="sw-minibridge-q" style={{
        fontFamily: display, fontSize: 30, lineHeight: 1.7,
        whiteSpace: 'pre-line', maxWidth: 760, margin: '0 auto',
        letterSpacing: '0.02em', color: C.ink, fontWeight: 500,
      }}>
        {text}
      </p>
    </section>
  );
}

// --- Compare table ------------------------------------------------------
function SWCompare({ t, C, display }) {
  const ref = useReveal();
  if (!t.compareRows) return null;
  const cellBase = {
    padding: '20px 18px',
    fontSize: 14.5, lineHeight: 1.7, color: C.ink,
    borderBottom: `1px solid ${C.line}`,
    verticalAlign: 'middle',
  };
  const symStyle = { fontFamily: display, fontSize: 22, fontWeight: 500 };
  return (
    <section ref={ref} className="sw-compare-sec" style={{ padding: '110px 64px', background: C.surface }}>
      <div style={{ textAlign: 'center', marginBottom: 48, maxWidth: 720, margin: '0 auto 48px' }}>
        <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.22em', color: C.green, marginBottom: 16 }}>
          {t.compareEyebrow.toUpperCase()}
        </div>
        <h2 style={{ fontFamily: display, fontSize: 44, fontWeight: 500, margin: '0 0 20px', lineHeight: 1.25, letterSpacing: '0.01em' }}>
          {t.compareTitle}
        </h2>
        <p style={{ fontSize: 16, lineHeight: 1.9, color: C.inkSoft, margin: 0 }}>{t.compareLead}</p>
      </div>

      <div className="sw-compare-wrap" style={{
        maxWidth: 1080, margin: '0 auto',
        background: C.surface, border: `1px solid ${C.line}`, borderRadius: 22,
        overflow: 'hidden',
      }}>
        <table className="sw-compare-table" style={{ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed' }}>
          <colgroup>
            <col style={{ width: '24%' }} />
            <col style={{ width: '28%' }} />
            <col style={{ width: '24%' }} />
            <col style={{ width: '24%' }} />
          </colgroup>
          <thead>
            <tr>
              <th style={{ ...cellBase, background: C.cream || '#FAF6F0', textAlign: 'left', fontWeight: 600, fontSize: 12, letterSpacing: '0.14em', color: C.inkSoft }} />
              <th style={{ ...cellBase, background: C.greenSoft, textAlign: 'center', fontFamily: display, fontSize: 17, fontWeight: 600, color: C.greenDeep, letterSpacing: '0.04em' }}>
                {t.compareCols[0]}
              </th>
              <th style={{ ...cellBase, background: C.cream || '#FAF6F0', textAlign: 'center', fontSize: 13, fontWeight: 600, color: C.inkSoft, letterSpacing: '0.04em' }}>
                {t.compareCols[1]}
              </th>
              <th style={{ ...cellBase, background: C.cream || '#FAF6F0', textAlign: 'center', fontSize: 13, fontWeight: 600, color: C.inkSoft, letterSpacing: '0.04em' }}>
                {t.compareCols[2]}
              </th>
            </tr>
          </thead>
          <tbody>
            {t.compareRows.map((r, i) => {
              const last = i === t.compareRows.length - 1;
              const rowCell = { ...cellBase, ...(last ? { borderBottom: 'none' } : null) };
              return (
                <tr key={i}>
                  <td style={{ ...rowCell, fontWeight: 500, color: C.ink, fontFamily: display, letterSpacing: '0.02em', textAlign: 'left' }}>
                    {r.label}
                  </td>
                  <td style={{ ...rowCell, background: C.greenSoft + '40', textAlign: 'center', ...symStyle, color: C.greenDeep }}>
                    {r.a}
                  </td>
                  <td style={{ ...rowCell, textAlign: 'center', ...symStyle, color: C.inkSoft }}>
                    {r.b}
                  </td>
                  <td style={{ ...rowCell, textAlign: 'center', ...symStyle, color: C.inkSoft }}>
                    {r.c}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <p style={{ maxWidth: 1080, margin: '24px auto 0', fontSize: 12, color: C.inkSoft, textAlign: 'center', lineHeight: 1.7 }}>
        {t.compareNote}
      </p>
    </section>
  );
}

// --- Story / Philosophy ---------------------------------------------------
function SWStory({ t, C, display, lang }) {
  const ref = useReveal();
  return (
    <section ref={ref} style={{ padding: '96px 64px', background: C.surface, borderTop: `1px solid ${C.line}`, borderBottom: `1px solid ${C.line}` }}>
      <div className="sw-story-grid" style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 80, alignItems: 'center', maxWidth: 1100, margin: '0 auto' }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.22em', color: C.green, marginBottom: 18 }}>
            {lang === 'ja' ? 'OUR PHILOSOPHY' : 'OUR PHILOSOPHY'}
          </div>
          <h2 style={{
            fontFamily: display, fontSize: 48, fontWeight: 500,
            lineHeight: 1.3, margin: 0, whiteSpace: 'pre-line',
            letterSpacing: '0.01em',
          }}>{t.storyTitle}</h2>
          {/* Subtle ornament */}
          <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ width: 36, height: 1, background: C.greenDeep }} />
            <span style={{ fontFamily: display, fontSize: 14, color: C.greenDeep, letterSpacing: '0.18em' }}>{t.storyEyebrow}</span>
          </div>
        </div>
        <div className="sw-story-body" style={{ fontSize: 17, lineHeight: 2, color: C.ink, fontFamily: display, letterSpacing: '0.02em' }}>
          <p style={{ margin: '0 0 22px', fontSize: 22, color: C.greenDeep }}>{t.storyBody1}</p>
          <p style={{ margin: '0 0 22px' }}>{t.storyBody2}</p>
          <p style={{ margin: '0 0 28px', whiteSpace: 'pre-line' }}>{t.storyBody3}</p>
          <div style={{ fontSize: 13, color: C.inkSoft, letterSpacing: '0.06em' }}>{t.storyAttrib}</div>
        </div>
      </div>
    </section>
  );
}

// --- Feature icon set ----------------------------------------------------
function SWFeatIcon({ name, c, size = 28 }) {
  const s = { width: size, height: size, stroke: c, strokeWidth: 1.6, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'pulse': return (<svg viewBox="0 0 24 24" {...s}><path d="M3 12 H7 L9 6 L13 18 L15 12 H21" /></svg>);
    case 'pin':   return (<svg viewBox="0 0 24 24" {...s}><path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z" /><circle cx="12" cy="10" r="2.5" /></svg>);
    case 'sos':   return (<svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9" /><path d="M9 10c0-1 .8-1.8 1.8-1.8h2.4c1 0 1.8.8 1.8 1.8s-.8 1.8-1.8 1.8H10.8c-1 0-1.8.8-1.8 1.8s.8 1.8 1.8 1.8h2.4c1 0 1.8-.8 1.8-1.8" /></svg>);
    case 'fall':  return (<svg viewBox="0 0 24 24" {...s}><circle cx="9" cy="6" r="2.2" /><path d="M5 22 L9 14 L13 18 L20 15" /><path d="M9 14 L9 10" /></svg>);
    case 'list':  return (<svg viewBox="0 0 24 24" {...s}><path d="M4 6h16M4 12h16M4 18h10" /></svg>);
    case 'smile': return (<svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9" /><path d="M8 14 Q12 17 16 14" /><circle cx="9" cy="10" r="0.8" fill={c} /><circle cx="15" cy="10" r="0.8" fill={c} /></svg>);
    default: return null;
  }
}

// --- Features grid -------------------------------------------------------
function SWFeatures({ t, C, display, lang }) {
  const ref = useReveal();
  return (
    <section ref={ref} id="features" style={{ padding: '110px 64px' }}>
      <div className="sw-features-head" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 64, gap: 32 }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.22em', color: C.green, marginBottom: 16 }}>
            {lang === 'ja' ? '主要機能' : 'FEATURES'}
          </div>
          <h2 style={{ fontFamily: display, fontSize: 56, fontWeight: 500, margin: 0, lineHeight: 1.15, letterSpacing: '0.01em' }}>
            {t.featTitle}
          </h2>
        </div>
        <p style={{ fontSize: 17, color: C.inkSoft, maxWidth: 360, lineHeight: 1.8, margin: 0 }}>{t.featSub}</p>
      </div>
      <div className="sw-feat-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {t.features.map((f, i) => (
          <div key={i} style={{
            background: C.surface,
            borderRadius: 24,
            padding: '36px 32px',
            border: `1px solid ${C.line}`,
            minHeight: 260,
            display: 'flex', flexDirection: 'column',
            position: 'relative',
            transition: 'transform .2s ease, box-shadow .2s ease',
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 18px 40px -16px rgba(31,111,74,.18)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}
          >
            <div style={{
              width: 52, height: 52, borderRadius: 14,
              background: C.greenSoft,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 24,
            }}>
              <SWFeatIcon name={f.icon} c={C.greenDeep} size={28} />
            </div>
            <div style={{
              fontFamily: display, fontSize: 13, color: C.green, fontWeight: 600,
              letterSpacing: '0.16em', marginBottom: 10,
            }}>{f.tag}</div>
            <h3 style={{
              fontFamily: display, fontSize: 24, fontWeight: 500,
              margin: '0 0 14px', lineHeight: 1.4, letterSpacing: '0.02em',
            }}>{f.title}</h3>
            {f.sub && (
              <div style={{
                fontSize: 12, fontWeight: 600, letterSpacing: '0.16em',
                color: C.inkSoft, marginTop: -8, marginBottom: 14, textTransform: 'uppercase',
              }}>{f.sub}</div>
            )}
            <p style={{ fontSize: 14, lineHeight: 1.85, color: C.inkSoft, margin: 0 }}>{f.body}</p>
            {f.note && (
              <p style={{
                fontSize: 12, lineHeight: 1.7, color: C.inkSoft,
                margin: '14px 0 0', paddingTop: 14,
                borderTop: `1px dashed ${C.line}`,
              }}>{f.note}</p>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}

// --- Spotlight (Detail spotlight cards: Inactivity + SOS) ---------------
function SWSpotlight({ t, C, display, lang }) {
  const ref = useReveal();
  return (
    <section ref={ref} style={{ padding: '110px 64px', background: C.sand + '40' }}>
      <div style={{ textAlign: 'center', marginBottom: 64 }}>
        <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.22em', color: C.green, marginBottom: 16 }}>
          {t.spotlightEyebrow.toUpperCase()}
        </div>
        <h2 style={{ fontFamily: display, fontSize: 52, fontWeight: 500, margin: 0, lineHeight: 1.25, whiteSpace: 'pre-line', letterSpacing: '0.01em' }}>
          {t.spotlightTitle}
        </h2>
      </div>
      <div className="sw-spotlight-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        {/* Card 1 — Daily / Inactivity */}
        <div className="sw-pad-card" style={{
          background: C.surface, borderRadius: 28, padding: '40px',
          border: `1px solid ${C.line}`, minHeight: 460,
          display: 'flex', flexDirection: 'column',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
            <span style={{
              padding: '6px 12px', borderRadius: 999, background: C.greenSoft,
              fontSize: 11, fontWeight: 700, color: C.greenDeep, letterSpacing: '0.18em',
            }}>{t.spot1Tag}</span>
            <span style={{ width: 16, height: 1, background: C.line }} />
          </div>
          <h3 style={{ fontFamily: display, fontSize: 30, fontWeight: 500, margin: '0 0 16px', lineHeight: 1.4, letterSpacing: '0.02em' }}>
            {t.spot1Title}
          </h3>
          <p style={{ fontSize: 15, lineHeight: 1.9, color: C.inkSoft, margin: '0 0 32px' }}>{t.spot1Body}</p>

          {/* Activity chart */}
          <div style={{ marginTop: 'auto' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: C.inkSoft, marginBottom: 14, fontWeight: 600, letterSpacing: '0.08em' }}>
              <span>{t.spot1ChartLabel.toUpperCase()}</span>
              <span>{lang === 'ja' ? '月 火 水 木 金 土 日' : 'M  T  W  T  F  S  S'}</span>
            </div>
            <div className="sw-spot-chart" style={{ display: 'flex', alignItems: 'flex-end', gap: 10, height: 96 }}>
              {[78, 82, 70, 86, 18, 74, 80].map((v, i) => {
                const isInactive = i === 4; // Friday — unusually low
                return (
                  <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                    <div style={{
                      width: '100%', height: `${Math.max(v * 0.96, 4)}px`,
                      background: isInactive ? C.peach : C.green,
                      opacity: isInactive ? 0.9 : 0.7,
                      borderRadius: '6px 6px 0 0',
                    }} />
                    <div style={{ fontSize: 10, color: C.inkSoft, fontWeight: 600, letterSpacing: '0.04em' }}>
                      {(lang === 'ja' ? ['月','火','水','木','金','土','日'] : ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'])[i]}
                    </div>
                  </div>
                );
              })}
            </div>
            <div style={{ marginTop: 14, fontSize: 12, color: C.inkSoft, display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 8, height: 8, background: C.peach, borderRadius: 999 }} />
              <span>{t.spot1Caption}</span>
            </div>
          </div>
        </div>

        {/* Card 2 — Urgent / SOS */}
        <div className="sw-pad-card" style={{
          background: '#2A2620', color: '#fff', borderRadius: 28, padding: '40px',
          minHeight: 460, display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden',
        }}>
          <div aria-hidden style={{
            position: 'absolute', top: -80, right: -80,
            width: 280, height: 280, borderRadius: '50%',
            background: `radial-gradient(circle, #C4564B66 0%, transparent 70%)`,
          }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24, position: 'relative' }}>
            <span style={{
              padding: '6px 12px', borderRadius: 999, background: '#C4564B',
              fontSize: 11, fontWeight: 700, color: '#fff', letterSpacing: '0.18em',
            }}>{t.spot2Tag}</span>
            <span style={{ width: 16, height: 1, background: 'rgba(255,255,255,0.2)' }} />
          </div>
          <h3 style={{ fontFamily: display, fontSize: 30, fontWeight: 500, margin: '0 0 16px', lineHeight: 1.4, letterSpacing: '0.02em', position: 'relative' }}>
            {t.spot2Title}
          </h3>
          <p style={{ fontSize: 15, lineHeight: 1.9, opacity: 0.75, margin: '0 0 32px', position: 'relative' }}>{t.spot2Body}</p>

          {/* Flow */}
          <div style={{ marginTop: 'auto', position: 'relative' }}>
            <div className="sw-flow-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
              {t.spot2Flow.map((f, i) => (
                <div key={i} style={{
                  background: 'rgba(255,255,255,0.05)',
                  borderRadius: 14,
                  padding: '16px 14px',
                  borderLeft: `2px solid #C4564B`,
                }}>
                  <div style={{ fontFamily: display, fontSize: 12, color: '#E6A99F', letterSpacing: '0.12em', marginBottom: 8 }}>{f.n}</div>
                  <div style={{ fontSize: 13, lineHeight: 1.55, color: '#fff' }}>{f.t}</div>
                </div>
              ))}
            </div>
            <p style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', margin: '16px 0 0', lineHeight: 1.6 }}>
              {t.spot2Note}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// --- How it works --------------------------------------------------------
function SWHow({ t, C, display, lang }) {
  const ref = useReveal();
  return (
    <section ref={ref} id="how" style={{ padding: '110px 64px', background: C.surface }}>
      <div style={{ textAlign: 'center', marginBottom: 72 }}>
        <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.22em', color: C.green, marginBottom: 16 }}>
          {t.howEyebrow.toUpperCase()}
        </div>
        <h2 style={{ fontFamily: display, fontSize: 52, fontWeight: 500, margin: 0, lineHeight: 1.2, letterSpacing: '0.01em' }}>
          {t.howTitle}
        </h2>
      </div>
      <div style={{ position: 'relative', maxWidth: 1000, margin: '0 auto' }}>
        <div aria-hidden className="sw-how-connector" style={{
          position: 'absolute', top: 40, left: '17%', right: '17%', height: 2,
          background: `repeating-linear-gradient(to right, ${C.greenSoft} 0 8px, transparent 8px 16px)`,
        }} />
        <div className="sw-how-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, position: 'relative' }}>
          {t.how.map((s, i) => (
            <div key={i} style={{ textAlign: 'center' }}>
              <div style={{
                width: 80, height: 80, borderRadius: '50%',
                background: i === 0 ? C.greenSoft : i === 1 ? C.peach + '88' : C.sand,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: display, fontSize: 36, fontWeight: 500, color: C.greenDeep,
                margin: '0 auto 24px',
                border: `1px solid ${C.surface}`,
                boxShadow: '0 0 0 6px ' + C.surface,
              }}>{s.n}</div>
              <h3 style={{ fontFamily: display, fontSize: 22, fontWeight: 500, margin: '0 0 12px', letterSpacing: '0.02em' }}>{s.t}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.85, color: C.inkSoft, margin: 0, maxWidth: 240, marginLeft: 'auto', marginRight: 'auto' }}>{s.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// --- How it works — detailed guide --------------------------------------
function SWHowDetail({ t, C, display, lang }) {
  const ref = useReveal();
  return (
    <section ref={ref} id="how-detail" className="sw-guide-sec" style={{ padding: '110px 64px', background: C.cream || '#FAF6F0' }}>
      {/* Header */}
      <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 720, margin: '0 auto 56px' }}>
        <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.22em', color: C.green, marginBottom: 16 }}>
          {t.guideEyebrow.toUpperCase()}
        </div>
        <h2 style={{ fontFamily: display, fontSize: 44, fontWeight: 500, margin: '0 0 20px', lineHeight: 1.25, letterSpacing: '0.01em' }}>
          {t.guideTitle}
        </h2>
        <p style={{ fontSize: 16, lineHeight: 1.9, color: C.inkSoft, margin: 0, whiteSpace: 'pre-line' }}>
          {t.guideLead}
        </p>
      </div>

      {/* Prep callout */}
      <div className="sw-guide-prep" style={{
        maxWidth: 880, margin: '0 auto 48px',
        background: C.surface, border: `1px solid ${C.line}`, borderRadius: 22,
        padding: '28px 36px',
        display: 'flex', gap: 28, alignItems: 'flex-start',
      }}>
        <div style={{
          flexShrink: 0,
          width: 44, height: 44, borderRadius: '50%',
          background: C.greenSoft,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }} aria-hidden>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={C.greenDeep} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="4" y="3" width="16" height="18" rx="2" />
            <path d="M9 8h6 M9 12h6 M9 16h4" />
          </svg>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: display, fontSize: 18, fontWeight: 500, marginBottom: 12, letterSpacing: '0.02em' }}>
            {t.guidePrepTitle}
          </div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 8 }}>
            {t.guidePrep.map((p, i) => (
              <li key={i} style={{ display: 'flex', gap: 12, fontSize: 14.5, lineHeight: 1.7, color: C.ink }}>
                <span style={{ color: C.green, fontWeight: 700, flexShrink: 0 }}>・</span>
                <span>{p}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* Steps */}
      <ol className="sw-guide-steps" style={{
        listStyle: 'none', padding: 0, margin: '0 auto 56px',
        maxWidth: 880, display: 'grid', gap: 18,
      }}>
        {t.guideSteps.map((s, i) => (
          <li key={i} className="sw-guide-step" style={{
            background: C.surface, border: `1px solid ${C.line}`, borderRadius: 22,
            padding: '32px 36px',
            display: 'grid', gridTemplateColumns: '64px 1fr', gap: 28, alignItems: 'flex-start',
          }}>
            <div style={{
              width: 56, height: 56, borderRadius: '50%',
              background: i % 3 === 0 ? C.greenSoft : i % 3 === 1 ? (C.peach + '88') : C.sand,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: display, fontSize: 26, fontWeight: 500, color: C.greenDeep,
              border: `1px solid ${C.surface}`,
              boxShadow: '0 0 0 4px ' + C.surface,
            }}>{s.n}</div>
            <div>
              <h3 style={{ fontFamily: display, fontSize: 22, fontWeight: 500, margin: '4px 0 12px', letterSpacing: '0.02em' }}>
                {s.t}
              </h3>
              <p style={{ fontSize: 15, lineHeight: 1.95, color: C.inkSoft, margin: '0 0 16px' }}>
                {s.b}
              </p>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '6px 14px',
                background: C.greenSoft + '88',
                borderRadius: 999,
                fontSize: 13, color: C.greenDeep, fontWeight: 500, letterSpacing: '0.02em',
              }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
                  <path d="M20 6 9 17l-5-5" />
                </svg>
                {s.ok}
              </div>
            </div>
          </li>
        ))}
      </ol>

      {/* Caution line */}
      <p className="sw-guide-caution" style={{
        maxWidth: 880, margin: '0 auto 56px',
        fontSize: 13, lineHeight: 1.8, color: C.inkSoft,
        padding: '14px 18px', borderLeft: `3px solid ${C.peach}`,
        background: 'rgba(255,247,238,0.6)',
      }}>
        {t.guideCaution}
      </p>

      {/* Troubleshooting */}
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <h3 style={{
          fontFamily: display, fontSize: 24, fontWeight: 500, margin: '0 0 24px',
          letterSpacing: '0.02em', textAlign: 'center',
        }}>
          {t.guideTroubleTitle}
        </h3>
        <div className="sw-guide-trouble" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {t.guideTrouble.map((tr, i) => (
            <div key={i} style={{
              background: C.surface, border: `1px solid ${C.line}`, borderRadius: 18,
              padding: '22px 24px',
            }}>
              <div style={{
                fontFamily: display, fontSize: 15.5, fontWeight: 500, marginBottom: 10,
                letterSpacing: '0.01em', color: C.ink,
                display: 'flex', gap: 10, alignItems: 'flex-start',
              }}>
                <span style={{ color: C.peach, flexShrink: 0 }} aria-hidden>Q.</span>
                <span>{tr.q}</span>
              </div>
              <div style={{ fontSize: 14, lineHeight: 1.85, color: C.inkSoft, paddingLeft: 24 }}>
                {tr.a}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// --- Pricing (in-trial) -------------------------------------------------
function SWPrice({ t, C, display, lang }) {
  const ref = useReveal();
  return (
    <section ref={ref} id="price" style={{ padding: '110px 64px' }}>
      <div className="sw-price-grid sw-price-card" style={{
        maxWidth: 1080, margin: '0 auto',
        background: C.surface, borderRadius: 32,
        padding: '64px 56px',
        border: `1px solid ${C.line}`,
        display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, alignItems: 'center',
        position: 'relative', overflow: 'hidden',
      }}>
        <div aria-hidden style={{
          position: 'absolute', top: -80, left: -80, width: 240, height: 240,
          background: `radial-gradient(circle, ${C.greenSoft}aa 0%, transparent 70%)`,
        }} />
        <div style={{ position: 'relative' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 14px', borderRadius: 999,
            background: C.peach + '50', color: '#7E4F39',
            fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', marginBottom: 22,
          }}>
            <span style={{ width: 6, height: 6, background: '#C4564B', borderRadius: 999 }} />
            {lang === 'ja' ? '試験運用中' : 'IN PILOT'}
          </div>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.22em', color: C.green, marginBottom: 14 }}>
            {t.priceEyebrow.toUpperCase()}
          </div>
          <h2 style={{ fontFamily: display, fontSize: 38, fontWeight: 500, margin: '0 0 22px', lineHeight: 1.45, letterSpacing: '0.01em' }}>
            {t.priceTitle}
          </h2>
          <p style={{ fontSize: 15, lineHeight: 1.9, color: C.inkSoft, margin: 0, maxWidth: 460 }}>{t.priceBody}</p>
        </div>
        <div style={{ position: 'relative' }}>
          <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 24px' }}>
            {t.priceItems.map((it, i) => (
              <li key={i} style={{
                display: 'flex', alignItems: 'center', gap: 14,
                padding: '14px 0',
                borderBottom: i < t.priceItems.length - 1 ? `1px dashed ${C.line}` : 'none',
                fontSize: 15, color: C.ink,
              }}>
                <span style={{
                  width: 24, height: 24, borderRadius: 999, background: C.greenSoft,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  color: C.greenDeep, fontSize: 14, fontWeight: 700,
                }}>✓</span>
                {it}
              </li>
            ))}
          </ul>
          <p style={{ fontSize: 12, color: C.inkSoft, lineHeight: 1.7, margin: 0 }}>
            {t.priceNote}
          </p>
        </div>
      </div>
    </section>
  );
}

// --- Voices --------------------------------------------------------------
function SWVoices({ t, C, display, lang }) {
  const ref = useReveal();
  return (
    <section ref={ref} style={{ padding: '110px 64px', background: C.surface, borderTop: `1px solid ${C.line}`, borderBottom: `1px solid ${C.line}` }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, gap: 32 }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.22em', color: C.green, marginBottom: 14 }}>
            {t.voiceEyebrow.toUpperCase()}
          </div>
          <h2 style={{ fontFamily: display, fontSize: 48, fontWeight: 500, margin: 0, lineHeight: 1.2, letterSpacing: '0.01em' }}>
            {t.voiceTitle}
          </h2>
        </div>
        <div style={{ fontSize: 11, color: C.inkSoft, fontFamily: 'ui-monospace, monospace' }}>{t.voicesNote}</div>
      </div>
      <div className="sw-voices-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {t.voices.map((v, i) => (
          <div key={i} style={{
            background: C.bg, borderRadius: 24, padding: '36px 32px',
            border: `1px solid ${C.line}`, position: 'relative',
            display: 'flex', flexDirection: 'column', minHeight: 260,
          }}>
            <div style={{ fontFamily: display, fontSize: 56, color: C.peach, lineHeight: 0.5, marginBottom: 0, height: 24 }}>“</div>
            <p style={{
              fontFamily: display, fontSize: 16, lineHeight: 1.95,
              color: C.ink, letterSpacing: '0.02em', margin: '0 0 24px',
              flex: 1,
            }}>{v.body}</p>
            <div style={{ borderTop: `1px solid ${C.line}`, paddingTop: 18 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: C.ink, marginBottom: 4 }}>{v.name}</div>
              <div style={{ fontSize: 12, color: C.inkSoft, letterSpacing: '0.02em' }}>{v.rel}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// --- FAQ -----------------------------------------------------------------
function SWFaq({ t, C, display, lang }) {
  const ref = useReveal();
  const [open, setOpen] = useStateSWS(0);
  return (
    <section ref={ref} id="faq" style={{ padding: '110px 64px' }}>
      <div className="sw-faq-grid" style={{ display: 'grid', gridTemplateColumns: '0.6fr 1fr', gap: 80, maxWidth: 1100, margin: '0 auto' }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.22em', color: C.green, marginBottom: 16 }}>
            {t.faqEyebrow.toUpperCase()}
          </div>
          <h2 style={{ fontFamily: display, fontSize: 48, fontWeight: 500, margin: 0, lineHeight: 1.25, letterSpacing: '0.01em' }}>
            {t.faqTitle}
          </h2>
        </div>
        <div>
          {t.faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderTop: i === 0 ? `1px solid ${C.line}` : 'none',
                borderBottom: `1px solid ${C.line}`,
              }}>
                <button
                  type="button"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    width: '100%', textAlign: 'left',
                    padding: '24px 4px', border: 0, background: 'transparent', cursor: 'pointer',
                    fontFamily: 'inherit', color: C.ink,
                  }}
                >
                  <span className="sw-faq-q" style={{ fontFamily: display, fontSize: 18, fontWeight: 500, letterSpacing: '0.02em', paddingRight: 16 }}>
                    {f.q}
                  </span>
                  <span style={{
                    width: 32, height: 32, borderRadius: 999, background: isOpen ? C.greenDeep : C.greenSoft,
                    color: isOpen ? '#fff' : C.greenDeep,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 16, fontWeight: 500, flexShrink: 0,
                    transition: 'all .2s ease',
                  }}>{isOpen ? '−' : '+'}</span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 320 : 0,
                  overflow: 'hidden',
                  transition: 'max-height .35s ease, padding .35s ease',
                  padding: isOpen ? '0 4px 24px' : '0 4px',
                }}>
                  <p style={{ fontSize: 14, lineHeight: 1.95, color: C.inkSoft, margin: 0, maxWidth: 580 }}>
                    {f.a}
                    {f.link && (
                      <>
                        {' '}
                        <a href={f.link.href} target="_blank" rel="noopener noreferrer" style={{ color: C.green, textDecoration: 'underline', textUnderlineOffset: 2 }}>
                          {f.link.label}
                        </a>
                        {f.aTail}
                      </>
                    )}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// --- Disclaimer / Safety ------------------------------------------------
function SWDisclaimer({ t, C, display, lang }) {
  const ref = useReveal();
  return (
    <section ref={ref} style={{ padding: '88px 64px' }}>
      <div className="sw-disclaimer-card" style={{
        maxWidth: 1100, margin: '0 auto',
        background: '#FFF7EE',
        border: `1px solid ${C.peach}`,
        borderRadius: 28,
        padding: '48px 48px',
        position: 'relative', overflow: 'hidden',
      }}>
        <div aria-hidden style={{
          position: 'absolute', top: -60, right: -60, width: 200, height: 200,
          background: `radial-gradient(circle, ${C.peach}80 0%, transparent 70%)`,
        }} />
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 14, position: 'relative' }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 28, height: 28, borderRadius: 8,
            background: '#C4564B', color: '#fff',
            fontSize: 16, fontWeight: 700,
          }}>!</span>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.22em', color: '#7E4F39' }}>
            {t.disclaimerEyebrow.toUpperCase()}
          </div>
        </div>
        <h2 style={{ fontFamily: display, fontSize: 36, fontWeight: 500, margin: '0 0 14px', letterSpacing: '0.02em', color: C.ink, position: 'relative' }}>
          {t.disclaimerTitle}
        </h2>
        <p style={{ fontSize: 15, lineHeight: 1.85, color: C.inkSoft, margin: '0 0 32px', maxWidth: 720, position: 'relative' }}>
          {t.disclaimerLead}
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, position: 'relative' }} className="sw-feat-grid sw-disclaimer-grid">
          {t.disclaimerItems.map((d, i) => (
            <div key={i} style={{
              background: '#fff', borderRadius: 18, padding: '22px 22px',
              border: `1px solid ${C.line}`,
              display: 'flex', flexDirection: 'column', gap: 10,
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 10,
                background: i === 0 ? '#FCE5DF' : C.greenSoft,
                color: i === 0 ? '#C4564B' : C.greenDeep,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 18, fontWeight: 700, fontFamily: display,
              }}>{d.icon}</div>
              <h3 style={{
                fontFamily: display, fontSize: 17, fontWeight: 500, lineHeight: 1.45,
                margin: 0, letterSpacing: '0.02em', color: i === 0 ? '#C4564B' : C.ink,
              }}>{d.t}</h3>
              <p style={{ fontSize: 13, lineHeight: 1.85, color: C.inkSoft, margin: 0 }}>{d.b}</p>
            </div>
          ))}
        </div>
        <a href={t.disclaimerHref} target="_blank" rel="noopener noreferrer" style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          marginTop: 28, padding: '10px 18px', borderRadius: 999,
          background: C.ink, color: '#fff', textDecoration: 'none',
          fontSize: 13, fontWeight: 600, position: 'relative',
        }}>
          {t.disclaimerLink}
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden>
            <path d="M6 3H3V13H13V10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M9 3H13V7" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M13 3L8 8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
          </svg>
        </a>
      </div>
    </section>
  );
}

window.SW = { useReveal, SWTrust, SWBridge, SWMiniBridge, SWCompare, SWStory, SWFeatures, SWSpotlight, SWHow, SWHowDetail, SWPrice, SWVoices, SWFaq, SWDisclaimer };