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

function About() {
  return (
    <section id="about" style={{ background: "var(--tf-parchment)", padding: "72px 22px" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto", display: "grid", gap: 40, gridTemplateColumns: "1fr", alignItems: "center" }} className="tf-about-grid">
        <div>
          <Eyebrow>Our kitchen</Eyebrow>
          <h2 style={{ fontFamily: "var(--tf-font-display)", fontWeight: 500, fontSize: "clamp(30px, 4.4vw, 44px)", lineHeight: 1.1, letterSpacing: "-0.01em", margin: "10px 0 18px", color: "var(--tf-ink-700)", textWrap: "balance" }}>
            Hand-selected spices. Time-honoured technique.
          </h2>
          <p style={{ fontFamily: "var(--tf-font-prose)", fontSize: 18, lineHeight: 1.7, color: "var(--tf-ink-500)", margin: 0, maxWidth: "52ch", textWrap: "pretty" }}>
            We bring authentic Indian flavours to your table and your door. Every recipe is made from scratch with hand-selected spices and time-honoured techniques — slow-cooked sauces, dum-cooked biryanis, and breads pulled fresh from the clay tandoor at the back of the kitchen.
          </p>
          <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Button variant="outlineDark" href="#menu">See the menu</Button>
            <a href="tel:+15414235109" style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 600, color: "var(--tf-crimson-600)", padding: "13px 0" }}>
              <Icon.Phone /> (541) 423-5109
            </a>
          </div>
        </div>

        {/* Photo placeholder — interior photo */}
        <div style={{ position: "relative" }}>
          <div style={{
            position: "relative",
            aspectRatio: "4 / 5",
            borderRadius: "50% 50% 12px 12px / 22% 22% 12px 12px",
            overflow: "hidden",
            backgroundImage: "url(assets/dining-hall.png)",
            backgroundSize: "cover",
            backgroundPosition: "center",
            border: "2px solid var(--tf-brass-400)",
            boxShadow: "var(--tf-shadow-xl)"
          }}>
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(26,23,20,0) 60%, rgba(26,23,20,0.35) 100%)" }} />
          </div>
          {/* Floating brass caption chip */}
          <div style={{ position: "absolute", left: 20, bottom: 20, padding: "10px 14px", background: "rgba(26,23,20,0.78)", border: "1px solid var(--tf-border-brass)", borderRadius: 999, color: "var(--tf-brass-300)", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 600, backdropFilter: "blur(8px)" }}>
            The dining room
          </div>
        </div>
      </div>
      <style>{`
        @media (min-width: 880px) { .tf-about-grid { grid-template-columns: 1.1fr 0.9fr !important; gap: 64px !important; } }
      `}</style>
    </section>);

}

function Gallery() {
  // 6 photos — asymmetric grid: hero + 5 supporting
  const items = [
  { src: "assets/gallery/tandoor.png", label: "the tandoor", span: { col: "span 2", row: "span 2" }, pos: "center" },
  { src: "assets/gallery/butter-chicken.png", label: "butter chicken", span: { col: "span 1", row: "span 1" }, pos: "center" },
  { src: "assets/gallery/naan-prep.png", label: "naan prep", span: { col: "span 1", row: "span 1" }, pos: "center" },
  { src: "assets/gallery/tandoori-chicken.png", label: "tandoori chicken", span: { col: "span 1", row: "span 1" }, pos: "center" },
  { src: "assets/dining-hall.png", label: "the dining room", span: { col: "span 1", row: "span 1" }, pos: "center" },
  { src: "assets/gallery/bar.png", label: "the bar", span: { col: "span 2", row: "span 1" }, pos: "center 30%" }];

  return (
    <section id="gallery" style={{ background: "var(--tf-cream)", padding: "72px 22px" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 32 }}>
          <Eyebrow>Step inside</Eyebrow>
          <h2 style={{ fontFamily: "var(--tf-font-display)", fontWeight: 500, fontSize: "clamp(30px, 4.4vw, 44px)", lineHeight: 1.1, letterSpacing: "-0.01em", margin: "10px 0 0", color: "var(--tf-ink-700)", textWrap: "balance" }}>
            Step Inside
          </h2>
          <p style={{ fontFamily: "var(--tf-font-prose)", fontSize: 16, color: "var(--tf-fg-muted)", margin: "10px auto 0", maxWidth: 520 }}>
            Lacquered oak, jaali screens, deep-red banquettes — and the tandoor blazing within sight.
          </p>
        </div>

        <div className="tf-gallery-grid" style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gridAutoRows: "140px",
          gap: 10
        }}>
          {items.map((it, i) =>
          <figure key={i} style={{
            gridColumn: it.span.col,
            gridRow: it.span.row,
            borderRadius: 12,
            overflow: "hidden",
            border: "1px solid var(--tf-border)",
            boxShadow: "var(--tf-shadow-sm)",
            margin: 0,
            position: "relative",
            background: "var(--tf-charcoal)"
          }}>
              <img src={it.src} alt={it.label} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: it.pos || "center", display: "block" }} />
              <figcaption style={{ position: "absolute", left: 12, bottom: 10, padding: "4px 10px", background: "rgba(26,23,20,0.55)", backdropFilter: "blur(6px)", borderRadius: 999, fontFamily: "var(--tf-font-script)", fontSize: 16, color: "rgba(255,255,255,0.92)", lineHeight: 1, letterSpacing: "0.01em" }}>{it.label}</figcaption>
            </figure>
          )}
        </div>

        <div style={{ textAlign: "center", marginTop: 32 }}>
          <Button variant="outlineDark" size="lg" href="#gallery">View Full Gallery <Icon.Arrow /></Button>
        </div>
      </div>

      <style>{`
        @media (min-width: 760px) {
          .tf-gallery-grid {
            grid-template-columns: repeat(4, 1fr) !important;
            grid-auto-rows: 180px !important;
            gap: 14px !important;
          }
        }
      `}</style>
    </section>);

}

function Catering() {
  return (
    <section id="catering" style={{ background: "var(--tf-charcoal)", padding: "72px 22px", position: "relative", overflow: "hidden" }}>
      {/* Warm accent glow */}
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "radial-gradient(60% 60% at 80% 50%, rgba(217,136,7,0.25) 0%, transparent 60%), radial-gradient(40% 50% at 10% 30%, rgba(168,49,30,0.25) 0%, transparent 60%)" }} />
      <img src="assets/jaali-quatrefoil.svg" alt="" style={{ position: "absolute", right: -40, bottom: -60, width: 320, opacity: 0.06, filter: "brightness(0) invert(1)" }} />

      <div style={{ position: "relative", maxWidth: 1100, margin: "0 auto", display: "grid", gap: 32, gridTemplateColumns: "1fr", alignItems: "center" }} className="tf-cater-grid">
        <div>
          <Eyebrow tone="gold">Private events &amp; catering</Eyebrow>
          <h2 style={{ fontFamily: "var(--tf-font-display)", fontWeight: 500, fontSize: "clamp(30px, 4.6vw, 48px)", lineHeight: 1.1, letterSpacing: "-0.01em", margin: "12px 0 14px", color: "#fff", textWrap: "balance" }}>
            We Cater Events of All Sizes.
          </h2>
          <p style={{ fontFamily: "var(--tf-font-prose)", fontSize: 17, lineHeight: 1.7, color: "var(--tf-ink-100)", margin: 0, maxWidth: "48ch", textWrap: "pretty" }}>
            From intimate dinners to corporate gatherings of two hundred — full tandoor service, custom menus, and our team on-site. Tell us the date and the headcount and we'll send a quote within a day.
          </p>
        </div>
        <div className="tf-cater-cta" style={{ display: "flex", flexDirection: "column", gap: 12, alignItems: "flex-start" }}>
          <Button variant="primary" size="lg" href="mailto:tandooriflamesor@gmail.com?subject=Catering%20inquiry">Get a Quote <Icon.Arrow /></Button>
          <a href="tel:+15414235109" style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--tf-brass-300)", letterSpacing: "0.04em" }}>
            <Icon.Phone /> Or call (541) 423-5109
          </a>
        </div>
      </div>

      <style>{`
        @media (min-width: 880px) {
          .tf-cater-grid { grid-template-columns: 1.6fr 1fr !important; gap: 56px !important; }
          .tf-cater-cta { align-items: flex-end !important; }
        }
      `}</style>
    </section>);

}

function Footer() {
  const { grouped, today } = getHours();
  return (
    <footer style={{ background: "var(--tf-ink-800)", color: "var(--tf-cream)", padding: "64px 22px 28px" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div className="tf-footer-grid" style={{ display: "grid", gap: 36, gridTemplateColumns: "1fr" }}>
          {/* Logo + tagline */}
          <div>
            <Logo variant="horizontal" height={56} />
            <p style={{ fontFamily: "var(--tf-font-prose)", fontSize: 15, color: "var(--tf-ink-100)", lineHeight: 1.7, margin: "18px 0 0", maxWidth: "36ch" }}>Authentic Indian cuisine in Southern Oregon. Slow-cooked sauces, fresh tandoor breads, and a warm room on the rolling hills of Central Point, OR.

            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 18, alignItems: "center", color: "var(--tf-brass-300)" }}>
              <a href="https://instagram.com/tandoorifilaresrestaurant" target="_blank" rel="noopener" style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--tf-brass-300)", fontSize: 14 }}>
                <Icon.IG /> Facebook - Tandoori Flames
              </a>
            </div>
          </div>

          {/* Visit */}
          <div>
            <Eyebrow tone="gold">Visit</Eyebrow>
            <ul style={{ listStyle: "none", padding: 0, margin: "14px 0 0", fontSize: 14, lineHeight: 1.9, color: "var(--tf-ink-100)" }}>
              <li><a href="https://maps.google.com/?q=210+Peninger+Rd+Central+Point+OR+97502" target="_blank" rel="noopener" style={{ color: "var(--tf-cream)" }}>210 Peninger Rd</a></li>
              <li>Central Point, OR 97502</li>
              <li><a href="tel:+15414235109" style={{ color: "var(--tf-cream)" }}>(541) 423-5109</a></li>
            </ul>
          </div>

          {/* Hours */}
          <div>
            <Eyebrow tone="gold">Hours</Eyebrow>
            <ul style={{ listStyle: "none", padding: 0, margin: "14px 0 0", fontSize: 14, lineHeight: 1.9 }}>
              {grouped.map((g) => {
                const isToday = g.dayKeys.includes(today);
                return (
                  <li key={g.range} style={{ display: "flex", justifyContent: "space-between", color: isToday ? "#fff" : "var(--tf-ink-100)", fontWeight: isToday ? 600 : 400 }}>
                    <span>{g.range}{isToday && <span style={{ marginLeft: 6, fontSize: 10, color: "var(--tf-saffron-300)", letterSpacing: "0.12em" }}>· TODAY</span>}</span>
                    <span style={{ color: "var(--tf-ink-100)" }}>{g.line}</span>
                  </li>);

              })}
            </ul>
          </div>

          {/* Map embed (placeholder static map) */}
          <div>
            <Eyebrow tone="gold">Find us</Eyebrow>
            <div style={{ marginTop: 14, borderRadius: 10, overflow: "hidden", border: "1px solid var(--tf-border-brass)", aspectRatio: "4 / 3", position: "relative", background: "linear-gradient(135deg,#322b24,#1a1714)" }}>
              <iframe
                title="Map to Tandoori Flames"
                src="https://www.google.com/maps?q=210+Peninger+Rd,+Central+Point,+OR+97502&output=embed"
                width="100%"
                height="100%"
                style={{ border: 0, display: "block", filter: "saturate(0.85) brightness(0.92)" }}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade" />
              
              <a href="https://maps.google.com/?q=210+Peninger+Rd+Central+Point+OR+97502" target="_blank" rel="noopener" style={{ position: "absolute", left: 10, bottom: 10, padding: "5px 10px", background: "rgba(26,23,20,0.85)", borderRadius: 999, fontSize: 11, letterSpacing: "0.08em", color: "var(--tf-brass-300)", display: "inline-flex", alignItems: "center", gap: 6 }}>210 Peninger Rd <Icon.Arrow /></a>
            </div>
          </div>
        </div>

        {/* Bottom strip */}
        <div style={{ marginTop: 48, paddingTop: 24, borderTop: "1px solid rgba(168,127,36,0.18)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
          <div style={{ fontSize: 24, color: "var(--tf-brass-400)", lineHeight: 1, fontFamily: "Inter" }}>
            Crafted with love &amp; tradition.
          </div>
          <div style={{ fontSize: 12, color: "var(--tf-ink-200)", letterSpacing: "0.04em" }}>
            © 2026 Tandoori Flames · All rights reserved
          </div>
        </div>
      </div>

      <style>{`
        @media (min-width: 760px) {
          .tf-footer-grid { grid-template-columns: 1.4fr 0.9fr 1fr 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </footer>);

}

window.About = About;
window.Gallery = Gallery;
window.Catering = Catering;
window.SiteFooter = Footer;