// Landing page

const { useEffect, useState, useRef } = React;

function Hero() {
  const c = window.NAVAN_DATA.company;
  return (
    <section style={{ padding: "80px 0 100px", position: "relative" }}>
      <div className="wrap">
        <Reveal delay={0}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 48, gap: 40, flexWrap: "wrap" }}>
            <div className="eyebrow">PT. Navan Makmur Eksportindo · Est. 2024</div>
            <div className="kbd-line">{c.location} · ID</div>
          </div>
        </Reveal>

        <Reveal delay={120}>
          <h1 style={{ maxWidth: "16ch" }}>
            Indonesian<br />
            commodities, <em style={{ fontStyle: "italic", color: "var(--accent)" }}>exported</em><br />
            with care.
          </h1>
        </Reveal>

        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 48, marginTop: 64, alignItems: "end" }} className="hero-grid">
          <Reveal delay={240}>
            <p style={{ fontSize: 18, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: "52ch" }}>
              We are a young export house based in Palembang, South Sumatra, sourcing
              raw materials from local suppliers and shipping them — with full
              documentation and uncompromising QC — to buyers across the world.
              Today, coconut shell charcoal. Tomorrow, more.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
              <a href="products.html" className="btn btn-primary">
                View catalog <span className="arrow">→</span>
              </a>
              <a href="contact.html" className="btn btn-ghost">
                Request a sample
              </a>
            </div>
          </Reveal>

          <Reveal delay={360}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <img src="media/arang/arang4.webp" alt="Coconut shell charcoal" style={{ width: "100%", aspectRatio: "3 / 4", objectFit: "cover", display: "block" }} />
              <img src="media/arang/arang5.webp" alt="Coconut shell charcoal — detail" style={{ width: "100%", aspectRatio: "3 / 4", objectFit: "cover", display: "block", marginTop: 40 }} />
            </div>
          </Reveal>
        </div>

        <style>{`
          @media (max-width: 860px) {
            .hero-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>);

}

function Marquee() {
  const items = [
  "Coconut shell charcoal", "Activated carbon feedstock", "Briquette base",
  "Future · Green coffee", "Future · Palm products", "Sumatra origin",
  "FOB Palembang", "Samples on request"];

  return (
    <div className="marquee">
      <div className="marquee-track">
        {[...items, ...items].map((t, i) =>
        <span key={i} className="marquee-item">
            <span className="star">✦</span>
            {t}
          </span>
        )}
      </div>
    </div>);

}

function ValueProps() {
  const values = window.NAVAN_DATA.values;
  return (
    <section className="section">
      <div className="wrap">
        <Reveal>
          <div className="eyebrow">Why work with us</div>
          <h2 style={{ marginTop: 24, maxWidth: "20ch" }}>
            Small enough to <em style={{ fontStyle: "italic" }}>care</em>.<br />
            Serious enough to <em style={{ fontStyle: "italic", color: "var(--accent)" }}>deliver</em>.
          </h2>
        </Reveal>

        <div style={{ marginTop: 80, borderTop: "1px solid var(--rule)" }}>
          {values.map((v, i) =>
          <Reveal key={v.n} delay={i * 80}>
              <div className="value-row">
                <div className="value-num mono">{v.n}</div>
                <div className="value-title serif">{v.title}</div>
                <div className="value-body">{v.body}</div>
              </div>
            </Reveal>
          )}
        </div>
      </div>

      <style>{`
        .value-row {
          display: grid;
          grid-template-columns: 80px 1fr 1.4fr;
          gap: 40px;
          align-items: baseline;
          padding: 40px 0;
          border-bottom: 1px solid var(--rule);
          transition: padding 0.4s ease;
        }
        .value-row:hover {
          padding-left: 16px;
        }
        .value-num { color: var(--ink-3); font-size: 12px; letter-spacing: 0.16em; }
        .value-title { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }
        .value-body { color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 52ch; }
        @media (max-width: 860px) {
          .value-row { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
          .value-row:hover { padding-left: 0; }
        }
      `}</style>
    </section>);

}

function FeaturedProduct() {
  const p = window.NAVAN_DATA.products[0];
  return (
    <section className="section" style={{ background: "var(--bg-2)", padding: "120px 0" }}>
      <div className="wrap">
        <Reveal>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginBottom: 56 }}>
            <div>
              <div className="eyebrow">Currently in catalog</div>
              <h2 style={{ marginTop: 18 }}>What we ship today.</h2>
            </div>
            <a href="products.html" className="btn btn-ghost">All products <span className="arrow">→</span></a>
          </div>
        </Reveal>

        <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 48, alignItems: "start" }} className="featured-grid">
          <Reveal delay={120}>
            <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 12, height: "min-content" }}>
              <img src={p.images[0]} alt={p.name} style={{ width: "100%", aspectRatio: "4 / 5", objectFit: "cover", display: "block" }} />
              <div style={{ display: "grid", gridTemplateRows: "1fr 1fr", gap: 12 }}>
                <img src={p.images[1]} alt={p.shortName + " — detail"} style={{ width: "100%", aspectRatio: "1 / 1", objectFit: "cover", display: "block" }} />
                <img src={p.images[2]} alt={p.shortName + " — detail"} style={{ width: "100%", aspectRatio: "1 / 1", objectFit: "cover", display: "block" }} />
              </div>
            </div>
          </Reveal>

          <Reveal delay={240}>
            <div style={{ paddingTop: 12 }}>
              <div style={{ display: "flex", gap: 8, marginBottom: 24, flexWrap: "wrap" }}>
                <span className="tag tag-accent"><span className="tag-dot"></span>Available now</span>
                {p.sampleAvailable && <span className="tag">Sample on request</span>}
                <span className="tag">HS {p.hsCode}</span>
              </div>
              <h3 style={{ fontSize: 44, lineHeight: 1.05, marginBottom: 20 }}>{p.name}</h3>
              <p style={{ color: "var(--ink-2)", fontSize: 16, lineHeight: 1.65, marginBottom: 32 }}>{p.summary}</p>

              <div style={{ borderTop: "1px solid var(--rule-2)", paddingTop: 24 }}>
                {p.specs.slice(0, 4).map((s, i) =>
                <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderBottom: "1px solid var(--rule)", fontSize: 14 }}>
                    <span className="mono" style={{ color: "var(--ink-3)", fontSize: 12 }}>{s.k.toUpperCase()}</span>
                    <span style={{ fontFamily: "Instrument Serif, serif", fontSize: 18 }}>{s.v}</span>
                  </div>
                )}
              </div>

              <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
                <a href={"product.html?id=" + p.id} className="btn btn-primary">
                  Full specifications <span className="arrow">→</span>
                </a>
                <a href="contact.html" className="btn btn-ghost">Request sample</a>
              </div>
            </div>
          </Reveal>
        </div>
      </div>

      <style>{`
        @media (max-width: 860px) {
          .featured-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>);

}

function Pipeline() {
  const cats = window.NAVAN_DATA.categories;
  return (
    <section className="section">
      <div className="wrap">
        <Reveal>
          <div className="eyebrow">What's next</div>
          <h2 style={{ marginTop: 18, maxWidth: "22ch" }}>A growing catalog of Indonesian raw materials.</h2>
          <p className="muted" style={{ maxWidth: "60ch", fontSize: 16, marginTop: 20 }}>
            We're built to scale across categories. Each new product line — coffee,
            palm, beyond — slots into the same sourcing, QC, and export workflow
            we're establishing with charcoal.
          </p>
        </Reveal>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginTop: 64 }} className="pipeline-grid">
          {cats.map((cat, i) =>
          <Reveal key={cat.id} delay={i * 100}>
              <div className={"pipeline-card " + cat.status}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                  <span className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.12em" }}>
                    {String(i + 1).padStart(2, "0")} · CATEGORY
                  </span>
                  {cat.status === "available" ?
                <span className="tag tag-accent"><span className="tag-dot"></span>Live</span> :
                <span className="tag" style={{ color: "var(--ink-3)" }}>Coming soon</span>}
                </div>
                <h3 style={{ marginTop: 32, fontSize: 32 }}>{cat.label}</h3>
                <div style={{ marginTop: 24, paddingTop: 24, borderTop: "1px solid var(--rule)", fontSize: 13 }} className="muted mono">
                  {cat.count > 0 ? `${cat.count} product${cat.count > 1 ? "s" : ""} listed` : "Roadmap"}
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </div>

      <style>{`
        .pipeline-card {
          border: 1px solid var(--rule);
          background: var(--bg-paper);
          padding: 28px;
          aspect-ratio: 4 / 5;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1), border-color 0.3s, background 0.3s;
        }
        .pipeline-card:hover {
          transform: translateY(-4px);
          border-color: var(--ink);
        }
        .pipeline-card.coming-soon {
          background: transparent;
          border-style: dashed;
        }
        .pipeline-card.available:hover {
          background: #0c1715;
          color: #eef1ec;
        }
        .pipeline-card.available:hover .muted { color: rgba(255,255,255,0.6); }
        .pipeline-card.available:hover .tag-accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
        @media (max-width: 860px) {
          .pipeline-grid { grid-template-columns: 1fr !important; }
          .pipeline-card { aspect-ratio: auto; min-height: 240px; }
        }
      `}</style>
    </section>);

}

function ContactCTA() {
  const c = window.NAVAN_DATA.company;
  return (
    <section style={{ background: "#0c1715", color: "#eef1ec", padding: "120px 0" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "end" }} className="cta-grid">
          <Reveal>
            <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)" }}>
              <span style={{ background: "rgba(255,255,255,0.5)" }}></span>Let's talk
            </div>
            <h2 style={{ marginTop: 24, color: "rgb(239, 225, 236)" }}>
              Have a specification?<br />
              <em style={{ fontStyle: "italic", color: "var(--accent)" }}>We'll send a sample.</em>
            </h2>
          </Reveal>
          <Reveal delay={150}>
            <p style={{ color: "rgba(255,255,255,0.7)", fontSize: 16, lineHeight: 1.6, marginBottom: 28 }}>
              Tell us your target volume, specs, and destination. We respond within
              one business day with pricing, packaging options, and a shipping plan.
            </p>
            <a href="contact.html" className="btn btn-accent">Get in touch <span className="arrow">→</span></a>
          </Reveal>
        </div>

        <div style={{ marginTop: 80, paddingTop: 32, borderTop: "1px solid rgba(255,255,255,0.12)", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }} className="cta-info">
          <div>
            <h4 style={{ color: "rgba(255,255,255,0.5)", marginBottom: 10 }}>Phone</h4>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <a href={"tel:" + c.phoneRaw} style={{ fontSize: 16, fontFamily: "Instrument Serif, serif" }}>{c.contactName} · {c.phone}</a>
              <a href={"tel:" + c.phone2Raw} style={{ fontSize: 16, fontFamily: "Instrument Serif, serif" }}>{c.contactName2} · {c.phone2}</a>
            </div>
          </div>
          <div>
            <h4 style={{ color: "rgba(255,255,255,0.5)", marginBottom: 10 }}>Email</h4>
            <a href={"mailto:" + c.email} style={{ fontSize: 18, fontFamily: "Instrument Serif, serif" }}>{c.email}</a>
          </div>
          <div>
            <h4 style={{ color: "rgba(255,255,255,0.5)", marginBottom: 10 }}>Location</h4>
            <p style={{ fontSize: 14, color: "rgba(255,255,255,0.85)", lineHeight: 1.5 }}>{c.address}</p>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 860px) {
          .cta-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .cta-info { grid-template-columns: 1fr !important; gap: 20px !important; }
        }
      `}</style>
    </section>);

}

function App() {
  useReveal();
  return (
    <div className="page-fade">
      <Nav active="home" />
      <Hero />
      <Marquee />
      <ValueProps />
      <FeaturedProduct />
      <Pipeline />
      <ContactCTA />
      <Footer />
    </div>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);