// ============================================================
//  Noble Design Asia — Middle: Materials, Services, Portfolio
// ============================================================

// ------------- MATERIALS & FURNITURE -------------
function Materials() {
  const items = [
    { t: "High-Grade Teak",  b: "Premium Indonesian teak, sourced directly from certified plantations and finished by hand.",          img: "https://images.unsplash.com/photo-1595428774223-ef52624120d2?w=900&q=85", alt: "Stacked premium teak planks" },
    { t: "Craftsmanship",    b: "Hand-finished joinery and stonework — a tolerance for detail only years on the tools can produce.", img: "https://images.unsplash.com/photo-1556910096-6f5e72db6803?w=900&q=85", alt: "Craftsman working" },
    { t: "Long-Term Value",  b: "Quality materials age beautifully. Our approach ensures your investment appreciates over time.",      img: "https://images.unsplash.com/photo-1615529182904-14819c35db37?w=900&q=85", alt: "Built-in teak shelving" },
  ];
  return (
    <section id="materials" aria-labelledby="mat-h" className="relative bg-paper py-20 md:py-32">
      <div className="max-w-[1400px] mx-auto px-5 md:px-10">
        <div className="grid md:grid-cols-12 gap-8 mb-12 md:mb-16">
          <div className="md:col-span-6">
            <div className="eyebrow text-green flex items-center gap-3">
              <span className="w-6 h-px bg-current" /> <span>02 — Craft</span>
            </div>
            <h2 id="mat-h" className="h-header mt-5">Materials &amp; <span className="italic text-green">Furniture</span></h2>
          </div>
          <p className="md:col-span-5 md:col-start-8 h-sub text-purple/65 self-end">
            Honest materials, considered details, and furniture built to last a lifetime — not a trend cycle.
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-6 md:gap-8">
          {items.map((m, i) => (
            <article key={m.t} className="group">
              <div className="overflow-hidden aspect-[4/5] bg-gold-100 border border-purple/10 shadow-none">
                <img src={m.img} alt={m.alt} loading="lazy" className="w-full h-full object-cover transition-transform duration-[1400ms] ease-out group-hover:scale-[1.04]" />
              </div>
              <div className="mt-5 flex items-baseline gap-4">
                <span className="eyebrow text-green">0{i + 1}</span>
                <h3 className="text-[20px] md:text-[22px] font-[500] text-purple">{m.t}</h3>
              </div>
              <p className="h-body text-purple/65 mt-3 max-w-[42ch]">{m.b}</p>
            </article>
          ))}
        </div>

        <div className="mt-14 md:mt-20">
          <WhatsAppBar variant="dark" eyebrow="Material Questions?" title="Want to see our teak samples or discuss finishes?" message="Hi Noble Asia, I'd like to know more about your materials." />
        </div>
      </div>
    </section>
  );
}

// ------------- DESIGN SERVICES -------------
function Services() {
  const list = [
    { t: "Interior Design Concept",       Icon: IconPencil,  color: "bg-sg-light", fg: "text-green" },
    { t: "Turn-Key Renovation & Fit-Out", Icon: IconHammer,  color: "bg-so-light", fg: "text-so-dark" },
    { t: "Custom Furniture Sourcing",     Icon: IconChair,   color: "bg-sy-light", fg: "text-sy-dark" },
    { t: "Office Layout & Planning",      Icon: IconLayout,  color: "bg-sb-light", fg: "text-sb-dark" },
    { t: "Material Procurement",          Icon: IconTruck,   color: "bg-sr-light", fg: "text-sr-dark" },
    { t: "Final Styling & Handover",      Icon: IconSparkle, color: "bg-gold-100", fg: "text-gold-600" },
  ];
  return (
    <section id="services" aria-labelledby="svc-h" className="relative bg-green text-paper py-20 md:py-32 overflow-hidden grain shadow-none">
      <div className="max-w-[1400px] mx-auto px-5 md:px-10 relative">
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-12 md:mb-16">
          <div>
            <div className="eyebrow text-gold flex items-center gap-3">
              <span className="w-6 h-px bg-current" /> <span>03 — Services</span>
            </div>
            <h2 id="svc-h" className="h-header mt-5">Design Services <span className="italic text-gold">Overview</span></h2>
          </div>
          <p className="h-sub text-paper/70 max-w-sm">Take what you need — or hand us the whole project.</p>
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 border-t border-l border-paper/15 shadow-none">
          {list.map((s, i) => (
            <article key={s.t} className="border-r border-b border-paper/15 p-6 md:p-8 flex items-start gap-5 hover:bg-paper/5 transition-colors group shadow-none">
              <div className={`${s.color} ${s.fg} w-12 h-12 flex items-center justify-center shrink-0 rounded-none`}>
                <s.Icon width="22" height="22" />
              </div>
              <div className="flex-1">
                <div className="eyebrow text-paper/45">0{i + 1}</div>
                <h3 className="text-[17px] md:text-[19px] font-[500] mt-2 text-paper leading-tight">{s.t}</h3>
              </div>
              <IconArrowUR className="text-paper/40 group-hover:text-gold transition-colors mt-1" />
            </article>
          ))}
        </div>

        <div className="mt-14 md:mt-20">
          <WhatsAppBar variant="light" eyebrow="Not sure which service?" title="Tell us your scope — we'll recommend the right package." message="Hi Noble Asia, I'd like help choosing the right design service." />
        </div>
      </div>
    </section>
  );
}

// ------------- PORTFOLIO -------------
const PROJECTS = [
  { id: 1, t: "Eksekutif Menteng",           loc: "Jakarta", type: "Private Residence", img: "https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=1600&q=85" },
  { id: 2, t: "Monte Verde",                 loc: "Jakarta", type: "Penthouse",         img: "https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?w=1200&q=85" },
  { id: 3, t: "Kempinski Private",           loc: "Jakarta", type: "Turn-Key",          img: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=1200&q=85" },
  { id: 4, t: "Sudirman Sky",                loc: "Jakarta", type: "Turn-Key",          img: "https://images.unsplash.com/photo-1600566753376-12c8ab7fb75b?w=1200&q=85" },
  { id: 5, t: "Cipete Family Home",          loc: "Jakarta", type: "Fit-Out",           img: "https://images.unsplash.com/photo-1615529182904-14819c35db37?w=1200&q=85" },
  { id: 6, t: "Ubud Hillside Villa",         loc: "Bali",    type: "Villa",             img: "https://images.unsplash.com/photo-1618219740975-d40978bb7378?w=1200&q=85" },
];

function Portfolio() {
  const [offset, setOffset] = React.useState(0);
  const maxOffset = Math.max(0, PROJECTS.length - 3);
  const prev = () => setOffset(o => Math.max(0, o - 1));
  const next = () => setOffset(o => Math.min(maxOffset, o + 1));

  const visible = PROJECTS.slice(offset, offset + 3);
  const [hero, ...smalls] = visible;

  return (
    <section id="portfolio" aria-labelledby="proj-h" className="relative bg-gold-100 py-20 md:py-32 shadow-none">
      <div className="max-w-[1400px] mx-auto px-5 md:px-10">
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-10 md:mb-14">
          <div>
            <div className="eyebrow text-green flex items-center gap-3">
              <span className="w-6 h-px bg-current" /> <span>04 — Our Portfolio</span>
            </div>
            <h2 id="proj-h" className="h-header mt-5">Featured <span className="italic text-green">Design Projects</span></h2>
          </div>
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <button onClick={prev} disabled={offset === 0} aria-label="Previous projects" className="w-11 h-11 rounded-none border border-purple/20 text-purple flex items-center justify-center transition disabled:opacity-30 disabled:cursor-not-allowed hover:border-green hover:text-green rotate-180 shadow-none"><IconArrow width="16" height="16" /></button>
              <button onClick={next} disabled={offset >= maxOffset} aria-label="Next projects" className="w-11 h-11 rounded-none border border-purple/20 text-purple flex items-center justify-center transition disabled:opacity-30 disabled:cursor-not-allowed hover:border-green hover:text-green shadow-none"><IconArrow width="16" height="16" /></button>
            </div>
          </div>
        </div>

        <div className="grid md:grid-cols-12 gap-5 md:gap-6">
          <article className="md:col-span-7">
            <ProjectCard p={hero} big />
          </article>
          <div className="md:col-span-5 grid gap-5 md:gap-6">
            {smalls.map(p => <article key={p.id}><ProjectCard p={p} /></article>)}
          </div>
        </div>

        <div className="mt-14 md:mt-20">
          <WhatsAppBar variant="gold" eyebrow="Like what you see?" title="Get a free quote for your home or office — no commitment." message="Hi Noble Asia, I'd like a quote for my project." />
        </div>
      </div>
    </section>
  );
}

function ProjectCard({ p, big }) {
  return (
    <a href="#" aria-label={`Project: ${p.t}, ${p.loc}`} className="group relative overflow-hidden block bg-gold-300/30 border border-purple/10 shadow-none">
      <div className={`overflow-hidden ${big ? 'aspect-[5/4] md:aspect-[6/5]' : 'aspect-[5/4]'}`}>
        <img src={p.img} alt={`Interior of ${p.t}`} loading="lazy" className="w-full h-full object-cover transition-transform duration-[1400ms] ease-out group-hover:scale-[1.04]" />
      </div>
      <div className="absolute inset-0 bg-purple/0 group-hover:bg-purple/15 transition-all duration-500 pointer-events-none" />
      <div className="absolute top-4 left-4">
        <div className="eyebrow bg-paper/95 border border-purple/10 text-purple px-3 py-1.5 shadow-none">{p.loc}</div>
      </div>
      {big ? (
        <div className="p-5 md:p-6 bg-paper/5 backdrop-blur-sm border-t border-purple/10">
          <div className="eyebrow text-purple/70">{p.type}</div>
          <h3 className="text-[22px] md:text-[26px] font-[500] mt-2 text-purple">{p.t}</h3>
        </div>
      ) : (
        <div className="absolute left-0 right-0 bottom-0 p-4 md:p-5">
          <h3 className="text-[16px] md:text-[18px] font-[500] text-purple bg-paper/95 border border-purple/10 inline-block px-3 py-1.5 shadow-none">
            {p.t}
          </h3>
        </div>
      )}
    </a>
  );
}

Object.assign(window, { Materials, Services, Portfolio, ProjectCard, PROJECTS });