// sections.jsx — page sections (uses globals: mk, IconXxx)

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 12);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <nav className={"nav " + (scrolled ? "scrolled" : "")}>
      <div className="container nav-inner">
        <a className="brand" href="#top">
          <img className="brand-mark-img" src="assets/cassyoung-mark.png" alt="Cassyoung" />
          <span className="brand-text">
            <strong>CASSYOUNG</strong>
            <span>TECH</span>
          </span>
        </a>
        <div className="nav-links">
          <a href="#services">Services</a>
          <a href="#work">Work</a>
          <a href="#process">Process</a>
          <a href="#about">About</a>
          <a href="#contact">Contact</a>
        </div>
        <div className="nav-cta">
          <a className="btn ghost" href="#contact">
            <span>Book a call</span>
          </a>
          <a className="btn primary" href="#contact">
            <span>Start a project</span>
            <span className="arr"><IconArrowSm /></span>
          </a>
        </div>
      </div>
    </nav>);

}

function Hero() {
  return (
    <section id="top" className="hero">
      <div className="container">
        <div className="hero-grid">
          <div className="hero-copy reveal">
            <span className="eyebrow"><span className="dot" /> Malaysia-based digital studio · Available Q2 2026</span>
            <h1>
              Build Faster.<br />
              <span className="accent-text">Launch Smarter.</span>
            </h1>
            <p className="hero-sub">
              Modern landing pages, funnels, and MicroSaaS systems designed to help
              businesses grow with speed, clarity, and conversion in mind.
            </p>
            <div className="hero-ctas">
              <a className="btn primary" href="#services">
                <span>View services</span>
                <span className="arr"><IconArrowSm /></span>
              </a>
              <a className="btn ghost" href="#contact">
                <span>Start a project</span>
              </a>
            </div>
            <div className="hero-meta">
              <div className="stat"><strong>14 days</strong><span>Avg. MVP ship time</span></div>
              <div className="stat"><strong>98<span style={{ color: 'var(--text-3)' }}>/100</span></strong><span>Lighthouse target</span></div>
              <div className="stat"><strong>22+</strong><span>Shipped products</span></div>
            </div>
          </div>
          <div className="hero-visual reveal">
            <mk.HeroDashboard />
          </div>
        </div>
      </div>
    </section>);

}

function Trust() {
  const items = [
  { icon: <IconCpu size={16} />, label: "Modern tech stack" },
  { icon: <IconBolt size={16} />, label: "Fast delivery" },
  { icon: <IconDevice size={16} />, label: "Responsive design" },
  { icon: <IconCard size={16} />, label: "Stripe-ready integration" },
  { icon: <IconSearch size={16} />, label: "SEO optimized" }];

  return (
    <section className="trust" aria-label="Trust">
      <div className="container">
        <div className="trust-row reveal">
          {items.map((it, i) =>
          <div key={i} className="trust-cell">
              {it.icon}
              <span>{it.label}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Services() {
  const services = [
  {
    icon: <IconLayers size={20} />,
    title: "Landing Page Development",
    desc: "High-converting, hand-crafted landing pages — fast, accessible, and tuned for search and conversion. Built on modern frameworks.",
    tags: ["Next.js", "Framer Motion", "CMS-ready"],
    feature: true
  },
  {
    icon: <IconFunnel size={20} />,
    title: "Funnel Systems",
    desc: "Multi-step funnels with optimized flows, A/B-ready variants, lead capture, payments, and email automation wired in."
  },
  {
    icon: <IconBox size={20} />,
    title: "MicroSaaS MVP",
    desc: "From idea to first paying customer. Auth, billing, dashboards and core feature set — shipped in weeks, not months."
  },
  {
    icon: <IconCode size={20} />,
    title: "Web Application Development",
    desc: "Full-stack web apps with clean architecture, type-safe APIs, and scalable infra. Built to grow with your team."
  },
  {
    icon: <IconBolt size={20} />,
    title: "Automation & API Integrations",
    desc: "Connect the tools that already run your business. Stripe, Resend, Supabase, Zapier, webhooks, custom internal tools."
  }];

  return (
    <section id="services">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot" /> Services</span>
          <h2>Engineering studio for <span className="accent-text">launch-stage</span> teams.</h2>
          <p>A focused set of services covering the full path from first idea to live, paying product. No agency bloat — just shipping.</p>
        </div>
        <div className="services-grid reveal">
          {services.map((s, i) =>
          <article key={i} className={"service-card " + (s.feature ? "feature" : "")}>
              <div className="glow" />
              <span className="num">0{i + 1}</span>
              <div className="icon">{s.icon}</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

}

function Portfolio() {
  const cases = [
  { tag: "SaaS · Dashboard concept", title: "Operator-first analytics surface", desc: "A dense, keyboard-driven dashboard for product operators — built around speed and clarity.", thumb: <mk.SaasDashboard />, span: "wide" },
  { tag: "Lead funnel", title: "B2B lead funnel system", desc: "Four-stage qualification funnel with payment-ready offer.", thumb: <mk.FunnelSystem />, span: "" },
  { tag: "AI · Fintech", title: "AI trading journal UI", desc: "Annotates and scores trades with model-driven insights.", thumb: <mk.TradingJournal />, span: "" },
  { tag: "Marketing site", title: "Business landing page", desc: "Conversion-tuned page with clean type and trust scaffolding.", thumb: <mk.LandingPage />, span: "" },
  { tag: "Bookings", title: "Booking funnel system", desc: "Calendar-first booking flow with payment + reminders.", thumb: <mk.BookingFunnel />, span: "" }];

  return (
    <section id="work">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot" /> Selected work</span>
          <h2>Concepts, systems and <span className="accent-text">shipped products</span>.</h2>
          <p>A small selection of recent in-house concepts and client work. More available on request.</p>
        </div>
        <div className="portfolio-grid reveal">
          {cases.map((c, i) =>
          <article key={i} className={"case-card " + c.span}>
              <div className="case-thumb">{c.thumb}</div>
              <div className="case-body">
                <span className="tag">{c.tag}</span>
                <h3>{c.title}</h3>
                <p>{c.desc}</p>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

function Process() {
  const steps = [
  { n: "01", title: "Discovery", desc: "Audit, goals, audience, success metrics." },
  { n: "02", title: "Strategy", desc: "Architecture, stack, scope, sprint plan." },
  { n: "03", title: "Design", desc: "Wireframes, hi-fi UI, design system." },
  { n: "04", title: "Development", desc: "Build, integrate, QA, performance." },
  { n: "05", title: "Launch", desc: "Deploy, monitor, iterate post-launch." }];

  return (
    <section id="process">
      <div className="container">
        <div className="section-head center reveal">
          <span className="eyebrow"><span className="dot" /> Process</span>
          <h2>A clear, repeatable path<br />from <span className="accent-text">brief to launch</span>.</h2>
          <p>Five stages. No surprises. Async-friendly and fast.</p>
        </div>
        <div className="process-grid reveal">
          {steps.map((s) =>
          <div key={s.n} className="process-step">
              <div className="node">{s.n}</div>
              <div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function About() {
  return (
    <section id="about">
      <div className="container">
        <div className="about-grid">
          <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <span className="eyebrow"><span className="dot" /> About</span>
            <h2>Built for founders<br />who ship.</h2>
            <p style={{ fontSize: '17px' }}>
              Cassyoung Tech Enterprise is a Malaysia-based digital studio focused on building
              modern landing pages, funnels, and scalable software solutions for startups,
              creators, and operators worldwide.
            </p>
            <p>
              We pair product thinking with senior engineering — small team, no handoffs, direct line to the people building your product.
            </p>
            <div className="about-stats">
              <div className="about-stat"><strong>2022</strong><span>Established</span></div>
              <div className="about-stat"><strong>Kuala Lumpur</strong><span>Headquarters</span></div>
              <div className="about-stat"><strong>4 days</strong><span>Avg. landing page</span></div>
              <div className="about-stat"><strong>100%</strong><span>In-house team</span></div>
            </div>
          </div>
          <div className="reveal">
            <div className="glass" style={{ padding: '36px', position: 'relative', overflow: 'hidden' }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Operating principles</span>
                {[
                { t: "Ship in weeks, not quarters", d: "Scope ruthlessly, build vertical slices, deploy continuously." },
                { t: "Performance is design", d: "Every page is engineered for speed, accessibility, and search." },
                { t: "Own the stack", d: "Modern, type-safe, observable. No lock-in to a single vendor." },
                { t: "Direct collaboration", d: "Async-first, weekly demos, shared dashboard. No agency theatre." }].
                map((p, i) =>
                <div key={i} style={{ display: 'flex', gap: 14, paddingTop: 14, borderTop: i ? '1px solid var(--border)' : 'none' }}>
                    <div style={{ flex: 'none', width: 24, height: 24, borderRadius: 6, display: 'grid', placeItems: 'center', color: 'var(--accent)', background: 'var(--accent-soft)' }}>
                      <IconCheck size={14} />
                    </div>
                    <div>
                      <div style={{ fontSize: 15, fontWeight: 500, marginBottom: 4 }}>{p.t}</div>
                      <p style={{ fontSize: 13.5, color: 'var(--text-3)' }}>{p.d}</p>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

const STUDIO_EMAIL = "mevius@cassyoungtech.com";
const STUDIO_WHATSAPP = "+60166283134";
const STUDIO_WHATSAPP_DIGITS = "60166283134";

function Contact() {
  const [form, setForm] = React.useState({ name: '', email: '', company: '', budget: 'Under $5k', scope: '', msg: '' });
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error

  const onSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    try {
      const res = await fetch(`https://formsubmit.co/ajax/${STUDIO_EMAIL}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          name: form.name,
          email: form.email,
          company: form.company,
          budget: form.budget,
          scope: form.scope,
          message: form.msg,
          _subject: `New project enquiry from ${form.name || 'website'}`,
          _template: 'table',
          _captcha: 'false'
        })
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && (data.success === 'true' || data.success === true)) {
        setStatus('sent');
        setForm({ name: '', email: '', company: '', budget: 'Under $5k', scope: '', msg: '' });
      } else {
        setStatus('error');
      }
    } catch (err) {
      setStatus('error');
    }
  };

  const btnLabel = status === 'sending' ? 'Sending…' :
  status === 'sent' ? 'Message sent' :
  status === 'error' ? 'Try again' :
  'Send message';

  return (
    <section id="contact">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot" /> Contact</span>
          <h2>Start a project.</h2>
          <p>Tell us about your idea. We respond within one business day. Free 20-minute consultation included.</p>
        </div>
        <div className="contact-grid reveal">
          <form className="contact-card" onSubmit={onSubmit} noValidate>
            <div className="field-row">
              <div className="field">
                <label>Name</label>
                <input required type="text" name="name" placeholder="Your full name" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
              </div>
              <div className="field">
                <label>Work email</label>
                <input required type="email" name="email" placeholder="you@company.com" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
              </div>
            </div>
            <div className="field-row">
              <div className="field">
                <label>Company</label>
                <input type="text" name="company" placeholder="Company or project name" value={form.company} onChange={(e) => setForm({ ...form, company: e.target.value })} />
              </div>
              <div className="field">
                <label>Budget</label>
                <select name="budget" value={form.budget} onChange={(e) => setForm({ ...form, budget: e.target.value })}>
                  <option>Under $5k</option>
                  <option>$5k – $15k</option>
                  <option>$15k – $40k</option>
                  <option>$40k+</option>
                </select>
              </div>
            </div>
            <div className="field">
              <label>What are you building?</label>
              <select name="scope" value={form.scope} onChange={(e) => setForm({ ...form, scope: e.target.value })}>
                <option value="">Select a service</option>
                <option>Landing page</option>
                <option>Funnel system</option>
                <option>MicroSaaS MVP</option>
                <option>Web application</option>
                <option>Automation / integrations</option>
              </select>
            </div>
            <div className="field">
              <label>Project details</label>
              <textarea required name="message" placeholder="A short description of your goals, audience, and any links." value={form.msg} onChange={(e) => setForm({ ...form, msg: e.target.value })} />
            </div>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 8, flexWrap: 'wrap' }}>
              <button type="submit" className="btn primary" disabled={status === 'sending'}>
                <span>{btnLabel}</span>
                <span className="arr">{status === 'sent' ? <IconCheck size={14} /> : <IconArrowSm />}</span>
              </button>
              <span className="mono" style={{ fontSize: 11, color: status === 'error' ? '#f87171' : 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
                {status === 'sent' ? `Sent to ${STUDIO_EMAIL}` :
                status === 'error' ? 'Something went wrong — email us directly' :
                status === 'sending' ? 'Delivering your message…' :
                'Avg. reply < 24h'}
              </span>
            </div>
          </form>

          <aside className="contact-side">
            <a
              className="contact-tile accent"
              href={`https://wa.me/${STUDIO_WHATSAPP_DIGITS}`}
              target="_blank" rel="noopener noreferrer">
              <div className="row">
                <span className="label">WhatsApp</span>
                <IconArrowSm />
              </div>
              <h4>Chat with us instantly</h4>
              <p>Fastest way to reach the team — typical reply within minutes during business hours.</p>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 8, color: 'var(--accent)', fontSize: 14 }}>
                <IconWhats size={16} />
                <span className="mono">{STUDIO_WHATSAPP}</span>
              </div>
            </a>
            <a className="contact-tile" href={`mailto:${STUDIO_EMAIL}`}>
              <div className="row">
                <span className="label">Email</span>
                <IconArrowSm />
              </div>
              <h4>{STUDIO_EMAIL}</h4>
              <p>For partnerships, RFPs, and longer briefs.</p>
            </a>
            <a className="contact-tile"
            href={`https://wa.me/${STUDIO_WHATSAPP_DIGITS}?text=${encodeURIComponent("Hi Cassyoung — I'd like to book a 20-min consultation.")}`}
            target="_blank" rel="noopener noreferrer">
              <div className="row">
                <span className="label">Consultation</span>
                <IconArrowSm />
              </div>
              <h4>Book a free 20-min call</h4>
              <p>No-pitch scoping call. Bring your idea, leave with a plan.</p>
            </a>
          </aside>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <img className="footer-bigmark" src="assets/cassyoung-mark.png" alt="" aria-hidden="true" />
        <div className="footer-inner" style={{ marginTop: 48 }}>
          <div className="footer-col">
            <a className="brand" href="#top" style={{ marginBottom: 16 }}>
              <img className="brand-mark-img" src="assets/cassyoung-mark.png" alt="Cassyoung" />
              <span className="brand-text">
                <strong>CASSYOUNG</strong>
                <span>TECH</span>
              </span>
            </a>
            <p style={{ fontSize: 13.5, maxWidth: '34ch' }}>
              A Malaysia-based digital studio building modern landing pages, funnels,
              and scalable software for global teams.
            </p>
            <p className="mono" style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 14, textTransform: 'uppercase', letterSpacing: '0.06em' }}>SSM REG. 202603137995 · SELANGOR, MY

            </p>
          </div>
          <div className="footer-col">
            <h5>Services</h5>
            <ul>
              <li><a href="#services">Landing pages</a></li>
              <li><a href="#services">Funnel systems</a></li>
              <li><a href="#services">MicroSaaS MVP</a></li>
              <li><a href="#services">Web applications</a></li>
              <li><a href="#services">Automation</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Studio</h5>
            <ul>
              <li><a href="#work">Selected work</a></li>
              <li><a href="#process">Process</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Legal</h5>
            <ul>
              <li><a href="#">Privacy policy</a></li>
              <li><a href="#">Terms of service</a></li>
              <li><a href="#">Refund policy</a></li>
              <li><a href="#">Cookie preferences</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Cassyoung Tech Enterprise · All rights reserved</span>
          <span>Made in Kuala Lumpur · Working worldwide</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Nav, Hero, Trust, Services, Portfolio, Process, About, Contact, Footer });