/* app.jsx — page sections + composition */

const TIMELINE = [
  { year: "2005",         role: "First website",                 desc: "Built Bankasbek.tk as a school assignment, and never stopped." },
  { year: "2006 – 2012",  role: "Digital Communication & Media", desc: "Bachelor's at De Haagse Hogeschool, The Hague." },
  { year: "2010 – 2013",  role: "Designer & front-end developer", desc: "E-commerce sites for a major agency in Rotterdam." },
  { year: "2011 – 2024",  role: "Videographer",                  desc: "Started as a hobby. From 2020, ran my own production company." },
  { year: "2012 – 2022",  role: "SEO & online marketing",        desc: "Built systems that pulled traffic and made campaigns measurable." },
  { year: "2013 – 2020",  role: "Front-end developer · SPIN",    desc: "Shipped 100+ websites for major local companies in Curaçao." },
  { year: "2019 – 2025",  role: "Freelance multimedia",          desc: "Web, video, brand. Whatever the project actually needed." },
  { year: "Since 2023",   role: "Building web apps with AI",     desc: "Started shipping full products. Faster, smarter, often solo." , now: true },
  { year: "Since 2026",   role: "Founder · Conversio",           desc: "AI WhatsApp concierge for hotels and property managers across the Caribbean.", now: true },
];

function Hero({ onLaunch }) {
  return (
    <section className="hero light">
      <div className="hero-top">
        <div className="brand">
          <img className="portrait-nav" src="assets/reagan.png" alt="Reagan Pieter" />
          Reagan Pieter
        </div>
        <div className="hero-meta">
          <span className="live">Available · Q3 2026</span>
          <span>Willemstad, Curaçao</span>
        </div>
      </div>

      <div className="hero-center">
        <p className="hero-sub">
          Most businesses spend 10+ hours a week on work <span className="accent-word">AI does in minutes.</span> I will fix that.
        </p>

        <p className="hero-fine">
          I've spent 20+ years building digital products, from hand-coded sites in 2005
          to AI-powered web apps today. I build what businesses actually need.
        </p>

        <HeroCmd onLaunch={onLaunch} />
      </div>

      <div className="scroll-hint">
        <span className="line"></span>
        <span>Scroll to explore</span>
      </div>
    </section>
  );
}

function Timeline() {
  const containerRef = React.useRef(null);

  React.useEffect(() => {
    const rows = containerRef.current?.querySelectorAll(".tl-item");
    if (!rows || !rows.length) return;

    const update = () => {
      const center = window.innerHeight / 2;
      let best = null;
      let bestDist = Infinity;
      rows.forEach(r => {
        const rect = r.getBoundingClientRect();
        const mid = rect.top + rect.height / 2;
        const dist = Math.abs(mid - center);
        if (dist < bestDist) { bestDist = dist; best = r; }
      });
      rows.forEach(r => r.classList.toggle("active", r === best && bestDist < window.innerHeight * 0.45));
    };

    update();
    window.addEventListener("scroll", update, { passive: true });
    window.addEventListener("resize", update);
    return () => {
      window.removeEventListener("scroll", update);
      window.removeEventListener("resize", update);
    };
  }, []);

  return (
    <section id="timeline" className="section dark">
      <div className="container">
        <div className="timeline-head">
          <div>
            <div className="eyebrow"><span className="num">01</span> · 2005 → NOW</div>
            <h2 className="display timeline-title" style={{ marginTop: 18 }}>
              Twenty years getting here.
            </h2>
          </div>
          <p className="timeline-lede">
            One thread runs through all of it: figure out what people actually need,
            and ship it. The tools changed. The instinct didn't.
          </p>
        </div>

        <div className="timeline" ref={containerRef}>
          {TIMELINE.map((row, i) => (
            <div key={i} className={`tl-item ${row.now ? "tl-now" : ""}`}>
              <div className="tl-year">{row.year}</div>
              <div className="tl-role">{row.role}</div>
              <div className="tl-desc">{row.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Now() {
  return (
    <section id="now" className="section dark" style={{ paddingTop: "clamp(60px, 8vw, 120px)" }}>
      <div className="container">
        <div className="now-grid">
          <div>
            <div className="eyebrow"><span className="num">04</span> · CURRENTLY</div>
            <h2 className="display now-title" style={{ marginTop: 18, color: "var(--light-on-dark)" }}>
              What I'm building<br/>right now.
            </h2>
          </div>
          <div className="now-cards">
            <a className="now-card" href="https://www.getconversio.com/" target="_blank" rel="noopener">
              <span className="dot-now"></span>
              <div>
                <div className="lbl">Conversio · Live</div>
                <div className="title-l">An AI WhatsApp concierge for Caribbean hotels & property managers.</div>
              </div>
              <span className="meta">getconversio.com</span>
            </a>
            <div className="now-card">
              <span className="dot-now"></span>
              <div>
                <div className="lbl">Curaçao Booking · In progress</div>
                <div className="title-l">A booking platform built specifically for businesses on the island.</div>
              </div>
              <span className="meta">Q4 2026</span>
            </div>
            <div className="now-card">
              <span className="dot-now"></span>
              <div>
                <div className="lbl">Operating system for one</div>
                <div className="title-l">Automating my own studio with AI agents for email, content, and ops.</div>
              </div>
              <span className="meta">Ongoing</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const SERVICES = [
  { num: "01", title: "AI agents & automations", body: "WhatsApp concierges, email assistants, ops automations. Built around your real workflow, not a generic chatbot." },
  { num: "02", title: "Web apps & booking platforms", body: "Custom software for the things off-the-shelf can't do. Fast, modern, scoped to ship." },
  { num: "03", title: "Web design & front-end", body: "Marketing sites, e-commerce, product surfaces. Twenty years of pixel work, now with AI as a co-pilot." },
  { num: "04", title: "Brand & visual systems", body: "Identity, motion, video. The visual language that makes your product feel like itself." },
];

function Services() {
  return (
    <section id="services" className="section light">
      <div className="container">
        <div className="services-head">
          <div>
            <div className="eyebrow on-light"><span className="num">05</span> · WHAT I DO</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", marginTop: 18, letterSpacing: "-0.03em" }}>
              Four practices.<br/>One operator.
            </h2>
          </div>
          <p style={{ fontSize: "clamp(17px, 1.5vw, 21px)", color: "var(--ink-2)", maxWidth: "42ch", lineHeight: 1.5 }}>
            I run the whole thing myself. Design, build, deploy. No handoffs, no agency overhead, no excuses about what the dev team can't do.
          </p>
        </div>
        <div className="services-grid">
          {SERVICES.map(s => (
            <div className="service" key={s.num}>
              <div className="num-s">{s.num}</div>
              <div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const WORK = [
  {
    name: "Conversio",
    tag: "shipped",
    tagLabel: "Live · 2026",
    desc: "AI WhatsApp concierge for hotels and property managers in Curaçao and the wider Caribbean. Guests message in plain language; the agent handles bookings, FAQs, check-in instructions.",
    link: "https://www.getconversio.com/",
    linkLabel: "getconversio.com",
  },
  {
    name: "Curaçao Booking",
    tag: "building",
    tagLabel: "Building · 2026",
    desc: "A booking platform purpose-built for local businesses on the island: tours, rentals, services. Replacing spreadsheets and DMs with something that just works.",
    link: null,
    linkLabel: "In private beta",
  },
];

function SelectedWork() {
  return (
    <section id="work" className="section dark">
      <div className="container">
        <div className="work-head">
          <div className="eyebrow"><span className="num">06</span> · SELECTED WORK</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 72px)", marginTop: 18, letterSpacing: "-0.03em", color: "var(--light-on-dark)" }}>
            Shipped & shipping.
          </h2>
        </div>
        <div className="work-grid">
          {WORK.map(w => (
            <div className="work" key={w.name}>
              <div>
                <div className={`work-tag ${w.tag}`}>{w.tagLabel}</div>
                <h3 style={{ marginTop: 22 }}>{w.name}</h3>
                <p>{w.desc}</p>
              </div>
              {w.link ? (
                <a className="work-link" href={w.link} target="_blank" rel="noopener">
                  {w.linkLabel}
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M7 17L17 7"/><path d="M8 7h9v9"/>
                  </svg>
                </a>
              ) : (
                <div className="work-link" style={{ color: "var(--light-on-dark-2)" }}>
                  {w.linkLabel}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  return (
    <section id="contact" className="section light contact">
      <div className="container">
        <div className="contact-eyebrow">07 · GET IN TOUCH</div>
        <h2 className="display contact-headline">
          Let's <em>talk.</em>
        </h2>
        <button
          className="contact-email"
          onClick={() => {
            const el = document.getElementById("chat");
            if (el) window.scrollTo({ top: el.offsetTop - 20, behavior: "smooth" });
          }}
        >
          <SparkIcon className="spark" />
          Chat with my AI
          <span className="arrow">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14"/><path d="M13 5l7 7-7 7"/>
            </svg>
          </span>
        </button>
        <p style={{ marginTop: 24, fontSize: 14, color: "var(--ink-2)" }}>
          Or email directly: <a href="mailto:contact@reaganpieter.com" style={{ color: "var(--ink)", textDecoration: "underline" }}>contact@reaganpieter.com</a>
        </p>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div>© 2026 Reagan Pieter · Built with AI, in Curaçao.</div>
      <div className="socials">
        <a href="https://www.linkedin.com/in/reaganpieter/" target="_blank" rel="noopener">LinkedIn</a>
        <a href="https://www.instagram.com/reagan.pieter" target="_blank" rel="noopener">Instagram</a>
        <a href="https://www.youtube.com/@reaganpieter" target="_blank" rel="noopener">YouTube</a>
      </div>
    </footer>
  );
}

function FloatingChatLauncher() {
  return (
    <button className="fab" onClick={() => {
      const el = document.getElementById("chat");
      if (el) window.scrollTo({ top: el.offsetTop - 20, behavior: "smooth" });
    }}>
      <SparkIcon />
      Ask my AI
    </button>
  );
}

function App() {
  const [initial, setInitial] = React.useState(null);

  const launch = (text) => {
    setInitial(text);
  };

  return (
    <>
      <Hero onLaunch={launch} />
      <Timeline />
      <ChatSection initial={initial} onClearInitial={() => setInitial(null)} />
      <Now />
      <Services />
      <SelectedWork />
      <Contact />
      <Footer />
      <FloatingChatLauncher />
    </>
  );
}

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