// ===== Header =====
const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const headerStyle = {
    position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
    transition: "all 0.3s ease",
    background: scrolled ? "rgba(28, 47, 94, 0.96)" : "transparent",
    backdropFilter: scrolled ? "blur(8px)" : "none",
    borderBottom: scrolled ? "1px solid rgba(255,255,255,0.1)" : "none",
  };
  return (
    <header style={headerStyle}>
      <div style={{
        maxWidth: 1200, margin: "0 auto",
        padding: "16px 32px",
        display: "flex", alignItems: "center", justifyContent: "space-between"
      }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none", color: "#fff" }}>
          <Logo size={36} color="#fff" />
          <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.1 }}>
            <span className="mincho" style={{ fontSize: 17, fontWeight: 600, letterSpacing: "0.04em" }}>カンナケアタクシー</span>
            <span style={{ fontSize: 10, letterSpacing: "0.3em", opacity: 0.75 }}>KANNA CARE TAXI</span>
          </div>
        </a>
        <nav style={{ display: "flex", alignItems: "center", gap: 28 }}>
          {[
            ["特長", "#features"],
            ["料金", "#price"],
            ["ご利用シーン", "#use"],
            ["会社情報", "#info"],
          ].map(([label, href]) => (
            <a key={href} href={href} style={{
              color: "#fff", textDecoration: "none", fontSize: 13,
              letterSpacing: "0.1em", opacity: 0.9
            }}>{label}</a>
          ))}
          <a href="tel:070-4577-0177" style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            background: "var(--accent)", color: "#fff",
            padding: "10px 18px", borderRadius: 999, textDecoration: "none",
            fontSize: 13, fontWeight: 600, letterSpacing: "0.05em"
          }}>
            <IconPhone size={16} stroke={2} /> ご予約
          </a>
        </nav>
      </div>
    </header>
  );
};

// ===== Logo (KANNA Care Taxi mark) =====
const Logo = ({ size = 56, color = "#fff" }) => (
  <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
    {/* abstract swoosh inspired form (original) */}
    <path d="M20 78 Q 28 35 70 22" stroke={color} strokeWidth="9" strokeLinecap="round" fill="none"/>
    <path d="M30 78 Q 50 60 78 58" stroke={color} strokeWidth="6" strokeLinecap="round" fill="none" opacity="0.7"/>
    <circle cx="78" cy="24" r="5" fill={color} />
  </svg>
);

// ===== Hero =====
const Hero = () => {
  return (
    <section id="top" style={{
      position: "relative",
      minHeight: "100vh",
      background: "linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-light) 100%)",
      color: "#fff",
      overflow: "hidden",
    }}>
      {/* curved decoration like business card */}
      <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.18 }}
           viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="curveGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#ffffff" stopOpacity="0.25"/>
            <stop offset="100%" stopColor="#ffffff" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <path d="M -100 600 Q 400 100 1600 300 L 1600 900 L -100 900 Z" fill="url(#curveGrad)"/>
        <path d="M -100 700 Q 600 200 1700 500" stroke="#fff" strokeWidth="1" fill="none" opacity="0.4"/>
        <path d="M -100 780 Q 700 320 1800 580" stroke="#fff" strokeWidth="1" fill="none" opacity="0.3"/>
      </svg>

      {/* decorative paper accent */}
      <div style={{
        position: "absolute", right: -80, top: -80, width: 480, height: 480,
        borderRadius: "50%",
        background: "radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%)"
      }}/>

      <div style={{
        position: "relative",
        maxWidth: 1200, margin: "0 auto",
        padding: "180px 32px 120px",
        display: "grid", gridTemplateColumns: "1.15fr 0.85fr", gap: 56, alignItems: "center"
      }}>
        {/* Left text */}
        <div>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            border: "1px solid rgba(255,255,255,0.35)",
            padding: "7px 16px", borderRadius: 999,
            fontSize: 12, letterSpacing: "0.2em", marginBottom: 28
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--accent-soft)" }}/>
            2025年 開業 ・ 岡山県浅口郡里庄町
          </div>
          <h1 className="mincho hero-h1" style={{
            margin: 0, fontWeight: 700,
            fontSize: "clamp(28px, 4.4vw, 60px)",
            lineHeight: 1.32,
            letterSpacing: "0.015em",
          }}>
            <span style={{ display: "block", whiteSpace: "nowrap" }}>通院も、お出かけも。</span>
            <span style={{ display: "block", whiteSpace: "nowrap", color: "var(--accent-soft)" }}>玄関から目的地まで</span>
            <span style={{ display: "block", whiteSpace: "nowrap" }}>お運びします。</span>
          </h1>
          <p style={{
            marginTop: 28, marginBottom: 40,
            fontSize: 17, lineHeight: 2, maxWidth: 540,
            color: "rgba(255,255,255,0.85)"
          }}>
            車椅子のままでもご乗車いただける、地域密着の福祉タクシー。<br/>
            病院・お買い物・冠婚葬祭まで、ドア・ツー・ドアでお送りします。
          </p>
          <div className="hero-cta-row" style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
            <a href="tel:070-4577-0177" style={{
              display: "inline-flex", alignItems: "center", gap: 12,
              background: "#fff", color: "var(--navy-deep)",
              padding: "18px 28px", borderRadius: 4,
              textDecoration: "none", fontWeight: 700,
              boxShadow: "0 12px 32px rgba(0,0,0,0.25)"
            }}>
              <IconPhone size={20} stroke={2.2}/>
              <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.1, alignItems: "flex-start" }}>
                <span style={{ fontSize: 11, letterSpacing: "0.15em", color: "var(--muted)" }}>お電話でご予約</span>
                <span style={{ fontSize: 22, letterSpacing: "0.04em" }}>070-4577-0177</span>
              </div>
            </a>
            <a href="https://line.me/ti/p/zvcZnnuRfn" target="_blank" rel="noopener" style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              background: "var(--line-green)", color: "#fff",
              padding: "18px 24px", borderRadius: 4,
              textDecoration: "none", fontWeight: 700, fontSize: 15,
              boxShadow: "0 12px 32px rgba(6,199,85,0.3)"
            }}>
              <IconLine size={22}/> LINEで予約
            </a>
          </div>
          <div className="hero-stats" style={{
            marginTop: 56, display: "flex", gap: 32, flexWrap: "wrap",
            color: "rgba(255,255,255,0.75)", fontSize: 13
          }}>
            <Stat n="630" suffix="円〜" label="初乗り 1.5km"/>
            <Stat n="8:00" suffix="-18:00" label="営業時間 / 夜間応相談"/>
            <Stat n="救急" suffix="救命士" label="国家資格保有者が運転"/>
          </div>
        </div>

        {/* Right card */}
        <div style={{ position: "relative" }}>
          <HeroCard/>
        </div>
      </div>

      {/* scroll cue */}
      <div style={{
        position: "absolute", bottom: 32, left: "50%", transform: "translateX(-50%)",
        color: "rgba(255,255,255,0.55)", fontSize: 11, letterSpacing: "0.3em",
        display: "flex", flexDirection: "column", alignItems: "center", gap: 12
      }}>
        SCROLL
        <span style={{ width: 1, height: 40, background: "rgba(255,255,255,0.4)" }}/>
      </div>
    </section>
  );
};

const Stat = ({ n, suffix, label }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
    <div className="mincho" style={{ fontSize: 28, color: "#fff", lineHeight: 1, fontWeight: 600 }}>
      {n}<span style={{ marginLeft: 2 }}>{suffix}</span>
    </div>
    <div style={{ fontSize: 11, letterSpacing: "0.15em" }}>{label}</div>
  </div>
);

const HeroCard = () => (
  <div className="hero-card" style={{
    position: "relative",
    background: "rgba(255,255,255,0.06)",
    border: "1px solid rgba(255,255,255,0.18)",
    borderRadius: 6,
    padding: 36,
    backdropFilter: "blur(12px)",
    transform: "rotate(-1.2deg)"
  }}>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 28 }}>
      <div>
        <div style={{ fontSize: 11, letterSpacing: "0.3em", opacity: 0.7 }}>OPEN HOURS</div>
        <div className="mincho" style={{ fontSize: 32, fontWeight: 600, marginTop: 4 }}>8:00 — 18:00</div>
      </div>
      <Logo size={48}/>
    </div>
    <div style={{ borderTop: "1px solid rgba(255,255,255,0.18)", paddingTop: 24, display: "flex", flexDirection: "column", gap: 16 }}>
      <Row icon={<IconPhone size={18}/>} label="ご予約" value="070-4577-0177"/>
      <Row icon={<IconLine size={18}/>} label="LINE" value="ID: kanna0177"/>
      <Row icon={<IconMapPin size={18}/>} label="所在地" value="岡山県浅口郡里庄町新庄601-11"/>
      <Row icon={<IconCalendar size={18}/>} label="営業日" value="土日祝・夜間 応相談"/>
    </div>
    <div style={{
      position: "absolute", bottom: -16, right: -16,
      background: "var(--accent)", color: "#fff",
      padding: "10px 18px", borderRadius: 999,
      fontSize: 11, letterSpacing: "0.2em", fontWeight: 700,
      boxShadow: "0 8px 20px rgba(196,90,58,0.35)"
    }}>
      EST. 2025
    </div>
  </div>
);

const Row = ({ icon, label, value }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
    <div style={{
      width: 36, height: 36, borderRadius: 999,
      background: "rgba(255,255,255,0.1)",
      display: "flex", alignItems: "center", justifyContent: "center",
      flexShrink: 0
    }}>{icon}</div>
    <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.3 }}>
      <span style={{ fontSize: 10, letterSpacing: "0.2em", opacity: 0.6 }}>{label}</span>
      <span style={{ fontSize: 15, fontWeight: 500 }}>{value}</span>
    </div>
  </div>
);

Object.assign(window, { Header, Hero, Logo });
