// Hero — supports two layouts via tweaks.heroLayout: "split" | "centered"

function Hero({ tweaks }) {
  const variant = tweaks.heroLayout || "split";

  if (variant === "centered") {
    return (
      <section id="top" style={{
        position: "relative",
        padding: "calc(96px * var(--density)) 0 calc(80px * var(--density))",
        background: "linear-gradient(180deg, var(--primary-50), var(--bg) 80%)",
        overflow: "hidden",
      }}>
        <HeroBg />
        <div className="container" style={{ position: "relative", textAlign: "center", maxWidth: 980, margin: "0 auto" }}>
          <Reveal><HeroChip /></Reveal>
          <Reveal delay={80}>
            <h1 style={heroTitleStyle("centered")}>
              相談しやすく、<br />
              信頼される<span style={{ color: "var(--primary-600)" }}>Web制作</span>。
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p style={{ ...heroLeadStyle, margin: "0 auto 32px", maxWidth: 620 }}>
              お客様の想いを丁寧にヒアリングし、成果につながるWebサイトを制作します。
              初めての方でも安心してご相談ください。
            </p>
          </Reveal>
          <Reveal delay={240}>
            <div className="hero-btns" style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
              <a className="btn btn-primary btn-lg" href="#contact"><Icon name="mail" size={18}/>無料で相談してみる</a>
              <a className="btn btn-outline btn-lg" href="service-doc.html"><Icon name="doc" size={18}/>サービス資料をダウンロード</a>
            </div>
          </Reveal>
          <Reveal delay={320}>
            <div className="hero-feat-grid" style={{ marginTop: 56, display: "grid", gap: 16, maxWidth: 760, margin: "56px auto 0" }}>
              {heroFeatures.map((f, i) => <HeroFeatureCard key={i} {...f} />)}
            </div>
          </Reveal>
          <Reveal delay={400} style={{ marginTop: 48 }}>
            <div style={{ borderRadius: 18, overflow: "hidden", boxShadow: "var(--shadow-md)", aspectRatio: "21 / 9" }}>
              <img src="images/hero.png?v=2" alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
          </Reveal>
        </div>
      </section>
    );
  }

  // split (default) — desktop: full-width bg image + text overlay / mobile: image on top, text below
  return (
    <section id="top" style={{
      position: "relative",
      minHeight: "min(720px, 92vh)",
      backgroundImage: "url('images/hero.png?v=2')",
      backgroundSize: "cover",
      backgroundPosition: "right center",
      overflow: "hidden",
      display: "flex",
      alignItems: "center",
      padding: "calc(80px * var(--density)) 0",
    }}>
      {/* Mobile only: full-width image block (shown via CSS, hidden on desktop) */}
      <div className="hero-mobile-img">
        <img src="images/hero.png?v=2" alt="" />
      </div>

      {/* gradient overlay — desktop only */}
      <div className="hero-overlay-h" style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(90deg, color-mix(in oklab, var(--bg) 96%, transparent) 0%, color-mix(in oklab, var(--bg) 92%, transparent) 38%, color-mix(in oklab, var(--bg) 40%, transparent) 62%, transparent 88%)",
        pointerEvents: "none",
      }} />
      <div className="hero-overlay-h" style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, color-mix(in oklab, var(--primary-50) 35%, transparent), transparent 40%)",
        pointerEvents: "none",
      }} />

      <div className="container" style={{ position: "relative", width: "100%" }}>
        <div className="hero-content" style={{ maxWidth: 620 }}>
          <Reveal><HeroChip /></Reveal>
          <Reveal delay={80}>
            <h1 style={heroTitleStyle("split")}>
              相談しやすく、<br />
              信頼される<span style={{ color: "var(--primary-600)" }}>Web制作</span>。
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p style={heroLeadStyle}>
              お客様の想いを丁寧にヒアリングし、成果につながるWebサイトを制作します。<br />
              初めての方でも安心してご相談ください。
            </p>
          </Reveal>
          <Reveal delay={220}>
            <div className="hero-feat-grid" style={{ display: "grid", gap: 10, margin: "10px 0 28px", maxWidth: 540 }}>
              {heroFeatures.map((f, i) => <HeroFeatureCard key={i} {...f} compact />)}
            </div>
          </Reveal>
          <Reveal delay={280}>
            <div className="hero-btns" style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-primary btn-lg" href="#contact"><Icon name="mail" size={18}/>無料で相談してみる</a>
              <a className="btn btn-outline btn-lg" href="service-doc.html"><Icon name="doc" size={18}/>サービス資料をダウンロード</a>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`
        /* Desktop: hide mobile image block */
        .hero-mobile-img { display: none; }

        @media (max-width: 640px) {
          /* Switch to stacked layout on mobile */
          #top {
            background-image: none !important;
            min-height: unset !important;
            display: block !important;
            padding: 0 !important;
          }
          /* Show the full-width image at the top */
          .hero-mobile-img {
            display: block;
            width: 100%;
            aspect-ratio: 16 / 9;
            overflow: hidden;
          }
          .hero-mobile-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
          }
          /* Hide desktop gradient overlays */
          .hero-overlay-h { display: none !important; }
          /* Text content below the image */
          .hero-content {
            max-width: 100% !important;
            background: none !important;
            padding: 24px 0 32px !important;
            border-radius: 0 !important;
          }
        }

        @media (min-width: 641px) and (max-width: 900px) {
          #top { background-position: 70% center !important; }
          .hero-content { background: color-mix(in oklab, var(--bg) 90%, transparent); padding: 24px; border-radius: 14px; }
        }
      `}</style>
    </section>
  );
}

function HeroChip() {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      background: "var(--surface)", color: "var(--primary-600)",
      padding: "7px 14px", borderRadius: 999, fontSize: 13, fontWeight: 600,
      border: "1px solid color-mix(in oklab, var(--primary-600) 30%, transparent)",
      boxShadow: "var(--shadow-sm)",
      marginBottom: 22,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 3, background: "var(--primary-600)" }} />
      ご相談・お見積もり無料
    </span>
  );
}

const heroTitleStyle = (v) => ({
  fontSize: v === "centered" ? "clamp(28px, 5vw, 64px)" : "clamp(28px, 4.4vw, 56px)",
  lineHeight: 1.25,
  letterSpacing: "-0.02em",
  fontWeight: 800,
  margin: "0 0 20px",
  color: "var(--fg)",
});

const heroLeadStyle = {
  fontSize: 16,
  color: "var(--fg-2)",
  margin: "0 0 28px",
  lineHeight: 1.9,
};

const heroFeatures = [
  { icon: "chat", title: "相談しやすい", desc: "丁寧なヒアリング" },
  { icon: "shield", title: "安心のサポート体制", desc: "公開後も伴走" },
  { icon: "trend", title: "成果につながる", desc: "Webサイト制作" },
];

function HeroFeatureCard({ icon, title, desc, compact }) {
  return (
    <div className="card" style={{
      padding: compact ? "14px 14px" : "18px 18px",
      display: "flex", alignItems: "center", gap: compact ? 10 : 14,
    }}>
      <span style={{
        width: compact ? 36 : 44, height: compact ? 36 : 44, flex: "0 0 auto",
        background: "var(--primary-100)", color: "var(--primary-600)",
        borderRadius: 10, display: "grid", placeItems: "center",
      }}>
        <Icon name={icon} size={compact ? 18 : 22} />
      </span>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: compact ? 13 : 14, fontWeight: 700, color: "var(--fg)", lineHeight: 1.4 }}>{title}</div>
        <div style={{ fontSize: compact ? 11 : 12, color: "var(--fg-3)", lineHeight: 1.5, marginTop: 2 }}>{desc}</div>
      </div>
    </div>
  );
}

function HeroVisual() {
  return (
    <div style={{ position: "relative", aspectRatio: "5 / 4" }}>
      {/* photo */}
      <div style={{
        position: "absolute", inset: 0, borderRadius: 22, overflow: "hidden",
        boxShadow: "var(--shadow-md)",
      }}>
        <img src="images/hero.png?v=2" alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      </div>



      <style>{`
        @keyframes floaty {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-8px); }
        }
      `}</style>
    </div>
  );
}

function HeroBg() {
  return (
    <>
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        backgroundImage: "radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--primary-600) 15%, transparent) 1px, transparent 0)",
        backgroundSize: "32px 32px",
        maskImage: "linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,0))",
        WebkitMaskImage: "linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,0))",
      }} />
      <div style={{
        position: "absolute", top: -120, right: -80, width: 420, height: 420,
        background: "radial-gradient(closest-side, color-mix(in oklab, var(--primary-500) 25%, transparent), transparent)",
        pointerEvents: "none",
      }} />
    </>
  );
}

Object.assign(window, { Hero });