// Hero.jsx — three layout variants with hero image + i18n

const HeroNav = ({ logoVariant, t, lang, setLang }) => (
  <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "20px 0", position: "relative", zIndex: 5, gap: 24 }}>
    <Logo variant={logoVariant} size={36} color="#FAF6EF" accent="#E68A5C" />
    <div className="nav-links" style={{ display: "flex", gap: 28, fontFamily: "'Bricolage Grotesque', sans-serif", fontSize: 15, color: "rgba(245,239,230,0.9)" }}>
      <a href="#services" style={{ color: "inherit", textDecoration: "none" }}>{t.nav_services}</a>
      <a href="#how" style={{ color: "inherit", textDecoration: "none" }}>{t.nav_how}</a>
      <a href="#area" style={{ color: "inherit", textDecoration: "none" }}>{t.nav_area}</a>
      <a href="#schedule" style={{ color: "inherit", textDecoration: "none" }}>{t.nav_schedule}</a>
      <a href="#reviews" style={{ color: "inherit", textDecoration: "none" }}>{t.nav_reviews}</a>
    </div>
    <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
      <LangSwitch lang={lang} setLang={setLang} dark={true}/>
      <a href="#schedule" className="btn btn-primary nav-cta" style={{ padding: "10px 18px", fontSize: 14 }}>
        {t.nav_book} →
      </a>
    </div>
  </nav>
);

const HeroNavLight = ({ logoVariant, t, lang, setLang }) => (
  <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "20px 0", gap: 24 }}>
    <Logo variant={logoVariant} size={36} color="var(--cocoa)" accent="var(--terracotta)" />
    <div className="nav-links" style={{ display: "flex", gap: 28, fontFamily: "'Bricolage Grotesque', sans-serif", fontSize: 15, color: "var(--cocoa)" }}>
      <a href="#services" style={{ color: "inherit", textDecoration: "none" }}>{t.nav_services}</a>
      <a href="#how" style={{ color: "inherit", textDecoration: "none" }}>{t.nav_how}</a>
      <a href="#area" style={{ color: "inherit", textDecoration: "none" }}>{t.nav_area}</a>
      <a href="#schedule" style={{ color: "inherit", textDecoration: "none" }}>{t.nav_schedule}</a>
    </div>
    <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
      <LangSwitch lang={lang} setLang={setLang} dark={false}/>
      <a href="#schedule" className="btn btn-primary nav-cta" style={{ padding: "10px 18px", fontSize: 14 }}>{t.nav_book} →</a>
    </div>
  </nav>
);

const LangSwitch = ({ lang, setLang, dark }) => (
  <div style={{
    display: "inline-flex", padding: 3, borderRadius: 999,
    background: dark ? "rgba(245,239,230,0.1)" : "rgba(42,31,24,0.06)",
    border: dark ? "1px solid rgba(245,239,230,0.18)" : "1px solid var(--line-strong)",
  }}>
    {["en","es"].map(l => (
      <button key={l} onClick={() => setLang(l)} style={{
        padding: "5px 11px", borderRadius: 999, border: "none", cursor: "pointer",
        background: lang === l ? (dark ? "var(--cream)" : "var(--cocoa)") : "transparent",
        color: lang === l ? (dark ? "var(--cocoa)" : "var(--cream)") : (dark ? "rgba(245,239,230,0.7)" : "var(--muted)"),
        fontFamily: "'Geist Mono', monospace", fontSize: 11, fontWeight: 600, letterSpacing: "0.05em",
        transition: "all .15s ease",
      }}>{l.toUpperCase()}</button>
    ))}
  </div>
);

const TrustBar = ({ t }) => (
  <div className="trust-bar" style={{ display: "flex", alignItems: "center", gap: 14, color: "rgba(245,239,230,0.85)" }}>
    <div style={{ display: "flex" }}>
      {[0,1,2,3].map(i => (
        <div key={i} style={{
          width: 36, height: 36, borderRadius: "50%",
          background: ["#C2552D", "#7A8C6C", "#C99A4A", "#8B3A1F"][i],
          border: "2px solid #2A1F18",
          marginLeft: i === 0 ? 0 : -12,
          display: "flex", alignItems: "center", justifyContent: "center",
          fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 600, fontSize: 13, color: "#FAF6EF"
        }}>{["MR", "JL", "AT", "DK"][i]}</div>
      ))}
    </div>
    <div>
      <div style={{ display: "flex", gap: 2, marginBottom: 2 }}>
        {[0,1,2,3,4].map(i => (
          <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill="#E0B36C">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
          </svg>
        ))}
      </div>
      <div className="font-mono" style={{ fontSize: 12 }}>{t.hero_trust_count}</div>
    </div>
  </div>
);

const TrustBarLight = ({ t }) => (
  <div className="trust-bar" style={{ display: "flex", alignItems: "center", gap: 14, color: "var(--cocoa)" }}>
    <div style={{ display: "flex" }}>
      {[0,1,2,3].map(i => (
        <div key={i} style={{
          width: 36, height: 36, borderRadius: "50%",
          background: ["#C2552D", "#7A8C6C", "#C99A4A", "#8B3A1F"][i],
          border: "2px solid var(--paper)",
          marginLeft: i === 0 ? 0 : -12,
          display: "flex", alignItems: "center", justifyContent: "center",
          fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 600, fontSize: 13, color: "#FAF6EF"
        }}>{["MR", "JL", "AT", "DK"][i]}</div>
      ))}
    </div>
    <div>
      <div style={{ display: "flex", gap: 2, marginBottom: 2 }}>
        {[0,1,2,3,4].map(i => (
          <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill="#C99A4A">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
          </svg>
        ))}
      </div>
      <div className="font-mono" style={{ fontSize: 12, color: "var(--muted)" }}>{t.hero_trust_count}</div>
    </div>
  </div>
);

const HERO_IMG = "assets/hero-plumber.png";

// Layout A — bold display, image right
const HeroA = ({ logoVariant, t, lang, setLang }) => (
  <section style={{ background: "var(--cocoa-2)", color: "var(--cream)", position: "relative", overflow: "hidden", borderRadius: "0 0 32px 32px" }} className="grain">
    <div className="container">
      <HeroNav logoVariant={logoVariant} t={t} lang={lang} setLang={setLang}/>
      <div className="hero-grid" style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 48, alignItems: "center", padding: "60px 0 90px" }}>
        <div>
          <div className="hero-pill" style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 14px", borderRadius: 999, background: "rgba(194,85,45,0.18)", border: "1px solid rgba(194,85,45,0.4)", fontFamily: "'Geist Mono', monospace", fontSize: 12, color: "#E68A5C", marginBottom: 28 }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#E68A5C", animation: "pulse-dot 2s infinite" }}></span>
            {t.hero_pill}
          </div>
          <h1 className="font-display hero-title" style={{ fontSize: 88, lineHeight: 0.95, letterSpacing: "-0.04em", margin: 0, marginBottom: 24, fontWeight: 600 }}>
            {t.hero_title_a_1} <span className="font-serif" style={{ color: "#E68A5C", fontWeight: 400 }}>{t.hero_title_a_word}</span><br/>
            {t.hero_title_a_2}
          </h1>
          <p className="hero-sub" style={{ fontSize: 19, lineHeight: 1.5, color: "rgba(245,239,230,0.78)", maxWidth: 480, marginBottom: 36 }}>
            {t.hero_sub_a}
          </p>
          <div className="hero-cta-row" style={{ display: "flex", gap: 14, marginBottom: 44 }}>
            <a href="#schedule" className="btn btn-primary">{t.hero_cta_book}</a>
            <a href="#how" className="btn" style={{ background: "transparent", color: "var(--cream)", border: "1.5px solid rgba(245,239,230,0.4)" }}>{t.hero_cta_how}</a>
          </div>
          <TrustBar t={t}/>
        </div>
        <div className="hero-img-wrap" style={{ position: "relative", height: 600 }}>
          <div style={{ position: "absolute", inset: 0, borderRadius: 24, overflow: "hidden", boxShadow: "0 30px 80px -20px rgba(0,0,0,0.6)", border: "1px solid rgba(245,239,230,0.1)" }}>
            <img src={HERO_IMG} alt="FixMyCasa pro fixing kitchen sink" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(27,19,13,0) 50%, rgba(27,19,13,0.4) 100%)" }}/>
          </div>
          <div className="hero-floater left" style={{
            position: "absolute", left: -32, bottom: 40, width: 240,
            background: "var(--cream)", color: "var(--cocoa)",
            padding: 16, borderRadius: 16,
            boxShadow: "0 20px 50px -10px rgba(0,0,0,0.4)",
            transform: "rotate(-3deg)"
          }}>
            <div className="font-mono" style={{ fontSize: 10, color: "var(--muted)", marginBottom: 6 }}>{t.hero_floating_next}</div>
            <div className="font-display" style={{ fontSize: 16, marginBottom: 8 }}>{t.hero_floating_job}</div>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <div style={{ width: 28, height: 28, borderRadius: "50%", background: "var(--terracotta)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--cream)", fontSize: 11, fontWeight: 600 }}>RC</div>
              <div className="font-mono" style={{ fontSize: 11 }}>{t.hero_floating_eta}</div>
            </div>
          </div>
          <div className="hero-floater right" style={{
            position: "absolute", right: -16, top: 40, width: 220,
            background: "var(--paper)", color: "var(--cocoa)",
            padding: 14, borderRadius: 14,
            boxShadow: "0 20px 50px -10px rgba(0,0,0,0.4)",
            transform: "rotate(2deg)"
          }}>
            <div style={{ display: "flex", gap: 2, marginBottom: 6 }}>
              {[0,1,2,3,4].map(i => (
                <svg key={i} width="11" height="11" viewBox="0 0 24 24" fill="#C99A4A"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
              ))}
            </div>
            <div style={{ fontSize: 12, lineHeight: 1.4, marginBottom: 6 }}>"{t.hero_floating_review}"</div>
            <div className="font-mono" style={{ fontSize: 10, color: "var(--muted)" }}>{t.hero_floating_attribution}</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// Layout B — full-bleed image bg, centered text
const HeroB = ({ logoVariant, t, lang, setLang }) => (
  <section className="grain hero-b-section" style={{ background: "#1B130D", color: "var(--cream)", position: "relative", overflow: "hidden", borderRadius: "0 0 32px 32px", minHeight: 760 }}>
    <div style={{ position: "absolute", inset: 0 }}>
      <img src={HERO_IMG} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 35%", filter: "saturate(0.9) contrast(1.05)" }}/>
    </div>
    <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(27,19,13,0.85) 0%, rgba(27,19,13,0.55) 35%, rgba(27,19,13,0.4) 60%, rgba(27,19,13,0.95) 100%)" }}></div>
    <div className="container" style={{ position: "relative", zIndex: 2 }}>
      <HeroNav logoVariant={logoVariant} t={t} lang={lang} setLang={setLang}/>
      <div className="hero-b-pad" style={{ padding: "100px 0 80px", textAlign: "center", maxWidth: 920, margin: "0 auto" }}>
        <div className="font-mono hero-meta" style={{ fontSize: 12, color: "#E68A5C", marginBottom: 24, letterSpacing: "0.1em" }}>
          {t.hero_meta_b}
        </div>
        <h1 className="font-display hero-title huge" style={{ fontSize: 124, lineHeight: 0.92, letterSpacing: "-0.045em", margin: 0, marginBottom: 28, fontWeight: 600 }}>
          {t.hero_title_b_1}<br/>
          <span className="font-serif" style={{ color: "#E68A5C", fontWeight: 400 }}>{t.hero_title_b_word}</span> {t.hero_title_b_2}
        </h1>
        <p className="hero-sub" style={{ fontSize: 20, lineHeight: 1.5, color: "rgba(245,239,230,0.85)", maxWidth: 600, margin: "0 auto 40px" }}>
          {t.hero_sub_b}
        </p>
        <div className="hero-cta-row" style={{ display: "inline-flex", gap: 14, marginBottom: 60, flexWrap: "wrap", justifyContent: "center" }}>
          <a href="#schedule" className="btn btn-primary">{t.hero_cta_book}</a>
          <a href="#how" className="btn" style={{ background: "rgba(245,239,230,0.1)", color: "var(--cream)", border: "1px solid rgba(245,239,230,0.25)", backdropFilter: "blur(8px)" }}>{t.hero_cta_included}</a>
        </div>
        <div style={{ display: "flex", justifyContent: "center" }}><TrustBar t={t}/></div>
      </div>
    </div>
  </section>
);

// Layout C — split asymmetric, editorial
const HeroC = ({ logoVariant, t, lang, setLang }) => (
  <section style={{ background: "var(--paper)", color: "var(--cocoa)", position: "relative", overflow: "hidden", borderBottom: "1px solid var(--line)" }} className="grain">
    <div className="container">
      <HeroNavLight logoVariant={logoVariant} t={t} lang={lang} setLang={setLang}/>
      <div className="hero-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 60, alignItems: "end", padding: "80px 0 100px" }}>
        <div>
          <div className="font-mono hero-meta" style={{ fontSize: 11, color: "var(--terracotta)", marginBottom: 20, letterSpacing: "0.1em" }}>
            {t.hero_meta_c}
          </div>
          <h1 className="font-display hero-title" style={{ fontSize: 76, lineHeight: 0.92, letterSpacing: "-0.04em", margin: 0, marginBottom: 28, fontWeight: 600 }}>
            {t.hero_title_c_1}<br/>
            <span className="font-serif" style={{ color: "var(--terracotta)", fontWeight: 400 }}>{t.hero_title_c_word}</span> {t.hero_title_c_2}
          </h1>
          <p className="hero-sub" style={{ fontSize: 18, lineHeight: 1.55, color: "var(--muted)", maxWidth: 460, marginBottom: 32 }}>
            {t.hero_sub_c}
          </p>
          <div className="hero-cta-row" style={{ display: "flex", gap: 12, marginBottom: 40, flexWrap: "wrap" }}>
            <a href="#schedule" className="btn btn-primary">{t.hero_cta_book}</a>
            <a href="#how" className="btn btn-ghost">{t.hero_cta_how}</a>
          </div>
          <TrustBarLight t={t}/>
        </div>
        <div style={{ position: "relative" }}>
          <div className="hero-img-wrap tall" style={{ width: "100%", height: 580, borderRadius: 18, overflow: "hidden", boxShadow: "0 30px 80px -20px rgba(42,31,24,0.25)" }}>
            <img src={HERO_IMG} alt="FixMyCasa pro fixing kitchen sink" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
          </div>
          <div className="font-serif hero-quote-c" style={{ position: "absolute", top: -8, right: 12, fontSize: 22, color: "var(--terracotta)", transform: "rotate(4deg)", background: "var(--paper)", padding: "4px 10px", borderRadius: 6 }}>
            {t.hero_quote_c}
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Hero = ({ variant, logoVariant, t, lang, setLang }) => {
  if (variant === "B") return <HeroB logoVariant={logoVariant} t={t} lang={lang} setLang={setLang}/>;
  if (variant === "C") return <HeroC logoVariant={logoVariant} t={t} lang={lang} setLang={setLang}/>;
  return <HeroA logoVariant={logoVariant} t={t} lang={lang} setLang={setLang}/>;
};

window.Hero = Hero;
window.LangSwitch = LangSwitch;