// ===== Section title =====
const SectionLabel = ({ jp, en, align = "left", color = "var(--accent)" }) => (
  <div style={{
    display: "flex", flexDirection: "column", gap: 6,
    alignItems: align === "center" ? "center" : "flex-start",
    marginBottom: 36
  }}>
    <span style={{
      fontSize: 11, letterSpacing: "0.4em", color, fontWeight: 600
    }}>— {en}</span>
    <h2 className="mincho" style={{
      margin: 0, fontSize: "clamp(28px, 3.6vw, 44px)",
      fontWeight: 700, color: "var(--ink)", letterSpacing: "0.04em",
      lineHeight: 1.3
    }}>{jp}</h2>
  </div>
);

// ===== Features =====
const Features = () => (
  <section id="features" style={{ padding: "140px 32px", position: "relative" }}>
    <div style={{ maxWidth: 1200, margin: "0 auto" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
        <div className="features-sticky" style={{ position: "sticky", top: 120 }}>
          <SectionLabel jp="3つの安心" en="OUR PROMISE"/>
          <p className="mincho" style={{
            fontSize: 18, lineHeight: 2.2, color: "var(--muted)",
            margin: 0, maxWidth: 380
          }}>
            通院も、お買い物も、特別な日のお出かけも。<br/>
            「車に乗ること」だけでなく、<br/>
            その前後の不安まで、一緒に運びます。
          </p>
          <div style={{
            marginTop: 32,
            width: 64, height: 1, background: "var(--accent)"
          }}/>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
          {features.map((f, i) => (
            <FeatureItem key={i} idx={i+1} {...f}/>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const features = [
  {
    icon: <IconShield size={28} stroke={1.5}/>,
    en: "EMERGENCY LIFE-SAVING TECHNICIAN",
    jp: "国家資格 救急救命士が運転",
    body: "万が一の体調変化にも、現場経験を持つ救急救命士が冷静に対応。心電図モニターや応急処置の知識があるからこそ、ご家族にも安心して任せていただけます。",
    tag: "01"
  },
  {
    icon: <IconHeart size={28} stroke={1.5}/>,
    en: "LOCAL & FRIENDLY",
    jp: "里庄町から、顔の見える送迎",
    body: "浅口郡里庄町を拠点に、地域の道や病院、ご家庭の事情まで把握した「ご近所の運転手」として。初めてのご利用でも、世間話のひとつから始められる距離感を大切にしています。",
    tag: "02"
  },
  {
    icon: <IconWheelchair size={28} stroke={1.5}/>,
    en: "FOR EVERYONE",
    jp: "車椅子のままご乗車いただけます",
    body: "車椅子・介助が必要な方も、玄関先から目的地までドア・ツー・ドアで。ご本人・ご家族の負担を最小限に、ゆとりのある時間でお迎えにあがります。",
    tag: "03"
  },
];

const FeatureItem = ({ icon, en, jp, body, tag, idx }) => (
  <div style={{
    display: "grid", gridTemplateColumns: "60px 1fr",
    gap: 32, padding: "44px 0",
    borderTop: idx === 1 ? "1px solid var(--hairline)" : "none",
    borderBottom: "1px solid var(--hairline)"
  }}>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 12 }}>
      <span className="mincho" style={{
        fontSize: 13, color: "var(--accent)", letterSpacing: "0.1em", fontWeight: 600
      }}>No. {tag}</span>
      <div style={{
        width: 56, height: 56, borderRadius: 999,
        background: "var(--paper-deep)",
        color: "var(--navy)",
        display: "flex", alignItems: "center", justifyContent: "center"
      }}>{icon}</div>
    </div>
    <div>
      <div style={{ fontSize: 11, letterSpacing: "0.25em", color: "var(--accent)", marginBottom: 10 }}>{en}</div>
      <h3 className="mincho" style={{
        margin: "0 0 14px", fontSize: 26, fontWeight: 600,
        color: "var(--ink)", letterSpacing: "0.04em"
      }}>{jp}</h3>
      <p style={{ margin: 0, fontSize: 15, lineHeight: 2, color: "var(--muted)", maxWidth: 580 }}>
        {body}
      </p>
    </div>
  </div>
);

// ===== Greeting (Owner intro) =====
const Greeting = () => (
  <section style={{
    padding: "120px 32px",
    background: "var(--paper-warm)",
    position: "relative", overflow: "hidden"
  }}>
    {/* big background kanji */}
    <div className="mincho" aria-hidden style={{
      position: "absolute", right: -40, top: 40,
      fontSize: 320, color: "rgba(20,37,74,0.05)",
      fontWeight: 700, lineHeight: 1, pointerEvents: "none",
      writingMode: "vertical-rl"
    }}>安心</div>
    <div style={{
      maxWidth: 1100, margin: "0 auto",
      display: "grid", gridTemplateColumns: "0.9fr 1.3fr", gap: 64, alignItems: "center",
      position: "relative"
    }}>
      <div>
        <div className="greeting-photo" style={{
          aspectRatio: "3/4",
          borderRadius: 4, position: "relative", overflow: "hidden",
          boxShadow: "0 24px 48px rgba(20,37,74,0.18)"
        }}>
          <img src="assets/owner.jpg" alt="代表 坂本 晃一"
               style={{
                 position: "absolute", inset: 0,
                 width: "100%", height: "100%",
                 objectFit: "cover", objectPosition: "center 25%"
               }}/>
        </div>
      </div>
      <div>
        <SectionLabel jp="代表よりごあいさつ" en="GREETING"/>
        <p className="mincho" style={{
          fontSize: 18, lineHeight: 2.4, color: "var(--ink)", margin: "0 0 28px"
        }}>
          はじめまして。<br/>
          カンナケアタクシー代表の <strong style={{ color: "var(--navy)" }}>坂本 晃一</strong> です。<br/><br/>
          救急救命士として現場に立ってきた経験から、<br/>
          「移動の不安」が暮らしを小さくしてしまう瞬間を、<br/>
          幾度となく目にしてきました。<br/><br/>
          病院の予約、ちょっと遠くの買い物、家族のお祝い ——<br/>
          そんな日常の延長線にある一歩を、<br/>
          地域のタクシーとして支えていけたらと思っています。
        </p>
        <div style={{
          display: "flex", alignItems: "center", gap: 16,
          marginTop: 12
        }}>
          <div style={{ width: 40, height: 1, background: "var(--accent)" }}/>
          <span className="mincho" style={{
            fontSize: 15, letterSpacing: "0.2em", color: "var(--muted)"
          }}>代表 ／ 坂本 晃一</span>
          <span style={{ fontSize: 11, letterSpacing: "0.15em", color: "var(--muted)" }}>
            sakamoto koichi
          </span>
        </div>
      </div>
    </div>
  </section>
);

// ===== Use cases =====
const useCases = [
  { icon: <IconHospital size={26}/>, jp: "通院の送迎", en: "Hospital", body: "定期通院から急な受診まで。診察前後の歩行介助も承ります。" },
  { icon: <IconCar size={26}/>, jp: "買い物のお供", en: "Shopping", body: "重い荷物の持ち運びもお任せください。乗り降りもゆっくりで大丈夫。" },
  { icon: <IconHeart size={26}/>, jp: "冠婚葬祭・お墓参り", en: "Ceremony", body: "晴れの日も、しんみりした日も。場の空気を大切にお運びします。" },
  { icon: <IconWheelchair size={26}/>, jp: "施設・退院時の送迎", en: "Facility", body: "車椅子のままご乗車可能。ご家族・ケアマネ様からのご依頼も歓迎。" },
  { icon: <IconCalendar size={26}/>, jp: "観光・お出かけ", en: "Outing", body: "「久しぶりにあの景色を」そんな一日のお供にもどうぞ。" },
  { icon: <IconShield size={26}/>, jp: "ご家族の代わりに", en: "Family", body: "遠方にお住まいのご家族からのご依頼も。状況を逐次お伝えします。" },
];

const UseCases = () => (
  <section id="use" style={{ padding: "140px 32px", position: "relative" }}>
    <div style={{ maxWidth: 1200, margin: "0 auto" }}>
      <SectionLabel jp="こんな時にお呼びください" en="WHEN TO CALL US" align="center"/>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--hairline)", border: "1px solid var(--hairline)" }}>
        {useCases.map((u, i) => (
          <div key={i} style={{
            background: "var(--paper)",
            padding: "44px 32px",
            display: "flex", flexDirection: "column", gap: 16,
            transition: "background 0.3s",
            cursor: "default"
          }}
          onMouseEnter={e => e.currentTarget.style.background = "var(--cream)"}
          onMouseLeave={e => e.currentTarget.style.background = "var(--paper)"}
          >
            <div style={{ color: "var(--navy)" }}>{u.icon}</div>
            <div style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--accent)" }}>{u.en}</div>
            <h3 className="mincho" style={{ margin: 0, fontSize: 20, fontWeight: 600, color: "var(--ink)" }}>
              {u.jp}
            </h3>
            <p style={{ margin: 0, fontSize: 13, lineHeight: 1.9, color: "var(--muted)" }}>{u.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ===== Price =====
const Price = () => (
  <section id="price" style={{
    padding: "140px 32px",
    background: "var(--navy-deep)", color: "#fff",
    position: "relative", overflow: "hidden"
  }}>
    <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.1 }}
         viewBox="0 0 1440 800" preserveAspectRatio="xMidYMid slice">
      <path d="M -100 500 Q 500 100 1600 250" stroke="#fff" strokeWidth="1" fill="none"/>
      <path d="M -100 600 Q 600 200 1700 400" stroke="#fff" strokeWidth="1" fill="none"/>
    </svg>
    <div style={{ maxWidth: 1100, margin: "0 auto", position: "relative" }}>
      <div style={{ textAlign: "center", marginBottom: 56 }}>
        <span style={{ fontSize: 11, letterSpacing: "0.4em", color: "var(--accent-soft)" }}>— FARE</span>
        <h2 className="mincho" style={{
          margin: "8px 0 0", fontSize: "clamp(28px, 3.6vw, 44px)", fontWeight: 700,
          letterSpacing: "0.04em"
        }}>明朗な料金体系</h2>
      </div>

      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1,
        background: "rgba(255,255,255,0.15)",
        border: "1px solid rgba(255,255,255,0.18)"
      }}>
        <PriceBlock
          label="初乗運賃"
          unit="〜1.5kmまで"
          value="630"
          yen="円"
          hint="(税込)"
        />
        <PriceBlock
          label="加算運賃"
          unit="以降 500m ごとに"
          value="170"
          yen="円"
          hint="加算"
        />
      </div>

      <div style={{
        marginTop: 32,
        background: "rgba(255,255,255,0.06)",
        border: "1px solid rgba(255,255,255,0.15)",
        padding: "28px 36px",
        display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 24, alignItems: "center"
      }}>
        <IconClock size={28} stroke={1.5}/>
        <div>
          <div className="mincho" style={{ fontSize: 18, fontWeight: 600 }}>営業時間 8:00 — 18:00</div>
          <div style={{ fontSize: 13, color: "rgba(255,255,255,0.7)", marginTop: 4 }}>
            土日祝・夜間も、お気軽にご相談ください。可能な限り対応いたします。
          </div>
        </div>
        <a href="tel:070-4577-0177" style={{
          color: "#fff", textDecoration: "none",
          padding: "12px 22px", border: "1px solid rgba(255,255,255,0.5)",
          borderRadius: 4, fontSize: 13, letterSpacing: "0.1em",
          display: "inline-flex", alignItems: "center", gap: 8
        }}>
          <IconPhone size={14} stroke={2}/> ご相談する
        </a>
      </div>

      <div style={{
        marginTop: 24, fontSize: 12, color: "rgba(255,255,255,0.55)",
        textAlign: "center", lineHeight: 1.9
      }}>
        ※ 介護保険・自治体の福祉タクシー券をご利用の場合は、ご予約時にお伝えください。<br/>
        ※ 高速道路代・有料道路代・駐車料金等の実費は別途申し受けます。
      </div>
    </div>
  </section>
);

const PriceBlock = ({ label, unit, value, yen, hint }) => (
  <div style={{
    background: "var(--navy-deep)",
    padding: "48px 40px",
    display: "flex", flexDirection: "column", gap: 16
  }}>
    <div style={{
      display: "flex", justifyContent: "space-between", alignItems: "baseline"
    }}>
      <span style={{ fontSize: 11, letterSpacing: "0.3em", color: "var(--accent-soft)" }}>{label}</span>
      <span style={{ fontSize: 12, color: "rgba(255,255,255,0.6)" }}>{unit}</span>
    </div>
    <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
      <span className="mincho price-num" style={{
        fontSize: 88, fontWeight: 600, lineHeight: 1, letterSpacing: "0.02em"
      }}>{value}</span>
      <span className="mincho" style={{ fontSize: 26 }}>{yen}</span>
      <span style={{ fontSize: 12, color: "rgba(255,255,255,0.6)", marginLeft: 6 }}>{hint}</span>
    </div>
  </div>
);

// ===== CTA Block (phone + LINE) =====
const ContactCTA = () => (
  <section id="contact" style={{
    padding: "140px 32px",
    background: "var(--paper)",
    position: "relative"
  }}>
    <div style={{ maxWidth: 1100, margin: "0 auto" }}>
      <div style={{ textAlign: "center", marginBottom: 56 }}>
        <span style={{ fontSize: 11, letterSpacing: "0.4em", color: "var(--accent)" }}>— RESERVATION</span>
        <h2 className="mincho" style={{
          margin: "8px 0 16px", fontSize: "clamp(28px, 3.6vw, 44px)", fontWeight: 700,
          letterSpacing: "0.04em"
        }}>ご予約・お問い合わせ</h2>
        <p style={{ color: "var(--muted)", margin: 0, fontSize: 15 }}>
          お電話、または LINE からお気軽にどうぞ。前日までのご予約がおすすめです。
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
        {/* Phone */}
        <a href="tel:070-4577-0177" style={{
          background: "#fff", border: "1px solid var(--hairline)",
          padding: "48px 40px", textDecoration: "none", color: "var(--ink)",
          display: "flex", flexDirection: "column", gap: 20,
          position: "relative", overflow: "hidden",
          transition: "transform 0.3s, box-shadow 0.3s"
        }}
        onMouseEnter={e => {
          e.currentTarget.style.transform = "translateY(-4px)";
          e.currentTarget.style.boxShadow = "0 24px 48px rgba(20,37,74,0.12)";
        }}
        onMouseLeave={e => {
          e.currentTarget.style.transform = "";
          e.currentTarget.style.boxShadow = "";
        }}>
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "flex-start"
          }}>
            <div style={{
              width: 56, height: 56, borderRadius: 999,
              background: "var(--navy)", color: "#fff",
              display: "flex", alignItems: "center", justifyContent: "center"
            }}><IconPhone size={24} stroke={2}/></div>
            <span style={{ fontSize: 11, letterSpacing: "0.3em", color: "var(--muted)" }}>BY PHONE</span>
          </div>
          <div>
            <div style={{ fontSize: 12, letterSpacing: "0.2em", color: "var(--muted)", marginBottom: 4 }}>
              ご予約専用ダイヤル
            </div>
            <div className="mincho tel-big" style={{
              fontSize: 42, fontWeight: 600, color: "var(--navy)", letterSpacing: "0.02em"
            }}>070-4577-0177</div>
            <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 6 }}>
              受付 8:00 - 18:00 ／ 土日祝・夜間 応相談
            </div>
          </div>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            color: "var(--accent)", fontSize: 13, fontWeight: 600
          }}>
            タップして発信 <IconArrowRight size={16} stroke={2}/>
          </div>
        </a>

        {/* LINE */}
        <a href="https://line.me/ti/p/zvcZnnuRfn" target="_blank" rel="noopener" style={{
          background: "var(--line-green)", color: "#fff",
          padding: "48px 40px", textDecoration: "none",
          display: "flex", flexDirection: "column", gap: 20,
          position: "relative", overflow: "hidden",
          transition: "transform 0.3s, box-shadow 0.3s"
        }}
        onMouseEnter={e => {
          e.currentTarget.style.transform = "translateY(-4px)";
          e.currentTarget.style.boxShadow = "0 24px 48px rgba(6,199,85,0.3)";
        }}
        onMouseLeave={e => {
          e.currentTarget.style.transform = "";
          e.currentTarget.style.boxShadow = "";
        }}>
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "flex-start"
          }}>
            <div style={{
              width: 56, height: 56, borderRadius: 999,
              background: "rgba(255,255,255,0.18)", color: "#fff",
              display: "flex", alignItems: "center", justifyContent: "center"
            }}><IconLine size={28}/></div>
            <span style={{ fontSize: 11, letterSpacing: "0.3em", opacity: 0.85 }}>BY LINE</span>
          </div>
          <div>
            <div style={{ fontSize: 12, letterSpacing: "0.2em", opacity: 0.8, marginBottom: 4 }}>
              LINE でも予約可能です
            </div>
            <div className="mincho" style={{
              fontSize: 28, fontWeight: 600, letterSpacing: "0.04em", lineHeight: 1.4
            }}>友だち追加して<br/>メッセージで相談</div>
            <div style={{ fontSize: 13, opacity: 0.85, marginTop: 12 }}>
              LINE ID： <span style={{ fontWeight: 700 }}>kanna0177</span>
            </div>
          </div>
          <div className="line-qr-row" style={{
            display: "flex", gap: 16, alignItems: "center", marginTop: "auto"
          }}>
            <div style={{
              width: 104, height: 104, background: "#fff",
              display: "flex", alignItems: "center", justifyContent: "center",
              padding: 6
            }}>
              <img src="assets/line-qr.png" alt="LINE 友だち追加 QR" style={{ width: "100%", height: "100%", objectFit: "contain" }}/>
            </div>
            <div style={{ fontSize: 12, lineHeight: 1.7, opacity: 0.9 }}>
              スマホのカメラで<br/>QR を読み取るか、<br/>このカードをタップ。
            </div>
          </div>
        </a>
      </div>

      {/* Mail */}
      <div className="mail-row" style={{
        marginTop: 24,
        background: "#fff", border: "1px solid var(--hairline)",
        padding: "24px 32px",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <IconMail size={22} stroke={1.6}/>
          <div>
            <div style={{ fontSize: 11, letterSpacing: "0.2em", color: "var(--muted)" }}>EMAIL</div>
            <div style={{ fontSize: 16, fontWeight: 500 }}>kannacaretaxi@gmail.com</div>
          </div>
        </div>
        <a href="mailto:kannacaretaxi@gmail.com" style={{
          color: "var(--navy)", textDecoration: "none", fontSize: 13,
          fontWeight: 600, letterSpacing: "0.1em",
          display: "inline-flex", alignItems: "center", gap: 6
        }}>メールを送る <IconArrowRight size={14} stroke={2}/></a>
      </div>
    </div>
  </section>
);

// Decorative QR
const QRPlaceholder = () => {
  // pseudo-random pattern
  const cells = React.useMemo(() => {
    const arr = [];
    for (let y = 0; y < 21; y++) {
      const row = [];
      for (let x = 0; x < 21; x++) {
        // fixed corners
        const inCorner = (x < 7 && y < 7) || (x > 13 && y < 7) || (x < 7 && y > 13);
        if (inCorner) {
          const lx = x < 7 ? x : x - 14;
          const ly = y < 7 ? y : y - 14;
          row.push((lx === 0 || lx === 6 || ly === 0 || ly === 6) || (lx >= 2 && lx <= 4 && ly >= 2 && ly <= 4));
        } else {
          row.push(((x * 31 + y * 17 + x*y) % 5) < 2);
        }
      }
      arr.push(row);
    }
    return arr;
  }, []);
  return (
    <svg width="100%" height="100%" viewBox="0 0 21 21" shapeRendering="crispEdges">
      {cells.map((row, y) => row.map((on, x) => on ? (
        <rect key={`${x}-${y}`} x={x} y={y} width="1" height="1" fill="#000"/>
      ) : null))}
    </svg>
  );
};

// ===== Info / Footer =====
const Info = () => (
  <section id="info" style={{
    padding: "120px 32px 60px",
    background: "var(--navy-deep)", color: "#fff",
    position: "relative"
  }}>
    <div style={{ maxWidth: 1200, margin: "0 auto" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
        <div>
          <span style={{ fontSize: 11, letterSpacing: "0.4em", color: "var(--accent-soft)" }}>— COMPANY</span>
          <h2 className="mincho" style={{
            margin: "8px 0 36px", fontSize: 36, fontWeight: 700, letterSpacing: "0.04em"
          }}>事業者情報</h2>
          <dl style={{ margin: 0, display: "grid", gridTemplateColumns: "120px 1fr", rowGap: 18, columnGap: 24 }}>
            <Dt>屋号</Dt>           <Dd>カンナケアタクシー（KANNA CARE TAXI）</Dd>
            <Dt>代表</Dt>           <Dd>坂本 晃一（sakamoto koichi）</Dd>
            <Dt>所在地</Dt>         <Dd>〒719-0303<br/>岡山県浅口郡里庄町新庄 601-11</Dd>
            <Dt>TEL（予約）</Dt>     <Dd>070-4577-0177</Dd>
            <Dt>TEL（代表）</Dt>     <Dd>080-1903-2261</Dd>
            <Dt>Email</Dt>         <Dd>kannacaretaxi@gmail.com</Dd>
            <Dt>営業時間</Dt>       <Dd>8:00 - 18:00（土日祝・夜間 応相談）</Dd>
            <Dt>事業内容</Dt>       <Dd>救急救命士による福祉タクシー</Dd>
            <Dt>開業</Dt>           <Dd>2025年</Dd>
          </dl>
        </div>

        <div>
          <span style={{ fontSize: 11, letterSpacing: "0.4em", color: "var(--accent-soft)" }}>— ACCESS</span>
          <h2 className="mincho" style={{
            margin: "8px 0 36px", fontSize: 36, fontWeight: 700, letterSpacing: "0.04em"
          }}>アクセス</h2>
          <div style={{
            aspectRatio: "16/10",
            background: "#0f1d3a",
            border: "1px solid rgba(255,255,255,0.18)",
            position: "relative", overflow: "hidden"
          }}>
            <MapPlaceholder/>
          </div>
          <div style={{ marginTop: 20, display: "flex", gap: 16, alignItems: "center" }}>
            <IconMapPin size={18}/>
            <span style={{ fontSize: 14 }}>岡山県浅口郡里庄町新庄 601-11</span>
            <a href="https://www.google.com/maps/search/?api=1&query=岡山県浅口郡里庄町新庄601-11" target="_blank" rel="noopener" style={{
              marginLeft: "auto",
              color: "#fff", textDecoration: "none", fontSize: 12, letterSpacing: "0.1em",
              borderBottom: "1px solid rgba(255,255,255,0.4)", paddingBottom: 2
            }}>地図アプリで開く →</a>
          </div>
        </div>
      </div>

      {/* Social */}
      <div className="social-row" style={{
        marginTop: 80, paddingTop: 36,
        borderTop: "1px solid rgba(255,255,255,0.18)",
        display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <Logo size={40}/>
          <div>
            <div className="mincho" style={{ fontSize: 16, fontWeight: 600 }}>カンナケアタクシー</div>
            <div style={{ fontSize: 10, letterSpacing: "0.3em", opacity: 0.6 }}>KANNA CARE TAXI · since 2025</div>
          </div>
        </div>
        <div style={{ display: "flex", gap: 12 }}>
          <SocialLink href="https://www.instagram.com/kanna_caretaxi/" icon={<IconInstagram/>} label="@kanna_caretaxi"/>
          <SocialLink href="https://www.facebook.com/profile.php?id=61581874168451" icon={<IconFacebook/>} label="幹七 kanna"/>
          <SocialLink href="https://line.me/ti/p/zvcZnnuRfn" icon={<IconLine size={20}/>} label="LINEで友だち追加"/>
        </div>
      </div>

      <div style={{
        marginTop: 36, fontSize: 11, color: "rgba(255,255,255,0.45)",
        letterSpacing: "0.1em", textAlign: "center"
      }}>
        © 2025 KANNA CARE TAXI. All rights reserved.
      </div>
    </div>
  </section>
);

const Dt = ({ children }) => <dt style={{ fontSize: 11, letterSpacing: "0.2em", color: "rgba(255,255,255,0.55)", paddingTop: 4 }}>{children}</dt>;
const Dd = ({ children }) => <dd style={{ margin: 0, fontSize: 14, lineHeight: 1.7, color: "#fff" }}>{children}</dd>;

const SocialLink = ({ href, icon, label }) => (
  <a href={href} target="_blank" rel="noopener" style={{
    display: "inline-flex", alignItems: "center", gap: 8,
    color: "#fff", textDecoration: "none", fontSize: 12,
    padding: "10px 16px",
    border: "1px solid rgba(255,255,255,0.25)", borderRadius: 999,
    letterSpacing: "0.05em"
  }}>{icon} {label}</a>
);

const MapPlaceholder = () => (
  <svg viewBox="0 0 600 360" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
    <defs>
      <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
        <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="1"/>
      </pattern>
    </defs>
    <rect width="600" height="360" fill="url(#grid)"/>
    {/* roads */}
    <path d="M 0 200 Q 200 180 400 220 T 600 200" stroke="rgba(255,255,255,0.25)" strokeWidth="3" fill="none"/>
    <path d="M 300 0 L 320 360" stroke="rgba(255,255,255,0.18)" strokeWidth="2" fill="none"/>
    <path d="M 0 100 L 600 80" stroke="rgba(255,255,255,0.1)" strokeWidth="1" fill="none"/>
    {/* river */}
    <path d="M 100 360 Q 180 250 140 100 T 200 0" stroke="rgba(120,180,220,0.3)" strokeWidth="6" fill="none"/>
    {/* pin */}
    <g transform="translate(310,180)">
      <circle r="22" fill="rgba(196,90,58,0.25)"/>
      <circle r="12" fill="var(--accent)"/>
      <circle r="4" fill="#fff"/>
    </g>
    <text x="340" y="178" fill="#fff" fontSize="13" fontFamily="monospace" letterSpacing="0.1em">
      KANNA CARE TAXI
    </text>
    <text x="340" y="196" fill="rgba(255,255,255,0.6)" fontSize="11" fontFamily="monospace">
      里庄町 新庄 601-11
    </text>
  </svg>
);

// ===== Floating CTAs =====
const FloatingCTA = () => (
  <div className="float-cta" style={{
    position: "fixed", bottom: 24, right: 24, zIndex: 40,
    display: "flex", flexDirection: "column", gap: 10
  }}>
    <a href="tel:070-4577-0177" style={{
      width: 60, height: 60, borderRadius: 999,
      background: "var(--accent)", color: "#fff",
      display: "flex", alignItems: "center", justifyContent: "center",
      boxShadow: "0 8px 24px rgba(196,90,58,0.4)",
      textDecoration: "none"
    }} title="お電話で予約"><IconPhone size={22} stroke={2.2}/></a>
    <a href="https://line.me/ti/p/zvcZnnuRfn" target="_blank" rel="noopener" style={{
      width: 60, height: 60, borderRadius: 999,
      background: "var(--line-green)", color: "#fff",
      display: "flex", alignItems: "center", justifyContent: "center",
      boxShadow: "0 8px 24px rgba(6,199,85,0.4)",
      textDecoration: "none"
    }} title="LINEで予約"><IconLine size={26}/></a>
  </div>
);

Object.assign(window, {
  Features, Greeting, UseCases, Price, ContactCTA, Info, FloatingCTA
});
