/* global React, Logo, Icon, Button, Eyebrow, BrassRule, getHours */

function Hero({ onOrder }) {
  return (
    <section id="top" style={{ position: "relative", background: "var(--tf-charcoal)", overflow: "hidden", color: "var(--tf-cream)" }}>
      {/* Photographic placeholder — warm tandoor glow */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(60% 50% at 70% 35%, rgba(217,136,7,0.55) 0%, rgba(168,49,30,0.35) 30%, rgba(26,23,20,0) 70%), radial-gradient(50% 40% at 25% 80%, rgba(168,49,30,0.4) 0%, rgba(26,23,20,0) 70%), linear-gradient(180deg, #1a1714 0%, #25201b 60%, #1a1714 100%)"
      }} />
      {/* Faint jaali pattern */}
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, backgroundImage: "url(assets/jaali-quatrefoil.svg)", backgroundSize: "180px 180px", opacity: 0.04, mixBlendMode: "screen" }} />
      {/* Vignette */}
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "radial-gradient(120% 80% at 50% 30%, rgba(26,23,20,0) 50%, rgba(26,23,20,0.85) 100%)" }} />

      {/* Content */}
      <div style={{ position: "relative", maxWidth: 1100, margin: "0 auto", padding: "56px 22px 68px", textAlign: "center" }}>
        {/* Logo medallion w/ subtle glow */}
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 22, position: "relative" }}>
          <div style={{ position: "absolute", width: 320, height: 320, borderRadius: "50%", background: "radial-gradient(circle, rgba(217,136,7,0.35) 0%, transparent 65%)", filter: "blur(20px)" }} />
          <img src="assets/logo-medallion.png" alt="Tandoori Flames" style={{ position: "relative", height: 260, width: "auto", filter: "drop-shadow(0 8px 32px rgba(0,0,0,0.6))" }} />
        </div>

        {/* Script tagline (Allura → Pinyon Script substitution) */}
        <div style={{ color: "var(--tf-brass-300)", lineHeight: 1, marginBottom: 12, fontFamily: "Inter", fontSize: "25px" }}>
          Crafted with love &amp; tradition.
        </div>

        {/* Display line */}
        <h1 style={{ fontFamily: "var(--tf-font-display)", fontWeight: 500, fontSize: "clamp(30px, 5.4vw, 56px)", lineHeight: 1.1, letterSpacing: "-0.01em", textWrap: "balance", margin: "0 auto", maxWidth: 720, color: "#fff" }}>Authentic Indian Cuisine in Southern Oregon.

        </h1>

        {/* Brass divider w/ ornament */}
        <div style={{ maxWidth: 280, margin: "26px auto 0" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{ flex: 1, height: 1, background: "linear-gradient(90deg,transparent,var(--tf-brass-400) 60%,transparent)" }} />
            <img src="assets/jaali-quatrefoil.svg" alt="" style={{ height: 22, opacity: 0.85 }} />
            <div style={{ flex: 1, height: 1, background: "linear-gradient(90deg,transparent,var(--tf-brass-400) 40%,transparent)" }} />
          </div>
        </div>

        {/* CTAs */}
        <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 28, flexWrap: "wrap" }}>
          <Button variant="primary" size="lg" onClick={onOrder}>Order Now <Icon.Arrow /></Button>
          <Button variant="outline" size="lg" href="#menu">View Menu</Button>
        </div>

        {/* Open-status pill */}
        <div style={{ marginTop: 28, display: "inline-flex", alignItems: "center", gap: 10, padding: "8px 16px", borderRadius: 999, background: "rgba(26,23,20,0.55)", border: "1px solid rgba(168,127,36,0.4)" }}>
          <span style={{ width: 8, height: 8, borderRadius: 999, background: "#7ec268", boxShadow: "0 0 0 4px rgba(126,194,104,0.18)" }} />
          <span style={{ fontSize: 13, color: "var(--tf-cream)", letterSpacing: "0.02em" }}>Open everyday · 11am – 10pm</span>
        </div>
      </div>

      {/* Bottom protect gradient meeting the info bar */}
      <div aria-hidden="true" style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: 80, background: "linear-gradient(180deg, rgba(26,23,20,0) 0%, var(--tf-charcoal) 100%)" }} />
    </section>);

}

function QuickInfoBar() {
  const { grouped, today } = getHours();
  return (
    <section style={{ background: "var(--tf-charcoal)", padding: "0 0 32px", color: "var(--tf-cream)" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto", padding: "0 22px" }}>
        <div className="tf-info-grid" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 1, background: "rgba(168,127,36,0.4)", borderRadius: 14, overflow: "hidden", border: "1px solid rgba(168,127,36,0.4)" }}>
          {/* HOURS */}
          <div style={{ background: "rgba(26,23,20,0.85)", padding: "22px 22px" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--tf-brass-300)" }}>
              <Icon.Clock />
              <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase" }}>Hours</span>
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: "12px 0 0", fontSize: 14, lineHeight: 1.7, color: "var(--tf-ink-100)" }}>
              {grouped.map((g) => {
                const isToday = g.dayKeys.includes(today);
                return (
                  <li key={g.range} style={{ display: "flex", justifyContent: "space-between", padding: "2px 0", color: isToday ? "#fff" : "var(--tf-ink-100)", fontWeight: isToday ? 600 : 400 }}>
                    <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                      {isToday && <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: 999, background: "var(--tf-saffron-500)" }} />}
                      {g.range}{isToday && <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.12em", color: "var(--tf-saffron-300)", marginLeft: 4 }}>· TODAY</span>}
                    </span>
                    <span>{g.line}</span>
                  </li>);

              })}
            </ul>
          </div>

          {/* ADDRESS */}
          <a href="https://maps.google.com/?q=210+Peninger+Rd+Central+Point+OR+97502" target="_blank" rel="noopener" style={{ background: "rgba(26,23,20,0.85)", padding: "22px 22px", display: "block" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--tf-brass-300)" }}>
              <Icon.Pin />
              <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase" }}>Address</span>
            </div>
            <div style={{ marginTop: 12, fontFamily: "var(--tf-font-display)", fontSize: 22, fontWeight: 500, color: "#fff", lineHeight: 1.2 }}>210 Peninger Rd</div>
            <div style={{ fontSize: 14, color: "var(--tf-ink-100)", marginTop: 2 }}>Central Point, OR 97502</div>
            <div style={{ fontSize: 12, color: "var(--tf-brass-300)", marginTop: 10, display: "inline-flex", alignItems: "center", gap: 6 }}>Open in Maps <Icon.Arrow /></div>
          </a>

          {/* PHONE */}
          <a href="tel:+15414235109" style={{ background: "rgba(26,23,20,0.85)", padding: "22px 22px", display: "block" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--tf-brass-300)" }}>
              <Icon.Phone />
              <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase" }}>Phone</span>
            </div>
            <div style={{ marginTop: 12, fontFamily: "var(--tf-font-display)", fontSize: 22, fontWeight: 500, color: "#fff", lineHeight: 1.2 }}>(541) 423-5109</div>
            <div style={{ fontSize: 14, color: "var(--tf-ink-100)", marginTop: 2 }}>Tap to call · reservations welcome</div>
            <div style={{ fontSize: 12, color: "var(--tf-brass-300)", marginTop: 10, display: "inline-flex", alignItems: "center", gap: 6 }}>Call now <Icon.Arrow /></div>
          </a>
        </div>
      </div>

      <style>{`
        @media (min-width: 760px) {
          .tf-info-grid { grid-template-columns: repeat(3, 1fr) !important; }
        }
      `}</style>
    </section>);

}

window.Hero = Hero;
window.QuickInfoBar = QuickInfoBar;