// Section components — Hero, About, Why, What, Categories, Contact
const { useState, useEffect, useRef } = React;

// ========== HERO ==========
function Hero({ palette, variant = "collage", brand }) {
  const P = palette;
  return (
    <section id="top" className="tiu-hero" style={{ background: P.cream }}>
      <img src="brand/tiu-mark.png" alt="TIU" style={{ position: 'absolute', top: 24, right: 32, width: 'clamp(160px, 20vw, 280px)', height: 'auto', zIndex: 3, opacity: 0.92, animation: 'tiu-float 5s ease-in-out infinite' }} />
      <div className="tiu-container">
        <div className="tiu-hero-inner">
          <h1 className="tiu-hero-title">
            <span>Beautiful </span>
            <br />
            <span className="script" style={{ color: '#D95E00' }}>beginnings,</span>
            <br />
            <span>delivered with </span>
            <br />
            <span className="tiu-inline-chip" style={{ background: P.blush }}>
              unlimited
              <Sparkle s={22} style={{ position: "absolute", right: -16, top: -18, color: brand.orange }} />
            </span>
            <span> love </span>
            <br />
            <span className="script" style={{ color: brand.blueD }}> &amp;</span>
            <span>care.</span>
          </h1>

          <p className="tiu-hero-sub">
            Toddlers Items Unlimited OPC is a Philippine distributor of trusted international baby brands;
            Curated for safety, comfort, and joy at every stage of your little one's beginning.
          </p>

          <div className="tiu-cta-row">
            <a href="#brands" className="tiu-btn tiu-btn-primary" style={{ background: brand.black, color: "#fff" }}>
              Explore our brands
              <span aria-hidden>→</span>
            </a>
            <a href="#categories" className="tiu-btn tiu-btn-ghost">View categories</a>
            <a href="#contact" className="tiu-btn tiu-btn-ghost">Partner with us</a>
          </div>

{variant === "photo" && (
            <div className="tiu-hero-photo" aria-hidden="true">
              <PlaceholderPhoto label="family portrait — replace with brand photo" tint={P.sky} big />
              <SparkleCluster s={72} className="tiu-sparkle-1" style={{ color: brand.magenta, top: 20, right: 30 }} />
            </div>
          )}

          {variant === "type" && (
            <div className="tiu-hero-type" aria-hidden="true">
              <div className="tiu-blob blob-a" style={{ background: P.blush }} />
              <div className="tiu-blob blob-b" style={{ background: P.sky }} />
              <div className="tiu-blob blob-c" style={{ background: P.sage }} />
              <div className="tiu-blob blob-d" style={{ background: P.butter }} />
            </div>
          )}
        </div>

        <div className="tiu-hero-marquee">
          <div className="tiu-marquee-track">
            {Array.from({ length: 2 }).map((_, i) => (
              <div key={i} className="tiu-marquee-row">
                <span className="script" style={{ color: brand.blueD }}>distributing care</span>
                <Sparkle s={22} style={{ color: brand.orange }} />
                <span className="script" style={{ color: brand.magenta }}>delivering love</span>
                <HeartDoodle s={22} style={{ color: brand.magenta }} />
                <span className="script" style={{ color: brand.green }}>made for tiny humans</span>
                <StarDoodle s={22} style={{ color: brand.yellow }} />
                <span className="script" style={{ color: brand.purpleD }}>trusted by families</span>
                <PetalDoodle s={22} style={{ color: brand.orange }} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function PlaceholderPhoto({ label, tint, big }) {
  return (
    <div style={{
      position: "absolute", inset: 0, overflow: "hidden",
      borderRadius: "inherit",
    }}>
      <svg width="100%" height="100%" viewBox="0 0 200 200" preserveAspectRatio="none">
        <defs>
          <pattern id={`stripe-${label.replace(/\W/g,"")}`} patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(45)">
            <rect width="10" height="10" fill={tint} />
            <line x1="0" y1="0" x2="0" y2="10" stroke="rgba(255,255,255,0.35)" strokeWidth="4" />
          </pattern>
        </defs>
        <rect width="200" height="200" fill={`url(#stripe-${label.replace(/\W/g,"")})`} />
      </svg>
      <div style={{
        position: "absolute", inset: 0,
        display: "flex", alignItems: "flex-end", justifyContent: "center",
        padding: 10,
      }}>
        <span style={{
          fontFamily: "'Poppins', sans-serif",
          fontSize: big ? 11 : 9,
          letterSpacing: "0.12em",
          textTransform: "uppercase",
          background: "rgba(255,255,255,0.85)",
          padding: "3px 8px",
          borderRadius: 999,
          color: "#2B2A3E",
        }}>{label}</span>
      </div>
    </div>
  );
}

// ========== ABOUT ==========
function About({ palette, brand, data }) {
  return (
    <section id="about" className="tiu-section" style={{ background: palette.cream }}>
      <div className="tiu-container">
        <SectionLabel text="About us" color={brand.magenta} className="reveal-left" />
        <div className="tiu-about-grid">
          <div>
            <h2 className="tiu-h2 reveal">
              A <span className="script" style={{ color: '#D95E00' }}>purpose-driven</span> partner for Philippine families and the brands that serve them.
            </h2>
          </div>
          <div className="tiu-about-body reveal">
            <p>
              We are a premium distributor of baby and infant products, dedicated to shaping beautiful beginnings
              by connecting families with trusted, high-quality premium brands.
            </p>
            <div className="tiu-vm">
              <div className="tiu-vm-card reveal-scale" style={{ background: palette.sky }}>
                <MoonDoodle s={34} style={{ color: brand.blueD }} />
                <h4>Our vision</h4>
                <p>To become a trusted leader in baby product distribution, shaping beautiful beginnings and creating a world where every baby grows in comfort, safety, and love.</p>
              </div>
              <div className="tiu-vm-card reveal" style={{ background: palette.blush }}>
                <HeartDoodle s={34} style={{ color: brand.magenta }} />
                <h4>Our mission</h4>
                <p>To curate and distribute a portfolio of premium baby products with exceptional care, purpose, and integrity.</p>
              </div>
            </div>
          </div>
        </div>

        <div className="tiu-values">
          {data.values.map((v, i) => (
            <div key={v.title} className="tiu-value-card reveal">
              <span className="tiu-value-num" style={{ color: brand.orange }}>0{i + 1}</span>
              <h5>{v.title}</h5>
              <p>{v.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ========== WHY ==========
function Why({ palette, brand }) {
  const P = palette;
  return (
    <section id="why" className="tiu-section tiu-why" style={{ background: P.ink, color: P.cream }}>
      <div className="tiu-container">
        <SectionLabel text="Why we do what we do" color={P.blush} dark className="reveal-left" />
        <h2 className="tiu-h2 reveal" style={{ color: P.cream, maxWidth: 900 }}>
          Because Filipino families deserve the <span className="script" style={{ color: brand.yellow }}>same world-class </span>
          baby products the world already trusts — without having to fly to get them.
        </h2>

        <div className="tiu-why-grid">
          <div className="tiu-why-card reveal">
            <ArrowLoop w={110} h={40} style={{ color: brand.orange }} />
            <h4>Bring the best here</h4>
            <p>We scout, vet, and bring international baby brands to the Philippines so moms don't have to hunt, hoard, or guess.</p>
          </div>
          <div className="tiu-why-card reveal">
            <ShieldDoodle s={44} style={{ color: brand.cyan }} />
            <h4>Safety is non-negotiable</h4>
            <p>Every brand in our portfolio meets strict safety, quality, and certification standards.</p>
          </div>
          <div className="tiu-why-card reveal">
            <HeartDoodle s={44} style={{ color: brand.magenta }} />
            <h4>More options, more love</h4>
            <p>A bigger, better curated choice means every family finds products that fit their budget, and values.</p>
          </div>
          <div className="tiu-why-card reveal">
            <SparkleCluster s={56} style={{ color: brand.yellow }} />
            <h4>Trust, at every handoff</h4>
            <p>From principal to warehouse to retailer to doorstep, we protect the chain so what you unbox is what the brand promised.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ========== WHAT ==========
function What({ palette, brand, data }) {
  return (
    <section id="what" className="tiu-section" style={{ background: palette.cream }}>
      <div className="tiu-container">
        <SectionLabel text="What we do" color={brand.green} className="reveal-left" />
        <h2 className="tiu-h2 reveal">
          A full-service distribution partner — <span className="script" style={{ color: brand.orange }}>end to end.</span>
        </h2>
        <div className="tiu-what-grid">
          {data.services.map((s) => (
            <div key={s.k} className="tiu-what-card reveal">
              <span className="tiu-what-k">{s.k}</span>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ========== CATEGORIES ==========
function Categories({ palette, brand, data }) {
  const P = palette;
  const palArr = [P.blush, P.sky, P.sage, P.butter];
  const inkArr = [brand.magenta, brand.blueD, brand.green, brand.orange];
  return (
    <section id="categories" className="tiu-section" style={{ background: palette.cream }}>
      <div className="tiu-container">
        <SectionLabel text="Product categories" color={brand.orange} className="reveal-left" />
        <div className="tiu-cat-head">
          <h2 className="tiu-h2 reveal">
            Everything little ones need, <span className="script" style={{ color: brand.magenta }}>thoughtfully sorted.</span>
          </h2>
          <p className="tiu-lede">Each category curated for safety, comfort, and design that actually works for your babies.</p>
        </div>

        <div className="tiu-cat-grid">
          {data.categories.map((c, i) => (
            <a href={`#brands`} key={c.id} className="tiu-cat-card tiu-hit reveal" style={{ background: palArr[i % palArr.length] }}>
              <div className="tiu-cat-icon" style={{ color: inkArr[i % inkArr.length] }}>
                <Glyph name={c.glyph} s={38} />
              </div>
              <h5>{c.name}</h5>
              <p>{c.desc}</p>
              <span className="tiu-cat-arrow" aria-hidden>→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ========== CONTACT ==========
function Contact({ palette, brand, data }) {
  return (
    <section id="contact" className="tiu-section tiu-contact" style={{ background: palette.sky }}>
      <div className="tiu-container">
        <SectionLabel text="Partner with us" color={brand.purpleD} className="reveal-left" />
        <div className="tiu-contact-grid">
          <div className="reveal">
            <h2 className="tiu-h2">
              Let's grow something <span className="script" style={{ color: brand.magenta }}>beautiful</span> together.
            </h2>
            <p className="tiu-lede">Retailer, principal brand, or curious parent, we'd love to hear from you.</p>
            <ul className="tiu-contact-list">
              <li><span>Email</span><a href={`mailto:${data.contact.email}`}>{data.contact.email}</a></li>
              <li><span>Phone</span><a href="tel:+639989883171">{data.contact.phone}</a></li>
              <li><span>Office</span><span>{data.contact.address}</span></li>
              <li><span>Social</span>
                <span className="tiu-socials">
                  {data.contact.socials.map((s) => (<a key={s.label} href={s.href}>{s.label}</a>))}
                </span>
              </li>
            </ul>
          </div>

          <div className="reveal-scale" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
            <img
              src="uploads/pasted-1776688127845-0.png"
              alt="Family enjoying mealtime together"
              style={{ width: "100%", maxWidth: 420, borderRadius: 24, objectFit: "cover", boxShadow: "0 8px 40px rgba(0,0,0,0.12)" }}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

// ========== FOOTER ==========
function Footer({ palette, brand, data }) {
  return (
    <footer id="privacy" className="tiu-footer" style={{ background: brand.black, color: "rgba(255,255,255,0.86)" }}>
      <div className="tiu-container">
        <div className="tiu-footer-grid">
          <div>
            <TIULogo variant="full" width={280} dark />
            <p className="tiu-footer-tag">Distributing care.<br />Delivering love.</p>
          </div>
          <div>
            <h6>Explore</h6>
            <ul><li><a href="#about">About</a></li><li><a href="#categories">Categories</a></li><li><a href="#brands">Brands</a></li><li><a href="#why">Why we do this</a></li></ul>
          </div>
          <div>
            <h6>Reach us</h6>
            <ul><li><a href={`mailto:${data.contact.email}`}>{data.contact.email}</a></li><li>{data.contact.phone}</li><li>{data.contact.address}</li></ul>
          </div>
          <div className="tiu-privacy">
            <h6>Privacy policy</h6>
            <p>We collect only the information necessary to respond to your inquiry — your name, email, and message.
            We do not sell or share your data with third parties. Contact form data is stored securely and used solely for
            partnership communication. For questions regarding your data, email <a href={`mailto:${data.contact.email}`}>{data.contact.email}</a>.</p>
          </div>
        </div>
        <div className="tiu-footer-base">
          <span>© {new Date().getFullYear()} Toddlers Items Unlimited OPC. All rights reserved.</span>
          <span>Manila · Philippines</span>
        </div>
      </div>
    </footer>
  );
}

// ========== NAV ==========
function Nav({ brand, palette, onOpenTweaks }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`tiu-nav ${scrolled ? "is-scrolled" : ""}`}>
      <div className="tiu-container tiu-nav-inner">
        <a href="#top" aria-label="Home" className="tiu-nav-logo">
          <TIULogo variant="full" width={210} />
        </a>
        <div className="tiu-nav-right">
          <nav className="tiu-nav-links">
            <a href="#about">About</a>
            <a href="#why">Why</a>
            <a href="#categories">Categories</a>
            <a href="#brands">Brands</a>
            <a href="#contact">Contact</a>
          </nav>
          <a href="#contact" className="tiu-btn tiu-btn-sm" style={{ background: brand.black, color: "#fff" }}>Partner with us</a>
        </div>
      </div>
    </header>
  );
}

function SectionLabel({ text, color, dark, className = "" }) {
  return (
    <div className={`tiu-section-label ${className}`} style={{ color: dark ? "#fff" : "#2B2A3E" }}>
      <span className="tiu-sl-bar" style={{ background: color }} />
      <span>{text}</span>
    </div>
  );
}

Object.assign(window, { Hero, About, Why, What, Categories, Contact, Footer, Nav, SectionLabel, PlaceholderPhoto });
