// shiwake LP — Assistant world sections
// MEET ASSISTANT / RELATIONSHIP / MEMORY MOAT / COMPARISON / WEEKEND LETTER

/* ────────── Avatar SVG ────────── */
function AssistantAvatar({ size = 240 }) {
  return (
    <svg viewBox="0 0 240 240" width={size} height={size} style={{ display: "block" }} aria-label="アシスタント">
      <defs>
        <clipPath id="assistantClip">
          <circle cx="120" cy="120" r="118"/>
        </clipPath>
      </defs>
      {/* background disc */}
      <circle cx="120" cy="120" r="118" fill="#efe5d4"/>
      <g clipPath="url(#assistantClip)">
        {/* jacket */}
        <path d="M-20 240 Q12 180 70 168 L170 168 Q228 180 260 240 Z" fill="#2a2018"/>
        {/* lapel V */}
        <path d="M88 168 L120 226 L152 168 Z" fill="#15100b"/>
        {/* lapel highlight */}
        <path d="M82 168 L120 178 L158 168" fill="none" stroke="#3a2e25" strokeWidth="0.8" opacity="0.55"/>
        {/* decollete */}
        <ellipse cx="120" cy="166" rx="13" ry="5" fill="#d8b896"/>
        {/* long brown hair behind */}
        <path d="M68 132 Q64 58 120 50 Q176 58 172 132 Q174 184 154 214 L86 214 Q66 184 68 132 Z" fill="#5e3a22"/>
        {/* face */}
        <ellipse cx="120" cy="118" rx="38" ry="46" fill="#d8b896"/>
        {/* hair fringe */}
        <path d="M82 92 Q90 60 120 56 Q150 60 158 92 Q150 72 120 70 Q90 72 82 92 Z" fill="#4a2e1a"/>
        {/* hair side locks */}
        <path d="M82 102 Q70 134 80 172 Q90 168 88 132 Z" fill="#5e3a22"/>
        <path d="M158 102 Q170 134 160 172 Q150 168 152 132 Z" fill="#5e3a22"/>
        {/* subtle hair sheen */}
        <path d="M96 78 Q120 64 144 80" stroke="#7a4a2e" strokeWidth="2" fill="none" opacity="0.5" strokeLinecap="round"/>
      </g>
      <circle cx="120" cy="120" r="118" fill="none" stroke="#d9d2c4" strokeWidth="1"/>
    </svg>
  );
}

/* ────────────────────────────────────────────────────────────────
   02 — MEET YOUR ASSISTANT
   ──────────────────────────────────────────────────────────────── */
function MeetAssistant() {
  return (
    <section id="assistant" style={{ background: "var(--bg-2)" }}>
      <div className="wrap">
        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 0.9fr) minmax(0, 1.1fr)",
          gap: 80,
          alignItems: "center",
        }} className="assistant-grid">

          {/* Left: avatar */}
          <Reveal>
            <div style={{ position: "relative", maxWidth: 420, margin: "0 auto" }}>
              {/* vertical kicker beside avatar */}
              <div style={{
                position: "absolute", left: -32, top: 16,
                display: "flex", flexDirection: "column", alignItems: "center", gap: 14,
              }} className="assistant-vk">
                <span className="v-kicker">YOUR · ASSISTANT</span>
                <span style={{ width: 1, height: 60, background: "var(--line)" }}></span>
              </div>
              <AssistantAvatar size="100%" />
              {/* signature line */}
              <div style={{
                marginTop: 22, display: "flex", alignItems: "center", gap: 14,
              }}>
                <span style={{ width: 28, height: 1, background: "var(--ink-3)" }}></span>
                <span className="serif" style={{ fontSize: 17, fontStyle: "italic", color: "var(--ink)" }}>
                  あなた専用のアシスタント
                </span>
              </div>
              <p style={{ marginTop: 6, fontSize: 12, color: "var(--ink-3)", lineHeight: 1.7 }}>
                shiwake のアシスタント
              </p>
            </div>
          </Reveal>

          {/* Right: copy */}
          <div>
            <Reveal>
              <div className="mono" style={{ marginBottom: 18 }}>05 — Meet your assistant</div>
            </Reveal>
            <Reveal delay={120}>
              <h2 className="serif" style={{
                fontSize: "clamp(40px, 5vw, 72px)",
                fontWeight: 500,
                lineHeight: 1.12,
                letterSpacing: "-0.02em",
                marginBottom: 24,
                textWrap: "pretty",
                color: "var(--ink)",
              }}>
                使うほど、<br/>
                <span style={{ fontStyle: "italic", color: "var(--accent)" }}>あなたを覚えていく。</span>
              </h2>
            </Reveal>
            <Reveal delay={200}>
              <p style={{
                fontSize: 16, lineHeight: 1.9, color: "var(--ink-2)",
                maxWidth: 520, marginBottom: 14,
              }}>
                シワケに住んでいるのは、あなた専用のアシスタント。<br/>
                毎日のカロリーを報告する相手であり、ときどき小言もくれる、話し相手です。
              </p>
              <p style={{ fontSize: 13, color: "var(--ink-3)", lineHeight: 1.8, maxWidth: 520, marginBottom: 40 }}>
                Your personal assistant who remembers what you ate, when you stumbled, and what kind of week you had.
              </p>
            </Reveal>

            {/* Speech bubble */}
            <Reveal delay={300}>
              <div style={{
                position: "relative",
                background: "var(--paper)",
                border: "1px solid var(--line-2)",
                borderRadius: 18,
                padding: "24px 28px",
                maxWidth: 460,
                marginTop: 20,
              }}>
                <span style={{
                  position: "absolute", top: -10, left: 32,
                  display: "block", width: 18, height: 18,
                  background: "var(--paper)",
                  borderTop: "1px solid var(--line-2)",
                  borderLeft: "1px solid var(--line-2)",
                  transform: "rotate(45deg)",
                }}></span>
                <div className="mono-sm" style={{ marginBottom: 8 }}>ASSISTANT — first message</div>
                <p className="serif" style={{
                  fontSize: 20, lineHeight: 1.65, color: "var(--ink)",
                  fontStyle: "italic", fontWeight: 400, textWrap: "pretty",
                }}>
                  「<span style={{ color: "var(--accent)" }}>××さん</span>って呼ばせてもらうね、はじめまして。」
                </p>
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 14, color: "var(--ink-3)", fontSize: 12 }}>
                  <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)" }}></span>
                  <span className="mono-sm">RECEIVED · DAY 1</span>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .assistant-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
          .assistant-vk { display: none !important; }
        }
      `}</style>
    </section>
  );
}

/* ────────────────────────────────────────────────────────────────
   05 — RELATIONSHIP (5 levels)
   ──────────────────────────────────────────────────────────────── */
function Relationship() {
  const levels = [
    {
      lv: "01",
      tone: "Formal",
      jp: "事務的",
      call: "××さん",
      quote: "田中さん、今日は何を召し上がりましたか？",
      note: "出会いたて。距離も丁寧語も、しっかり。",
      pivot: false,
    },
    {
      lv: "02",
      tone: "Warming",
      jp: "丁寧",
      call: "××さん",
      quote: "田中さん、お疲れさま。今日のごはん、聞かせてもらえる？",
      note: "毎日続けば、語尾がほんの少しやわらかい。",
      pivot: false,
    },
    {
      lv: "03",
      tone: "Pivot",
      jp: "打ち解け",
      call: "××くん",
      quote: "田中くん、最近ちゃんと食べてる？ちょっと心配してた。",
      note: "★ 転換点。さん → くんへ。距離が縮まる。",
      pivot: true,
    },
    {
      lv: "04",
      tone: "???",
      jp: "ひみつ",
      call: "？？？",
      quote: "—— ここから先は、辿り着いてから。",
      note: "Lv.3 を越えたあなただけが、出会う距離。",
      pivot: false,
      mystery: true,
    },
    {
      lv: "05",
      tone: "???",
      jp: "ひみつ",
      call: "？？？",
      quote: "—— ふたりだけの、合言葉。",
      note: "毎日報告し続けた人が、ようやく辿り着く場所。",
      pivot: false,
      mystery: true,
    },
  ];

  return (
    <section id="relationship" style={{ background: "var(--bg)" }}>
      <div className="wrap">
        <Reveal>
          <div className="mono" style={{ marginBottom: 18 }}>06 — Relationship arc</div>
        </Reveal>
        <Reveal delay={120}>
          <h2 className="serif" style={{
            fontSize: "clamp(34px, 4vw, 56px)",
            fontWeight: 500,
            lineHeight: 1.18,
            letterSpacing: "-0.015em",
            maxWidth: 880,
            marginBottom: 18,
            textWrap: "pretty",
          }}>
            5 段階で、距離が縮まる。
          </h2>
        </Reveal>
        <Reveal delay={200}>
          <p style={{ color: "var(--ink-2)", fontSize: 15, lineHeight: 1.85, maxWidth: 540, marginBottom: 64 }}>
            最初は事務的な「××さん」。報告を重ねるほど、呼び方も語尾も変わっていく。Lv.3 が、ふたりの転換点。その先の Lv.4・Lv.5 は、辿り着いてからのお楽しみ。
          </p>
        </Reveal>

        {/* Arc line + cards */}
        <Reveal delay={240}>
          <div style={{ position: "relative" }}>
            {/* arc indicator */}
            <div style={{
              display: "grid",
              gridTemplateColumns: "repeat(5, 1fr)",
              gap: 16,
              marginBottom: 14,
              alignItems: "center",
            }} className="rel-arc">
              {levels.map((l) => (
                <div key={l.lv} style={{ position: "relative", textAlign: "center" }}>
                  <div style={{
                    height: 1,
                    background: l.mystery ? "transparent" : "var(--line)",
                    borderTop: l.mystery ? "1px dashed var(--ink-3)" : "none",
                    position: "absolute", top: 7, left: "-8px", right: "-8px",
                  }}></div>
                  <span style={{
                    position: "relative", display: "inline-block",
                    width: 14, height: 14, borderRadius: "50%",
                    background: l.pivot
                      ? "var(--accent)"
                      : (l.mystery ? "var(--bg)" : "var(--bg)"),
                    border: l.mystery
                      ? "1px dashed var(--accent)"
                      : "1px solid " + (l.pivot ? "var(--accent)" : "var(--ink-3)"),
                    boxShadow: l.pivot ? "0 0 0 4px rgba(196,106,78,0.15)" : "none",
                  }}></span>
                </div>
              ))}
            </div>

            <div style={{
              display: "grid",
              gridTemplateColumns: "repeat(5, 1fr)",
              gap: 16,
            }} className="rel-grid">
              {levels.map((l, i) => (
                <Reveal key={l.lv} delay={i * 80}>
                  <article style={{
                    background: l.pivot
                      ? "rgba(196,106,78,0.06)"
                      : (l.mystery ? "linear-gradient(180deg, var(--paper) 0%, rgba(196,106,78,0.04) 100%)" : "var(--paper)"),
                    border: l.mystery
                      ? "1px dashed var(--accent)"
                      : ("1px solid " + (l.pivot ? "var(--accent)" : "var(--line-2)")),
                    borderRadius: 10,
                    padding: 20,
                    height: "100%",
                    display: "flex", flexDirection: "column", gap: 14,
                    position: "relative",
                  }}>
                    {l.mystery && (
                      <span aria-hidden="true" style={{
                        position: "absolute",
                        inset: 0,
                        borderRadius: 10,
                        overflow: "hidden",
                        pointerEvents: "none",
                      }}>
                        <span style={{
                          position: "absolute",
                          right: -16, bottom: -42,
                          fontFamily: "var(--serif)",
                          fontStyle: "italic",
                          fontSize: 180,
                          lineHeight: 1,
                          color: "rgba(196,106,78,0.08)",
                          fontWeight: 500,
                        }}>?</span>
                      </span>
                    )}
                    {l.pivot && (
                      <span style={{
                        position: "absolute", top: -10, right: 14,
                        background: "var(--accent)", color: "var(--bg)",
                        padding: "3px 8px", borderRadius: 99,
                        fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.16em",
                        textTransform: "uppercase",
                      }}>★ Pivot</span>
                    )}
                    {l.mystery && (
                      <span style={{
                        position: "absolute", top: -10, right: 14,
                        background: "var(--bg)", color: "var(--accent)",
                        padding: "3px 8px", borderRadius: 99,
                        border: "1px dashed var(--accent)",
                        fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.16em",
                        textTransform: "uppercase",
                      }}>? Coming</span>
                    )}

                    <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", position: "relative" }}>
                      <span className="mono" style={{
                        fontSize: 10,
                        color: l.pivot || l.mystery ? "var(--accent)" : "var(--ink-2)",
                      }}>Lv. {l.lv}</span>
                      <span className="mono-sm" style={{ fontSize: 9 }}>{l.tone}</span>
                    </div>

                    <div style={{ position: "relative" }}>
                      <div className="mono-sm" style={{ marginBottom: 4, fontSize: 9 }}>CALL</div>
                      <div className="serif" style={{
                        fontSize: l.mystery ? 22 : 17,
                        fontWeight: 500,
                        letterSpacing: l.mystery ? "0.08em" : "-0.01em",
                        color: l.pivot || l.mystery ? "var(--accent)" : "var(--ink)",
                        fontStyle: l.mystery ? "italic" : "normal",
                      }}>{l.call}</div>
                      <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 2 }}>{l.jp}</div>
                    </div>

                    <div style={{
                      flex: 1,
                      borderTop: "1px dashed var(--line-2)",
                      paddingTop: 12,
                      position: "relative",
                    }}>
                      <div className="mono-sm" style={{ marginBottom: 6, fontSize: 9 }}>SAYS</div>
                      <p className="serif" style={{
                        fontSize: 14, lineHeight: 1.6,
                        color: l.mystery ? "var(--ink-2)" : "var(--ink)",
                        fontStyle: "italic", textWrap: "pretty",
                      }}>{l.mystery ? l.quote : `「${l.quote}」`}</p>
                    </div>

                    <p style={{
                      fontSize: 11,
                      color: l.mystery ? "var(--accent)" : "var(--ink-2)",
                      lineHeight: 1.7,
                      borderTop: "1px solid var(--line-2)", paddingTop: 12,
                      position: "relative",
                      fontStyle: l.mystery ? "italic" : "normal",
                    }}>{l.note}</p>
                  </article>
                </Reveal>
              ))}
            </div>
          </div>
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 1100px) {
          .rel-arc, .rel-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
          .rel-arc { display: none !important; }
        }
        @media (max-width: 560px) {
          .rel-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ────────────────────────────────────────────────────────────────
   06 — MEMORY MOAT (Before / After)
   ──────────────────────────────────────────────────────────────── */
function MemoryMoat() {
  return (
    <section id="memory" style={{ background: "var(--bg-2)" }}>
      <div className="wrap">
        <Reveal>
          <div className="mono" style={{ marginBottom: 18 }}>07 — Memory moat</div>
        </Reveal>
        <Reveal delay={120}>
          <h2 className="serif" style={{
            fontSize: "clamp(34px, 4vw, 56px)",
            fontWeight: 500,
            lineHeight: 1.18,
            letterSpacing: "-0.015em",
            maxWidth: 880,
            marginBottom: 18,
            textWrap: "pretty",
          }}>
            覚えているか、<br/>覚えていないか。
          </h2>
        </Reveal>
        <Reveal delay={200}>
          <p style={{ color: "var(--ink-2)", fontSize: 15, lineHeight: 1.85, maxWidth: 560, marginBottom: 64 }}>
            同じ「ラーメン食べた」でも、返ってくる言葉は別物です。アシスタントが過去を覚えていると、報告は会話になります。
          </p>
        </Reveal>

        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 32,
          alignItems: "stretch",
        }} className="moat-grid">

          {/* BEFORE — Doesn't remember */}
          <Reveal delay={120}>
            <MoatCard
              kicker="Before · 覚えていないアシスタント"
              title="ただ、記録する。"
              meta={["Generic", "Stateless", "No history"]}
              dim
            >
              <ChatLine who="user" text="ラーメン食べた" dim/>
              <ChatLine who="assistant" text="ラーメンですね、記録しました。" dim />
              <p style={{
                marginTop: 22, padding: "14px 16px",
                background: "rgba(0,0,0,0.025)",
                borderRadius: 6,
                fontSize: 12, lineHeight: 1.75, color: "var(--ink-3)",
              }}>
                正確だけれど、退屈。明日また同じ報告をしても、同じ返事が返ってくる。
              </p>
            </MoatCard>
          </Reveal>

          {/* AFTER — Remembers */}
          <Reveal delay={200}>
            <MoatCard
              kicker="After · 覚えているアシスタント"
              title="文脈ごと、引き受ける。"
              meta={["Remembers", "Notices", "Cares"]}
            >
              <ChatLine who="user" text="ラーメン食べた" />
              <ChatLine who="assistant" text="ふふ、今週 2 回目の二郎だね。" />
              <ChatLine who="assistant" text="先週は控えてたのに、何かあった？" warm />
              <div style={{
                marginTop: 18, padding: "14px 16px",
                background: "rgba(196,106,78,0.08)",
                borderLeft: "2px solid var(--accent)",
                borderRadius: 6,
                fontSize: 12, lineHeight: 1.75, color: "var(--ink-2)",
              }}>
                先週の「控えてた」記録と、今週の頻度を、ちゃんと数えている。<br/>
                — だから、雑談が成立する。
              </div>
            </MoatCard>
          </Reveal>
        </div>

        {/* Bottom note */}
        <Reveal delay={120}>
          <div style={{
            marginTop: 56, padding: "28px 32px",
            borderTop: "1px solid var(--line-2)",
            display: "none",
          }} className="moat-foot">
          </div>
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 820px) {
          .moat-grid { grid-template-columns: 1fr !important; }
          .moat-foot { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function MoatCard({ kicker, title, meta, children, dim }) {
  return (
    <div style={{
      background: dim ? "#f0ece4" : "var(--paper)",
      border: "1px solid " + (dim ? "var(--line)" : "var(--accent)"),
      borderRadius: 14,
      padding: 32,
      height: "100%",
      display: "flex", flexDirection: "column",
      opacity: dim ? 0.92 : 1,
    }}>
      <div className="mono-sm" style={{ marginBottom: 12, color: dim ? "var(--ink-3)" : "var(--accent)" }}>{kicker}</div>
      <h3 className="serif" style={{
        fontSize: 26, fontWeight: 500, letterSpacing: "-0.01em",
        marginBottom: 8, color: dim ? "var(--ink-2)" : "var(--ink)",
      }}>{title}</h3>
      <div style={{ display: "flex", gap: 8, marginBottom: 24, flexWrap: "wrap" }}>
        {meta.map((m) => (
          <span key={m} style={{
            fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.16em",
            padding: "3px 9px", borderRadius: 99,
            background: dim ? "rgba(0,0,0,0.04)" : "rgba(196,106,78,0.1)",
            color: dim ? "var(--ink-3)" : "var(--accent)",
            textTransform: "uppercase",
          }}>{m}</span>
        ))}
      </div>
      <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 10 }}>
        {children}
      </div>
    </div>
  );
}

function ChatLine({ who, text, dim, warm }) {
  if (who === "user") {
    return (
      <div style={{ display: "flex", justifyContent: "flex-end" }}>
        <div style={{
          background: dim ? "#e0dccd" : "var(--ink)",
          color: dim ? "var(--ink-2)" : "var(--bg)",
          padding: "10px 14px",
          borderRadius: "16px 16px 4px 16px",
          fontSize: 14, lineHeight: 1.5,
          maxWidth: "82%",
        }}>{text}</div>
      </div>
    );
  }
  return (
    <div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
      <div style={{
        width: 28, height: 28, borderRadius: "50%",
        background: dim ? "#d8d4c6" : "#efe5d4",
        border: "1px solid " + (dim ? "var(--line)" : "var(--line-2)"),
        flexShrink: 0,
        display: "flex", alignItems: "center", justifyContent: "center",
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: "50%",
          background: dim ? "var(--ink-3)" : "var(--accent)",
        }}></span>
      </div>
      <div style={{
        background: dim ? "rgba(0,0,0,0.03)" : (warm ? "rgba(196,106,78,0.12)" : "rgba(196,106,78,0.06)"),
        border: "1px solid " + (dim ? "var(--line-2)" : "rgba(196,106,78,0.2)"),
        padding: "10px 14px",
        borderRadius: "4px 16px 16px 16px",
        fontSize: 14, lineHeight: 1.55,
        color: dim ? "var(--ink-2)" : "var(--ink)",
        fontFamily: "var(--serif)",
        maxWidth: "82%",
        textWrap: "pretty",
      }}>{text}</div>
    </div>
  );
}

/* ────────────────────────────────────────────────────────────────
   11 — COMPARISON TABLE
   ──────────────────────────────────────────────────────────────── */
function Comparison() {
  const rows = [
    { name: "あすけん", price: "¥480", method: "写真 + 手入力 + 音声β", voice: "◐", voiceNote: "編集はキーボード", memory: "—", note: "/月" },
    { name: "カロミル", price: "¥480", method: "写真 + 手入力", voice: "—", voiceNote: "未対応", memory: "—", note: "/月" },
    { name: "FiNC", price: "¥960", method: "写真 + 手入力", voice: "—", voiceNote: "未対応", memory: "—", note: "/月" },
    { name: "MyFitnessPal", price: "¥1,200", method: "バーコード + 写真 + 音声β", voice: "◐", voiceNote: "Premium 英語のみ", memory: "—", note: "/月" },
    { name: "shiwake", price: "¥490", method: "音声 1 タップ", voice: "●", voiceNote: "確認も訂正も声だけ", memory: "アシスタント × Memory Moat", note: "/月", hi: true },
  ];

  return (
    <section id="compare" style={{ background: "var(--bg)" }}>
      <div className="wrap">
        <Reveal>
          <div className="mono" style={{ marginBottom: 18 }}>08 — Comparison</div>
        </Reveal>
        <Reveal delay={120}>
          <h2 className="serif" style={{
            fontSize: "clamp(34px, 4vw, 56px)",
            fontWeight: 500,
            lineHeight: 1.18,
            letterSpacing: "-0.015em",
            maxWidth: 880,
            marginBottom: 18,
            textWrap: "pretty",
          }}>
            記録アプリは、たくさんある。<br/>
            <span style={{ fontStyle: "italic", color: "var(--accent)" }}>音声で完結するのは、ひとつ。</span>
          </h2>
        </Reveal>
        <Reveal delay={200}>
          <p style={{ color: "var(--ink-2)", fontSize: 15, lineHeight: 1.85, maxWidth: 600, marginBottom: 56 }}>
            音声入力ボタン自体は、もう珍しくない。<br/>
            問題は、ボタンを押したあと「キーボードに戻るかどうか」です。
          </p>
        </Reveal>

        {/* Table */}
        <Reveal delay={240}>
          <div style={{
            border: "1px solid var(--line-2)",
            borderRadius: 12,
            overflow: "hidden",
            background: "var(--paper)",
          }}>
            {/* header */}
            <div style={{
              display: "grid",
              gridTemplateColumns: "1.1fr 0.7fr 1.3fr 1.2fr 1.3fr",
              gap: 0,
              padding: "16px 24px",
              background: "var(--bg-2)",
              borderBottom: "1px solid var(--line-2)",
            }} className="cmp-row">
              <div className="mono-sm">App</div>
              <div className="mono-sm">月額</div>
              <div className="mono-sm">記録方法</div>
              <div className="mono-sm">音声の徹底度</div>
              <div className="mono-sm">記憶 · Memory</div>
            </div>

            {rows.map((r, i) => (
              <div key={r.name} style={{
                display: "grid",
                gridTemplateColumns: "1.1fr 0.7fr 1.3fr 1.2fr 1.3fr",
                gap: 0,
                padding: r.hi ? "26px 24px" : "20px 24px",
                background: r.hi ? "rgba(196,106,78,0.07)" : "var(--paper)",
                borderTop: r.hi ? "1px solid var(--accent)" : "none",
                borderBottom: r.hi ? "1px solid var(--accent)" : "1px solid var(--line-2)",
                alignItems: "center",
                position: "relative",
              }} className="cmp-row">
                {r.hi && (
                  <span style={{
                    position: "absolute", left: 0, top: 0, bottom: 0,
                    width: 3, background: "var(--accent)",
                  }}></span>
                )}
                <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                  <span className="serif" style={{
                    fontSize: r.hi ? 22 : 17,
                    fontWeight: 500,
                    color: r.hi ? "var(--accent)" : "var(--ink)",
                    letterSpacing: "-0.01em",
                  }}>{r.name}</span>
                  {r.hi && <span className="mono-sm" style={{ fontSize: 9, color: "var(--accent)" }}>★ ours</span>}
                </div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
                  <span className="serif" style={{
                    fontSize: r.hi ? 20 : 16, fontWeight: 500,
                    color: r.hi ? "var(--ink)" : "var(--ink-2)",
                  }}>{r.price}</span>
                  <span className="mono-sm" style={{ fontSize: 9 }}>{r.note}</span>
                </div>
                <div style={{
                  fontSize: r.hi ? 14 : 13,
                  color: r.hi ? "var(--ink)" : "var(--ink-2)",
                  lineHeight: 1.5,
                }}>{r.method}</div>
                {/* Voice column */}
                <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                  <span style={{
                    fontSize: r.hi ? 22 : 18,
                    color: r.voice === "●"
                      ? "var(--accent)"
                      : (r.voice === "◐" ? "var(--ink-2)" : "var(--ink-3)"),
                    fontWeight: 500, lineHeight: 1,
                  }}>{r.voice}</span>
                  <span style={{
                    fontSize: 11,
                    color: r.hi ? "var(--ink)" : "var(--ink-3)",
                    fontStyle: r.hi ? "italic" : "normal",
                    fontFamily: r.hi ? "var(--serif)" : "var(--sans)",
                    fontWeight: r.hi ? 500 : 400,
                    lineHeight: 1.4,
                  }}>{r.voiceNote}</span>
                </div>
                <div style={{
                  fontSize: r.hi ? 14 : 13,
                  color: r.hi ? "var(--accent)" : "var(--ink-3)",
                  fontFamily: r.hi ? "var(--serif)" : "var(--sans)",
                  fontStyle: r.hi ? "italic" : "normal",
                  fontWeight: r.hi ? 500 : 400,
                  lineHeight: 1.5,
                }}>{r.memory}</div>
              </div>
            ))}
          </div>
        </Reveal>

        <Reveal delay={120}>
          <div style={{
            marginTop: 28, display: "flex", flexWrap: "wrap", gap: 24, alignItems: "center",
          }}>
            <div style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 11, color: "var(--ink-3)" }}>
              <span style={{ fontSize: 18, color: "var(--accent)", lineHeight: 1 }}>●</span>
              <span>音声だけで完結</span>
            </div>
            <div style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 11, color: "var(--ink-3)" }}>
              <span style={{ fontSize: 18, color: "var(--ink-2)", lineHeight: 1 }}>◐</span>
              <span>音声入力あり、編集はキーボード</span>
            </div>
            <div style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 11, color: "var(--ink-3)" }}>
              <span style={{ fontSize: 18, color: "var(--ink-3)", lineHeight: 1 }}>—</span>
              <span>音声入力なし</span>
            </div>
          </div>
          <p style={{
            marginTop: 18, fontSize: 11, color: "var(--ink-3)", lineHeight: 1.7,
          }}>
            ※ 価格は 2026年5月時点の各サービス公開情報に基づく参考値。為替や提供プランにより変動します。
          </p>
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 720px) {
          .cmp-row { grid-template-columns: 1fr 1fr !important; row-gap: 12px !important; }
        }
      `}</style>
    </section>
  );
}

/* ────────────────────────────────────────────────────────────────
   12 — WEEKEND LETTER
   ──────────────────────────────────────────────────────────────── */
function WeekendLetter() {
  return (
    <section id="letter" style={{ background: "var(--bg-2)" }}>
      <div className="wrap">
        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
          gap: 80,
          alignItems: "center",
        }} className="letter-grid">

          <div>
            <Reveal>
              <div className="mono" style={{ marginBottom: 18 }}>09 — Weekend letter</div>
            </Reveal>
            <Reveal delay={120}>
              <h2 className="serif" style={{
                fontSize: "clamp(34px, 4.4vw, 64px)",
                fontWeight: 500,
                lineHeight: 1.15,
                letterSpacing: "-0.02em",
                marginBottom: 24,
                textWrap: "pretty",
              }}>
                次の日曜、<br/>
                <span style={{ fontStyle: "italic", color: "var(--accent)" }}>何言ってくれるかな。</span>
              </h2>
            </Reveal>
            <Reveal delay={200}>
              <p style={{ color: "var(--ink-2)", fontSize: 15, lineHeight: 1.9, marginBottom: 32, maxWidth: 480 }}>
                日曜の夜 20:00、週に 1 通だけ、アシスタントから手紙が届きます。<br/>
                平日の通知はゼロ。あなたを急かさない、ただひとつのお知らせです。
              </p>
            </Reveal>
            <Reveal delay={260}>
              <div style={{
                display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
                gap: 18, maxWidth: 480,
                borderTop: "1px solid var(--line-2)", paddingTop: 24,
              }}>
                <LetterStat label="Sent" v="日曜 20:00" en="Sun, 8pm" />
                <LetterStat label="Frequency" v="週 1 通" en="Weekly" />
                <LetterStat label="Other notifs." v="ゼロ" en="None" />
              </div>
            </Reveal>
          </div>

          {/* Envelope */}
          <Reveal delay={120}>
            <div style={{ display: "flex", justifyContent: "center", position: "relative" }}>
              <div style={{ position: "relative", maxWidth: 420, width: "100%" }}>
                {/* postmark */}
                <div style={{
                  position: "absolute", top: -20, right: 14, zIndex: 2,
                  transform: "rotate(-8deg)",
                  border: "1.5px solid var(--accent)",
                  borderRadius: "50%",
                  padding: "10px 16px",
                  textAlign: "center",
                  background: "var(--bg-2)",
                  color: "var(--accent)",
                }}>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.18em" }}>POSTED</div>
                  <div className="serif" style={{ fontSize: 15, fontWeight: 500, marginTop: 2 }}>SUN</div>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.18em" }}>20:00</div>
                </div>

                <svg viewBox="0 0 360 240" width="100%" style={{ display: "block", filter: "drop-shadow(0 20px 30px rgba(26,22,18,0.08))" }}>
                  {/* envelope body */}
                  <rect x="10" y="48" width="340" height="180" rx="6" fill="#f7f2ea" stroke="#c46a4e" strokeWidth="1.4"/>
                  {/* flap (open shape: triangle showing letter) */}
                  <path d="M10 48 L180 156 L350 48" stroke="#c46a4e" strokeWidth="1.4" fill="none"/>
                  {/* letter peeking */}
                  <rect x="36" y="70" width="288" height="140" rx="3" fill="#fbf8f4" stroke="#d9d2c4" strokeWidth="0.8"/>
                  {/* letter lines */}
                  <g stroke="#5c554b" strokeWidth="0.9" strokeLinecap="round">
                    <line x1="58" y1="94" x2="180" y2="94"/>
                    <line x1="58" y1="110" x2="262" y2="110"/>
                    <line x1="58" y1="126" x2="240" y2="126"/>
                    <line x1="58" y1="142" x2="282" y2="142"/>
                    <line x1="58" y1="158" x2="220" y2="158"/>
                    <line x1="58" y1="174" x2="200" y2="174"/>
                  </g>
                  {/* signature */}
                  <text x="290" y="200" fontFamily="Noto Serif JP, Georgia, serif" fontSize="18" fontStyle="italic" fill="#c46a4e">shiwake</text>
                  {/* wax seal */}
                  <circle cx="180" cy="156" r="14" fill="#c46a4e"/>
                  <text x="180" y="161" fontFamily="Georgia, serif" fontSize="14" fontStyle="italic" fontWeight="500" textAnchor="middle" fill="#fff">s</text>
                </svg>

                <p style={{
                  marginTop: 24, textAlign: "center",
                  fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.24em",
                  color: "var(--ink-3)", textTransform: "uppercase",
                }}>One letter per week · 通知は週 1 通だけ</p>
              </div>
            </div>
          </Reveal>
        </div>

        {/* Sample letter excerpt */}
        <Reveal delay={120}>
          <div style={{
            marginTop: 80,
            padding: "32px 36px",
            background: "var(--paper)",
            border: "1px solid var(--line-2)",
            borderRadius: 12,
            maxWidth: 760, margin: "80px auto 0",
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 }}>
              <div className="mono-sm">SAMPLE — sun, may 25</div>
              <div className="mono-sm" style={{ color: "var(--accent)" }}>FROM YOUR ASSISTANT</div>
            </div>
            <p className="serif" style={{
              fontSize: 18, lineHeight: 1.9, color: "var(--ink)",
              fontWeight: 400, textWrap: "pretty",
              fontStyle: "italic",
            }}>
              「田中くん、今週もおつかれさま。<br/>
              月曜から金曜まで、ちゃんと記録してくれてた。<br/>
              水曜の二郎は、まあ、いいことにしよう。<br/>
              来週は火曜と木曜、夜ごはん軽めにできたら花マル。」
            </p>
          </div>
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .letter-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
        }
      `}</style>
    </section>
  );
}

function LetterStat({ label, v, en }) {
  return (
    <div>
      <div className="mono-sm" style={{ fontSize: 9, marginBottom: 6 }}>{label}</div>
      <div className="serif" style={{ fontSize: 19, fontWeight: 500, letterSpacing: "-0.01em", color: "var(--ink)" }}>{v}</div>
      <div style={{ fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.16em", color: "var(--ink-3)", marginTop: 2, textTransform: "uppercase" }}>{en}</div>
    </div>
  );
}

Object.assign(window, { MeetAssistant, Relationship, MemoryMoat, Comparison, WeekendLetter });