// ============================================================
// SamuelMarndi.com — Home Page Hero Variants
// 4 hero options exposed as Tweaks: chatbot / founder / capability / split
// ============================================================

function HeroChatbot({ headline }) {
  const lines = HEADLINES[headline] || HEADLINES.main;
  // Pull editable content from admin CMS (with defaults baked in)
  const content = window.PageContent
    ? window.PageContent.usePageContent("home", {})
    : {};
  const eyebrow = content.hero_eyebrow || "Available · Bengaluru & remote";
  const h1Line1 = content.hero_h1_line1 || lines[0];
  const h1Line2 = content.hero_h1_line2 || lines[1] || "";
  const h1Line3 = content.hero_h1_line3 || lines[lines.length - 1] || "";
  const subhead = content.hero_subhead || "I'm Samuel — networking, CCTV, servers, websites, AI, cloud, IoT, support. One accountable person.";
  const ctaPrimary = content.hero_cta_primary || "Get a quote in 24h";
  const s1n = content.hero_stat1_num || "60s";
  const s1l = content.hero_stat1_label || "First response";
  const s2n = content.hero_stat2_num || "11";
  const s2l = content.hero_stat2_label || "Practice areas";
  const s3n = content.hero_stat3_num || "₹1.2L+";
  const s3l = content.hero_stat3_label || "Avg. quote";

  return (
    <section className="hero hero-chatbot paper-bg" style={{
      padding: "var(--space-xl) 0 var(--space-2xl)",
      position: "relative",
      overflow: "hidden"
    }}>
      <DecorativeMarks />
      <div className="container hero-3col" style={{
        display: "grid",
        gridTemplateColumns: "1.05fr 0.9fr 1.05fr",
        gap: 32,
        alignItems: "center",
        position: "relative", zIndex: 2,
      }}>
        {/* LEFT: text + CTAs */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#7EB87A" }}></span>
              {eyebrow}
            </span>
          </div>
          <h1 style={{
            fontSize: "clamp(34px, 4vw, 56px)",
            marginBottom: 22,
            lineHeight: 0.98,
          }}>
            <span style={{ display: "block", color: "var(--text)" }}>{h1Line1}</span>
            {h1Line2 && <span style={{ display: "block", color: "var(--text)" }}>{h1Line2}</span>}
            {h1Line3 && <span style={{ display: "block", color: "var(--copper)", fontStyle: "italic" }}>{h1Line3}</span>}
          </h1>
          <p style={{ fontSize: 16, color: "var(--text-soft)", lineHeight: 1.55, marginBottom: 24 }}>
            {subhead}
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 24 }}>
            <a href="/contact" className="btn btn-primary btn-lg" style={{ justifyContent: "center" }}>
              {ctaPrimary} <Icons.arrow size={16} />
            </a>
            <a href={`https://wa.me/${(window.CONTACT||{}).whatsapp || "918280320550"}`} target="_blank" rel="noopener" className="btn btn-ghost btn-lg" style={{ justifyContent: "center" }}>
              <Icons.whatsapp size={14} style={{ color: "#25D366" }} /> WhatsApp Samuel
            </a>
          </div>
          <div style={{ display: "flex", gap: 22, paddingTop: 20, borderTop: "1px solid var(--line)", flexWrap: "wrap" }}>
            <MicroStat num={s1n} label={s1l} />
            <MicroStat num={s2n} label={s2l} />
            <MicroStat num={s3n} label={s3l} />
          </div>
        </div>

        {/* CENTER: Photo without a hard box — soft transparent treatment */}
        <div style={{
          position: "relative",
          alignSelf: "center",
          maxHeight: 640,
          aspectRatio: "3 / 4",
        }}>
          {/* Radial glow behind */}
          <div style={{
            position: "absolute", inset: -40,
            background: "radial-gradient(ellipse at center, color-mix(in srgb, var(--copper) 30%, transparent) 0%, transparent 65%)",
            filter: "blur(28px)", zIndex: 0,
          }} />
          {/* Decorative dot patterns (top-left, bottom-right) */}
          <div style={{
            position: "absolute", top: -16, left: -16,
            width: 70, height: 70,
            background: "repeating-radial-gradient(circle at 6px 6px, var(--copper) 0 1.5px, transparent 2px 12px)",
            opacity: 0.45, zIndex: 0,
          }} />
          <div style={{
            position: "absolute", bottom: -16, right: -16,
            width: 90, height: 90,
            background: "repeating-radial-gradient(circle at 6px 6px, var(--copper) 0 1.5px, transparent 2px 12px)",
            opacity: 0.35, zIndex: 0,
          }} />
          {/* The photo itself — no border, soft fade at bottom */}
          <img
            src="/assets/samuel.png"
            alt="Samuel Marndi · Full-stack IT Consultant, Bengaluru"
            loading="eager"
            fetchpriority="high"
            style={{
              position: "relative", zIndex: 1,
              width: "100%", height: "100%",
              objectFit: "cover", objectPosition: "center top",
              display: "block",
              filter: "drop-shadow(0 30px 40px rgba(28,22,17,0.25)) drop-shadow(0 12px 18px rgba(184,122,79,0.18))",
              maskImage: "linear-gradient(180deg, #000 0%, #000 88%, transparent 100%)",
              WebkitMaskImage: "linear-gradient(180deg, #000 0%, #000 88%, transparent 100%)",
            }}
          />
          {/* Floating Available pill */}
          <div style={{
            position: "absolute", top: 18, right: 0,
            background: "#fff",
            color: "var(--text)",
            padding: "8px 14px", borderRadius: 999,
            fontSize: 11, fontWeight: 600, letterSpacing: "0.06em",
            display: "inline-flex", alignItems: "center", gap: 7,
            boxShadow: "0 8px 24px -8px rgba(0,0,0,0.18)",
            zIndex: 2,
          }}>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#7EB87A", boxShadow: "0 0 8px #7EB87A" }}></span>
            Available now
          </div>
          {/* Name plate floating bottom-left */}
          <div style={{
            position: "absolute", left: -10, bottom: 18,
            background: "var(--ink)", color: "#fff",
            padding: "12px 16px", borderRadius: 14,
            boxShadow: "0 16px 40px -10px rgba(28,22,17,0.45)",
            zIndex: 2,
          }}>
            <div style={{ fontFamily: "var(--font-serif, 'Space Grotesk', serif)", fontSize: 22, lineHeight: 1 }}>
              Samuel Marndi
            </div>
            <div style={{ fontSize: 10, opacity: 0.75, letterSpacing: "0.14em", textTransform: "uppercase", marginTop: 4 }}>
              IT Consultant · 11+ years
            </div>
          </div>
          {/* Floating skill tags — all 7 service surfaces */}
          <div style={{
            position: "absolute", top: "18%", left: -42,
            background: "#fff", color: "var(--copper)",
            padding: "7px 12px", borderRadius: 10,
            fontSize: 11, fontWeight: 700, letterSpacing: "0.04em",
            boxShadow: "0 8px 20px -6px rgba(0,0,0,0.18)",
            transform: "rotate(-7deg)", zIndex: 2,
          }}>CCTV · Networking</div>
          <div style={{
            position: "absolute", top: "34%", right: -34,
            background: "#fff", color: "var(--copper)",
            padding: "7px 12px", borderRadius: 10,
            fontSize: 11, fontWeight: 700, letterSpacing: "0.04em",
            boxShadow: "0 8px 20px -6px rgba(0,0,0,0.18)",
            transform: "rotate(6deg)", zIndex: 2,
          }}>AI · Cloud · IoT</div>
          <div style={{
            position: "absolute", top: "52%", left: -50,
            background: "#fff", color: "var(--copper)",
            padding: "7px 12px", borderRadius: 10,
            fontSize: 11, fontWeight: 700, letterSpacing: "0.04em",
            boxShadow: "0 8px 20px -6px rgba(0,0,0,0.18)",
            transform: "rotate(-5deg)", zIndex: 2,
          }}>Websites &amp; Apps</div>
          <div style={{
            position: "absolute", top: "70%", right: -38,
            background: "#fff", color: "var(--copper)",
            padding: "7px 12px", borderRadius: 10,
            fontSize: 11, fontWeight: 700, letterSpacing: "0.04em",
            boxShadow: "0 8px 20px -6px rgba(0,0,0,0.18)",
            transform: "rotate(4deg)", zIndex: 2,
          }}>IT Support · AMC</div>
        </div>

        {/* RIGHT: Embedded JARVIS chatbot */}
        <div style={{
          height: 600,
          borderRadius: 22,
          overflow: "hidden",
          boxShadow: "var(--shadow-lg)",
          border: "1px solid var(--line)",
          background: "var(--surface)",
          position: "relative"
        }}>
          <div style={{
            position: "absolute", top: -10, right: -10,
            background: "var(--copper)", color: "#fff",
            padding: "6px 12px", borderRadius: 999,
            fontSize: 11, fontWeight: 600,
            textTransform: "uppercase", letterSpacing: "0.1em",
            zIndex: 5, boxShadow: "var(--shadow-md)"
          }}>Try me — really</div>
          <ChatBot embedded={true} />
        </div>
      </div>

      <style>{`
        @media (max-width: 1100px) {
          .hero-3col { grid-template-columns: 1fr 1fr !important; }
          .hero-3col > :nth-child(3) { grid-column: 1 / -1; height: 480px !important; }
        }
        @media (max-width: 720px) {
          .hero-3col { grid-template-columns: 1fr !important; gap: 24px !important; }
          .hero-3col > :nth-child(2) { max-height: 480px !important; }
          .hero-3col > :nth-child(3) { height: 520px !important; }
        }
      `}</style>
    </section>
  );
}

function HeroFounder({ headline }) {
  const lines = HEADLINES[headline] || HEADLINES.main;
  return (
    <section className="hero paper-bg" style={{ padding: "var(--space-xl) 0", position: "relative", overflow: "hidden" }}>
      <DecorativeMarks />
      <div className="container" style={{
        display: "grid",
        gridTemplateColumns: "1.2fr 1fr",
        gap: 56,
        alignItems: "center",
        minHeight: 580,
        position: "relative", zIndex: 2,
      }} className="founder-grid">
        <div>
          <div className="eyebrow" style={{ marginBottom: 22 }}>One consultant · sales, install, support</div>
          <h1 style={{ fontSize: "var(--fs-hero)", marginBottom: 22, lineHeight: 0.98 }}>
            {lines.map((line, i) => (
              <span key={i} style={{ display: "block", color: i === lines.length - 1 ? "var(--copper)" : "var(--text)", fontStyle: i === lines.length - 1 ? "italic" : "normal" }}>{line}</span>
            ))}
          </h1>
          <p style={{ fontSize: 17, color: "var(--text-soft)", maxWidth: 540, lineHeight: 1.55, marginBottom: 28 }}>
            I'm <strong style={{ color: "var(--text)" }}>Samuel Marndi</strong> — and I personally show up for every engagement. From the cables in your wall to the AI in your product. One number. One invoice.
          </p>
          <div style={{ display: "flex", gap: 12, marginBottom: 32, flexWrap: "wrap" }}>
            <a href={"/contact"} className="btn btn-primary btn-lg">Get a quote <Icons.arrow size={16} /></a>
            <button onClick={() => window.openChat?.()} className="btn btn-ghost btn-lg">
              <Icons.sparkles size={16} /> Scope my project
            </button>
          </div>
          <div style={{ display: "flex", gap: 28, paddingTop: 22, borderTop: "1px solid var(--line)", flexWrap: "wrap" }}>
            <MicroStat num="60s" label="First response SLA" />
            <MicroStat num="11" label="Practice areas" />
            <MicroStat num="100%" label="Personally delivered" />
          </div>
        </div>
        <div className="founder-photo-wrap">
          <div className="founder-photo-frame">
            <div className="founder-photo-bg"></div>
            <img src="/assets/samuel.png" alt="Samuel Marndi · IT Consultant" className="founder-photo" />
            <div className="founder-photo-card">
              <div className="founder-photo-card-name">Samuel Marndi</div>
              <div className="founder-photo-card-sub">Founder · IT Consultant</div>
              <div className="founder-photo-card-loc">
                <span className="founder-loc-dot"></span> Available · Bangalore, India
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroCapability({ headline }) {
  const lines = HEADLINES[headline] || HEADLINES.main;
  return (
    <section className="hero paper-bg" style={{ padding: "var(--space-xl) 0 var(--space-2xl)", position: "relative", overflow: "hidden" }}>
      <DecorativeMarks />
      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ maxWidth: 880, marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>Eleven practice areas · One consultant</div>
          <h1 style={{ fontSize: "var(--fs-hero)", marginBottom: 24, lineHeight: 0.96 }}>
            {lines.map((line, i) => (
              <span key={i} style={{ display: "inline", color: i === lines.length - 1 ? "var(--copper)" : "var(--text)", fontStyle: i === lines.length - 1 ? "italic" : "normal" }}>{line}{i < lines.length - 1 ? " " : ""}</span>
            ))}
          </h1>
          <p style={{ fontSize: 19, color: "var(--text-soft)", maxWidth: 640, lineHeight: 1.5, marginBottom: 28 }}>
            From the cables in your wall to the AI on your screen. Hover any tile to see how I deliver it.
          </p>
          <div style={{ display: "flex", gap: 12 }}>
            <a href={"/contact"} className="btn btn-primary btn-lg">Get a quote <Icons.arrow size={16} /></a>
            <button onClick={() => window.openChat?.()} className="btn btn-ghost btn-lg"><Icons.sparkles size={16} /> Talk to AI</button>
          </div>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
          gap: 12
        }}>
          {SERVICES.map((s, i) => {
            const I = Icons[s.icon];
            return (
              <a key={s.id} href={B(s.href)} style={{
                padding: 20,
                background: "var(--surface)",
                border: "1px solid var(--line)",
                borderRadius: 16,
                display: "flex", flexDirection: "column", gap: 12,
                transition: "all 0.2s ease",
                minHeight: 130
              }} className="cap-tile">
                <div style={{ width: 36, height: 36, borderRadius: 8, background: "var(--bg-2)", display: "grid", placeItems: "center", color: "var(--copper)" }}>
                  <I size={20} />
                </div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: "var(--text)", marginBottom: 2 }}>{s.name}</div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-mute)" }}>from {s.from} · {s.typical}</div>
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function HeroSplit({ headline }) {
  const lines = HEADLINES[headline] || HEADLINES.main;
  return (
    <section className="hero" style={{ padding: 0, position: "relative", minHeight: 640, display: "grid", gridTemplateColumns: "1.1fr 1fr" }}>
      <div style={{ padding: "var(--space-2xl) var(--gutter)", background: "var(--bg)", display: "flex", flexDirection: "column", justifyContent: "center" }}>
        <div className="eyebrow" style={{ marginBottom: 24 }}>One consultant · every IT need</div>
        <h1 style={{ fontSize: "var(--fs-hero)", marginBottom: 24, lineHeight: 0.96, maxWidth: 680 }}>
          {lines.map((line, i) => (
            <span key={i} style={{ display: "block", color: i === lines.length - 1 ? "var(--copper)" : "var(--text)", fontStyle: i === lines.length - 1 ? "italic" : "normal" }}>{line}</span>
          ))}
        </h1>
        <p style={{ fontSize: 19, color: "var(--text-soft)", maxWidth: 540, lineHeight: 1.5, marginBottom: 32 }}>
          I'm Samuel. Eleven practice areas. One accountable person. One invoice.
        </p>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <a href={"/contact"} className="btn btn-primary btn-lg">Get a quote <Icons.arrow size={16} /></a>
          <button onClick={() => window.openChat?.()} className="btn btn-ghost btn-lg"><Icons.sparkles size={16} /> Talk to AI</button>
        </div>
      </div>
      <div style={{ background: "var(--ink)", padding: "var(--space-2xl) var(--gutter)", display: "flex", flexDirection: "column", justifyContent: "center", color: "var(--cream)", position: "relative", overflow: "hidden" }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--copper-bright)", marginBottom: 24 }}>What's in scope</div>
        <div style={{ display: "grid", gap: 10, maxWidth: 480 }}>
          {SERVICES.slice(0, 8).map((s, i) => (
            <div key={s.id} style={{ display: "flex", alignItems: "center", gap: 14, paddingBottom: 10, borderBottom: "1px solid #2D2620" }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--copper-bright)", width: 28 }}>{String(i + 1).padStart(2, "0")}</span>
              <span style={{ flex: 1, fontSize: 15, fontFamily: "var(--font-display)" }}>{s.name}</span>
              <Icons.arrow size={14} style={{ color: "var(--copper-bright)" }} />
            </div>
          ))}
          <div style={{ fontSize: 13, color: "#8E8170", paddingTop: 6 }}>+ 3 more · click any service in the nav</div>
        </div>
      </div>
    </section>
  );
}

// Decorative marks — subtle copper scribbles on cream
function DecorativeMarks() {
  return (
    <>
      <svg className="scribble" style={{ top: "8%", right: "4%", width: 180, opacity: 0.35 }}
        viewBox="0 0 200 200" fill="none">
        <circle cx="100" cy="100" r="80" stroke="var(--copper)" strokeWidth="0.5" strokeDasharray="3 4" />
        <circle cx="100" cy="100" r="50" stroke="var(--copper)" strokeWidth="0.5" />
        <circle cx="100" cy="100" r="20" stroke="var(--copper)" strokeWidth="0.5" />
      </svg>
      <svg className="scribble" style={{ bottom: "10%", left: "2%", width: 240, opacity: 0.25 }}
        viewBox="0 0 300 300" fill="none">
        <path d="M10,150 Q75,50 150,150 T290,150" stroke="var(--copper)" strokeWidth="0.8" fill="none" />
        <path d="M10,170 Q75,70 150,170 T290,170" stroke="var(--copper)" strokeWidth="0.6" fill="none" />
      </svg>
    </>
  );
}

function MicroStat({ num, label }) {
  return (
    <div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 36, lineHeight: 1, color: "var(--text)" }}>
        {num}
      </div>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-mute)", letterSpacing: "0.06em", marginTop: 6, textTransform: "uppercase" }}>
        {label}
      </div>
    </div>
  );
}

function Hero({ variant, headline }) {
  if (variant === "founder") return <HeroFounder headline={headline} />;
  if (variant === "capability") return <HeroCapability headline={headline} />;
  if (variant === "split") return <HeroSplit headline={headline} />;
  return <HeroChatbot headline={headline} />;
}

window.Hero = Hero;