// 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="#"><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) — single full-width image with overlay text
  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",
    }}>
      {/* gradient overlay — fades white on left to transparent toward right so text is readable */}
      <div 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 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="#" style={{ background: "rgba(255,255,255,0.85)", backdropFilter: "blur(6px)" }}><Icon name="doc" size={18}/>サービス資料をダウンロード</a>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`
        @media (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(36px, 5vw, 64px)" : "clamp(34px, 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 });