// ============================================================
//  Noble Design Asia — Bottom: Testimonials, MidCTA, Contact+Footer
// ============================================================

const TESTIMONIALS = [
  { q: "Flawless execution from start to finish. The team managed everything with such professionalism.", n: "Sarah L.",   c: "Jakarta" },
  { q: "Jerome understood exactly what we needed. The result is timeless and perfectly suits our lifestyle.", n: "Michael T.", c: "Bali" },
  { q: "No stress, no surprises. Just a beautifully finished space delivered exactly as promised.", n: "Diana W.",   c: "Jakarta" },
];

// ------------- TESTIMONIALS (Flat & Clean) -------------
function Testimonials() {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % TESTIMONIALS.length), 7000);
    return () => clearInterval(t);
  }, []);
  const go = (i) => setIdx((i + TESTIMONIALS.length) % TESTIMONIALS.length);

  return (
    <section id="voices" aria-labelledby="test-h" className="relative bg-purple text-paper py-20 md:py-32 overflow-hidden grain">
      <div className="max-w-[1200px] mx-auto px-5 md:px-10">
        <div className="flex items-center justify-between mb-10 md:mb-14">
          <div className="eyebrow text-gold flex items-center gap-3">
            <span className="w-6 h-px bg-current" /> <span id="test-h">07 — Client Voices</span>
          </div>
          <div className="eyebrow text-paper/40">
            {String(idx + 1).padStart(2, '0')} / {String(TESTIMONIALS.length).padStart(2, '0')}
          </div>
        </div>

        {/* Quote Container (Flat design, border tipis, shadow-none) */}
        <div className="relative border border-paper/10 p-8 md:p-12 min-h-[300px] md:min-h-[260px] shadow-none bg-paper/[0.02]">
          {TESTIMONIALS.map((t, i) => (
            <figure key={i}
              className={`absolute inset-0 p-8 md:p-12 flex flex-col justify-center transition-all duration-700 ${i === idx ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 pointer-events-none'}`}>
              <IconQuote className="text-gold mb-4" width="28" height="28" />
              <blockquote className="text-[20px] md:text-[32px] lg:text-[40px] font-[400] leading-[1.3] tracking-tight max-w-[24ch] text-paper mb-8">
                "{t.q}"
              </blockquote>
              <figcaption className="flex items-center gap-3">
                <div aria-hidden="true" className="w-10 h-10 rounded-full border border-paper/20 flex items-center justify-center text-[13px] font-[500] text-gold">
                  {t.n.split(' ').map(w => w[0]).slice(0, 2).join('')}
                </div>
                <div>
                  <div className="text-[14px] md:text-[15px] font-[500]">{t.n}</div>
                  <div className="eyebrow text-paper/50 mt-0.5">{t.c}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>

        {/* Separator / Controls */}
        <div className="mt-8 relative flex items-center gap-4 md:gap-6">
          <div className="flex-1 h-px bg-paper/15 relative overflow-hidden">
            <div key={idx} className="absolute inset-y-0 left-0 bg-gold" style={{ animation: 'tb 7s linear forwards' }} />
          </div>
          <div className="flex items-center gap-2 shrink-0">
            <button onClick={() => go(idx - 1)} aria-label="Previous testimonial"
              className="w-10 h-10 rounded-none border border-paper/20 hover:border-gold hover:text-gold flex items-center justify-center transition rotate-180 shadow-none">
              <IconArrow width="14" height="14" />
            </button>
            <button onClick={() => go(idx + 1)} aria-label="Next testimonial"
              className="w-10 h-10 rounded-none border border-paper/20 hover:border-gold hover:text-gold flex items-center justify-center transition shadow-none">
              <IconArrow width="14" height="14" />
            </button>
          </div>
        </div>

        <div className="mt-14 md:mt-20">
          <WhatsAppBar variant="light" eyebrow="Join our clients" title="Ready to start yours? Chat with our team directly on WhatsApp." message="Hi Noble Asia, I read your client reviews and I'd like to start a project." />
        </div>
      </div>
      <style>{`@keyframes tb { from { width: 0 } to { width: 100% } }`}</style>
    </section>
  );
}

// ------------- MID-CTA -------------
function MidCTA() {
  return (
    <section aria-label="Call to action" className="relative overflow-hidden group cursor-pointer shadow-none">
      <a href={waLink("Hi Noble Asia, I'd like to design my space.")} target="_blank" rel="noopener" className="block relative shadow-none">
        <div className="relative aspect-[16/10] sm:aspect-[16/8] md:aspect-[21/9] lg:aspect-[24/9] min-h-[420px] md:min-h-[520px] overflow-hidden">
          <img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=2400&q=90" alt="Noble Asia interior" className="absolute inset-0 w-full h-full object-cover transition-transform duration-[2000ms] ease-out group-hover:scale-[1.06]" loading="lazy" />
          <div className="absolute inset-0 bg-purple/70 md:bg-purple/55 transition-opacity duration-700 group-hover:bg-purple/35" />
          <div className="absolute inset-0 bg-gradient-to-t from-purple/80 via-purple/0 to-purple/20" />
          <div className="relative z-10 h-full min-h-[420px] md:min-h-[520px] flex items-center">
            <div className="max-w-[1200px] mx-auto w-full px-5 md:px-10 py-16 md:py-24">
              <div className="max-w-3xl">
                <div className="eyebrow text-gold flex items-center gap-3">
                  <span className="w-6 h-px bg-current" /> <span>08 — Let's begin</span>
                </div>
                <h2 className="h-header text-paper mt-5">
                  A space that's <span className="italic text-gold">designed properly</span>, delivered without stress.
                </h2>
                <p className="h-sub text-paper/80 mt-6 max-w-xl">
                  One reply, a short call, and a clear plan. That's how every Noble Asia project starts.
                </p>
                <div className="mt-10 flex flex-wrap items-center gap-x-6 gap-y-4">
                  <span className="inline-flex items-center gap-3 text-paper">
                    <span className="w-11 h-11 rounded-none bg-gold/95 text-purple flex items-center justify-center transition-transform duration-500 group-hover:scale-110">
                      <IconWhatsApp width="20" height="20" />
                    </span>
                    <span className="flex flex-col">
                      <span className="eyebrow text-paper/60">Chat with us on WhatsApp</span>
                      <span className="text-[18px] md:text-[22px] font-[500] text-paper">{WA_DISPLAY}</span>
                    </span>
                  </span>
                  <span className="eyebrow text-gold link-u inline-flex items-center gap-2">
                    Start the conversation <IconArrow width="14" height="14" />
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a>
    </section>
  );
}

// ------------- CONTACT + MINIMAL FOOTER -------------
function ContactAndFooter() {
  const [form, setForm] = React.useState({ fn: "", ln: "", email: "", phone: "", msg: "", ok1: false, ok2: false });
  const [sent, setSent] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (!form.fn || !form.ln || !form.email || !form.ok1) return;
    setSent(true);
    setTimeout(() => setSent(false), 4200);
  };

  const socials = [
    { Icon: IconWhatsApp, label: "WhatsApp" },
    { Icon: IconInstagram, label: "Instagram" },
    { Icon: IconFacebook, label: "Facebook" },
    { Icon: IconYoutube, label: "YouTube" },
    { Icon: IconLinkedin, label: "LinkedIn" },
  ];

  return (
    <section id="contact" aria-labelledby="cta-h" className="relative bg-purple text-paper">
      <div className="border-y border-paper/10 overflow-hidden py-5 md:py-6">
        <div className="marquee-track flex items-center gap-10 md:gap-12 whitespace-nowrap">
          {Array.from({ length: 2 }).flatMap((_, r) =>
            ["Start your design journey", "·", "Jakarta · Bali · Indonesia", "·", "Turn-Key Delivered", "·", "Start your design journey", "·", "Jakarta · Bali · Indonesia", "·", "Turn-Key Delivered", "·"]
              .map((txt, i) => <span key={`${r}-${i}`} className="text-xl md:text-3xl italic text-paper/40 font-[400]">{txt}</span>)
          )}
        </div>
      </div>

      <div className="max-w-[1400px] mx-auto px-5 md:px-10 py-16 md:py-24">
        <div className="grid lg:grid-cols-12 gap-12 lg:gap-16">
          <div className="lg:col-span-5">
            <div className="eyebrow text-gold flex items-center gap-3">
              <span className="w-6 h-px bg-current" /> <span>10 — Contact</span>
            </div>
            <h2 id="cta-h" className="h-header mt-5">Start Your Design <span className="italic text-gold">Journey Today</span></h2>
            <p className="h-sub text-paper/65 mt-5 max-w-md">Tell us about your space. We reply within one business day with a short questionnaire and a proposed consultation time.</p>
            <address className="not-italic mt-10 space-y-5 max-w-md">
              {[
                ["Email", <a href="mailto:connect@nobleasia.id" className="text-gold link-u">connect@nobleasia.id</a>],
                ["Studio", "Karindra Building, Jl. Palmerah Sel. No. 30A, Gelora, Jakarta Pusat 10270"],
                ["Service Areas", "Jakarta · Bali · Indonesia"],
              ].map(([k, v], i) => (
                <div key={i} className="grid grid-cols-[110px_1fr] gap-4 pb-4 border-b border-paper/10">
                  <div className="eyebrow text-paper/40 pt-0.5">{k}</div>
                  <div className="text-[13px] md:text-[14px] leading-[1.6] text-paper/90">{v}</div>
                </div>
              ))}
            </address>
            <div className="mt-8 flex items-center gap-3">
              {socials.map(s => (
                <a key={s.label} href="#" aria-label={`Noble Asia on ${s.label}`} className="w-10 h-10 rounded-none border border-paper/20 flex items-center justify-center text-paper/70 hover:border-gold hover:text-gold transition shadow-none">
                  <s.Icon width="18" height="18" />
                </a>
              ))}
            </div>
          </div>

          <form onSubmit={submit} noValidate className="lg:col-span-6 lg:col-start-7 bg-paper/[0.02] border border-paper/10 shadow-none p-7 md:p-10">
            <div className="mb-7 pb-6 border-b border-paper/10">
              <div className="eyebrow text-gold">Request a Consultation</div>
              <p className="text-[13px] text-paper/55 mt-2">All fields marked * are required.</p>
            </div>
            <div className="grid sm:grid-cols-2 gap-5">
              <Field label="First Name" required value={form.fn} onChange={v => setForm({...form, fn: v})} />
              <Field label="Last Name"  required value={form.ln} onChange={v => setForm({...form, ln: v})} />
              <Field label="Email"      required type="email" value={form.email} onChange={v => setForm({...form, email: v})} />
              <Field label="Phone / WhatsApp" type="tel" placeholder="+62…" value={form.phone} onChange={v => setForm({...form, phone: v})} />
              <div className="sm:col-span-2">
                <Field label="Project Details" as="textarea" rows={4} placeholder="Location, size, scope…" value={form.msg} onChange={v => setForm({...form, msg: v})} />
              </div>
            </div>
            <div className="mt-7 space-y-3 pt-6 border-t border-paper/10">
              <label className="flex items-start gap-3 text-[12.5px] text-paper/80 cursor-pointer leading-relaxed">
                <input type="checkbox" required className="mt-1 accent-gold shrink-0" checked={form.ok1} onChange={e => setForm({...form, ok1: e.target.checked})} />
                <span>I agree to the <a href="#" className="text-gold link-u">Privacy Policy</a>. *</span>
              </label>
            </div>
            <div className="mt-8 flex flex-col sm:flex-row sm:items-center gap-4">
              <button type="submit" className={`btn flex-1 justify-center shadow-none rounded-none ${sent ? 'bg-paper text-purple' : 'btn-primary'}`}>
                {sent ? 'Submitted · Thank you' : 'Submit Request'} <IconArrow width="16" height="16" />
              </button>
              <a href={waLink("Hi Noble Asia, I'd like to discuss a project.")} target="_blank" rel="noopener" className="btn btn-light flex-1 justify-center whitespace-nowrap shadow-none rounded-none">
                <IconWhatsApp width="16" height="16" /> Chat on WhatsApp
              </a>
            </div>
          </form>
        </div>
      </div>

      <footer role="contentinfo" className="border-t border-paper/10">
        <div className="max-w-[1400px] mx-auto px-5 md:px-10 py-8 flex flex-col md:flex-row md:items-center md:justify-between gap-5">
          <div className="eyebrow text-paper/40">© 2026 Noble Asia · All rights reserved</div>
        </div>
      </footer>
    </section>
  );
}

// ------------- FIELD & WHATSAPP BAR -------------
function Field({ label, required, type = "text", as, rows = 3, value, onChange, placeholder }) {
  const common = { value, onChange: e => onChange(e.target.value), placeholder, required, "aria-required": required || undefined, className: "w-full bg-transparent border border-paper/15 px-4 py-3 text-[14px] text-paper placeholder:text-paper/30 focus:border-gold focus:outline-none transition-colors shadow-none rounded-none" };
  return (
    <label className="block">
      <span className="eyebrow text-paper/50 mb-2 block">{label}{required && <span className="text-gold"> *</span>}</span>
      {as === "textarea" ? <textarea {...common} rows={rows} className={common.className + " resize-none"} /> : <input {...common} type={type} />}
    </label>
  );
}

const WA_NUMBER = "6285117728578";
const WA_DISPLAY = "+62 851-1772-8578";
const waLink = (msg) => `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(msg || "Hi Noble Asia, I'd like to discuss an interior design project.")}`;

function WhatsAppBar({ eyebrow = "Quick chat", title, message, variant = "dark" }) {
  const v = {
    dark:  { wrap: "bg-purple text-paper border border-purple shadow-none", sub: "text-paper/60",  btn: "bg-gold hover:bg-paper text-purple rounded-none", eye: "text-gold" },
    light: { wrap: "bg-paper text-purple border border-purple/10 shadow-none", sub: "text-purple/55", btn: "bg-green hover:bg-purple text-paper rounded-none", eye: "text-green" },
    gold:  { wrap: "bg-gold-100 text-purple border border-gold/30 shadow-none", sub: "text-purple/55", btn: "bg-purple hover:bg-green text-paper rounded-none", eye: "text-green" },
  }[variant];
  return (
    <div className={`${v.wrap} p-6 md:p-8 flex flex-col md:flex-row md:items-center gap-5 md:gap-8 rounded-none`}>
      <div className="flex-1 min-w-0">
        <div className={`eyebrow ${v.eye}`}>{eyebrow}</div>
        <p className="text-[17px] md:text-[20px] font-[500] mt-2 leading-snug">{title}</p>
        <p className={`text-[13px] md:text-[14px] mt-1.5 ${v.sub}`}>Reply within minutes · Mon–Sat · {WA_DISPLAY}</p>
      </div>
      <a href={waLink(message)} target="_blank" rel="noopener" className={`${v.btn} inline-flex items-center justify-center gap-2.5 px-6 py-3.5 text-[13px] tracking-[0.12em] uppercase font-[500] whitespace-nowrap transition-colors shrink-0 shadow-none`}>
        <IconWhatsApp width="18" height="18" /> Chat on WhatsApp
      </a>
    </div>
  );
}

Object.assign(window, { Testimonials, MidCTA, ContactAndFooter, Field, WhatsAppBar, WA_NUMBER, WA_DISPLAY, waLink });