const { useState, useEffect, useRef } = React;

const BOOK_URL = "https://calendar.app.google/Lu6xSNvrWhqftNDq9";
const EMAIL = "des@techtureconsulting.com";

/* ---------- Icons ---------- */
const Icon = ({ children, className = "w-5 h-5", ...p }) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25"
       strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden="true" {...p}>
    {children}
  </svg>
);
const Arrow   = (p) => <Icon {...p}><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></Icon>;
const Check   = (p) => <Icon {...p}><path d="M20 6 9 17l-5-5"/></Icon>;
const Compass = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="m15 9-2 6-6 2 2-6 6-2z"/></Icon>;
const Layers  = (p) => <Icon {...p}><path d="m12 2 10 6-10 6L2 8l10-6z"/><path d="m2 16 10 6 10-6"/><path d="m2 12 10 6 10-6"/></Icon>;
const Rocket  = (p) => <Icon {...p}><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/></Icon>;
const LifeBuoy= (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.5"/><path d="m4.9 4.9 4.3 4.3M14.8 14.8l4.3 4.3M14.8 9.2l4.3-4.3M4.9 19.1l4.3-4.3"/></Icon>;
const Mail    = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="14" rx="1"/><path d="m3 7 9 6 9-6"/></Icon>;
const Menu    = (p) => <Icon {...p}><path d="M4 7h16M4 12h16M4 17h16"/></Icon>;
const XIcon   = (p) => <Icon {...p}><path d="M6 6l12 12M18 6 6 18"/></Icon>;
const Instagram=(p) => <Icon {...p}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.6" fill="currentColor"/></Icon>;
const Linkedin= (p) => <Icon {...p}><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8 10v7M8 7v.01M12 17v-4a2 2 0 1 1 4 0v4M12 13v4"/></Icon>;
const Storefront = (p) => <Icon {...p}><path d="M3 8 5 4h14l2 4"/><path d="M3 8v12h18V8"/><path d="M3 8a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0"/><path d="M9 20v-6h6v6"/></Icon>;
const Users   = (p) => <Icon {...p}><circle cx="9" cy="8" r="3.5"/><path d="M2 20c0-3.5 3.13-6 7-6s7 2.5 7 6"/><circle cx="17" cy="7" r="2.5"/><path d="M22 18c0-2.2-1.79-4-4-4"/></Icon>;
const Building= (p) => <Icon {...p}><rect x="4" y="3" width="16" height="18" rx="1"/><path d="M9 8h.01M15 8h.01M9 12h.01M15 12h.01M9 16h.01M15 16h.01"/></Icon>;
const Star    = (p) => <Icon {...p}><path d="m12 3 2.6 5.6L20 10l-4 4 1 6-5-3-5 3 1-6-4-4 5.4-1.4z"/></Icon>;
const Chat    = (p) => <Icon {...p}><path d="M21 12a8 8 0 0 1-11.5 7.2L4 21l1.8-5A8 8 0 1 1 21 12z"/></Icon>;
const Sparkle = (p) => <Icon {...p}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8"/></Icon>;
const Globe2  = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></Icon>;
const Workflow= (p) => <Icon {...p}><rect x="3" y="3" width="6" height="6" rx="1"/><rect x="15" y="15" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/><path d="M9 6h6M6 9v6M18 15V9"/></Icon>;

/* ---------- Data ---------- */
const segments = [
  { icon: Storefront, title: "Salon, spa & beauty owners",
    pain: "Bookings, deposits and reminders still live in your DMs.",
    gain: "A simple system that handles it for you, day and night." },
  { icon: Users, title: "Solo founders",
    pain: "You want a tech partner who listens first and explains as they build.",
    gain: "A real engineer who respects your vision, your budget and your time." },
  { icon: Building, title: "Local service businesses",
    pain: "You're juggling spreadsheets, paper forms and a thousand tabs.",
    gain: "One tidy workflow that does the busywork while you serve clients." },
  { icon: Sparkle, title: "Founders ready for AI",
    pain: "You hear about AI everywhere but don't know where to start.",
    gain: "Chatbots, AI tools and websites built for your business — in plain English." },
];

/* GenAI builds — front and center */
const aiServices = [
  {
    no: "01",
    icon: Chat,
    tag: "GenAI",
    title: "AI Chatbot for your business",
    price: "from $2,400",
    scope: "1–2 week build",
    body: "A friendly chat assistant on your website or DMs that answers questions, books clients and captures leads while you sleep.",
    bullets: [
      "Trained on your services, prices and FAQs",
      "Lives on your site or connects to Instagram",
      "Hands off to you when a real human is needed",
    ],
    cta: "Get a chatbot",
    featured: true,
  },
  {
    no: "02",
    icon: Globe2,
    tag: "AI Website",
    title: "Custom website with AI features",
    price: "from $3,200",
    scope: "1–3 week build",
    body: "A clean, professional website with AI built in — booking, smart forms, a chat helper and content that updates itself.",
    bullets: [
      "Mobile-friendly design that matches your brand",
      "AI booking assistant and contact forms",
      "Hosted on AWS, fast and secure",
    ],
    cta: "Build my website",
  },
  {
    no: "03",
    icon: Sparkle,
    tag: "AI Integration",
    title: "AI tools for your daily work",
    price: "from $4,800",
    scope: "2–4 weeks",
    body: "Add AI to the tools you already use — turn long emails into summaries, draft replies, sort documents and more.",
    bullets: [
      "Connects to Gmail, Drive, Notion or your CRM",
      "Built on AWS Bedrock so your data stays yours",
      "Trained for your voice and your industry",
    ],
    cta: "Add AI to my tools",
  },
  {
    no: "04",
    icon: Workflow,
    tag: "Workflow",
    title: "Smart workflow automation",
    price: "from $3,600",
    scope: "2–3 weeks",
    body: "The boring repeated tasks — invoices, reminders, intake forms, follow-ups — done automatically, every time.",
    bullets: [
      "Auto-send reminders, deposits and confirmations",
      "Pulls info between your apps without copy-paste",
      "You see every step in a simple dashboard",
    ],
    cta: "Automate my workflow",
  },
];

/* Cloud + advisory */
const cloudServices = [
  {
    no: "05",
    icon: Layers,
    tag: "Starter",
    title: "AWS Automation Starter",
    price: "from $4,800",
    scope: "2–4 week build",
    body: "A done-for-you setup on AWS — booking, notifications and an admin dashboard. Modeled on the K.Kouture build.",
    cta: "Start with the Starter",
  },
  {
    no: "06",
    icon: Rocket,
    tag: "Migration",
    title: "Move your business to AWS",
    price: "from $12,000",
    scope: "6–8 weeks",
    body: "Move your apps and data to AWS in steady steps. Clear costs, no surprise downtime, runbooks for your team.",
    cta: "Plan a move",
  },
  {
    no: "07",
    icon: LifeBuoy,
    tag: "Advisory",
    title: "Fractional Cloud Advisor",
    price: "from $2,400 / mo",
    scope: "monthly retainer",
    body: "A senior AWS voice in your corner. Monthly check-ins, architecture reviews and async support with a 24-hour SLA.",
    cta: "Retain an advisor",
  },
];

const processSteps = [
  { icon: Compass, title: "Discover", body: "A free 30-minute call. You tell me the bottleneck. I listen and ask questions." },
  { icon: Layers,  title: "Design",   body: "A simple plan in plain English — what we'll build, what it costs, when it ships." },
  { icon: Rocket,  title: "Build",    body: "I build it on AWS, test it with you, and walk you through every piece." },
  { icon: LifeBuoy,title: "Support",  body: "Training so your team can run it, plus a retainer if you want me on call." },
];

/* ---------- Primitives ---------- */
const Reveal = ({ as: Tag = "div", delay = 0, className = "", children, ...rest }) => {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setTimeout(() => el.classList.add("in"), delay);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    io.observe(el); return () => io.disconnect();
  }, [delay]);
  return <Tag ref={ref} className={`reveal ${className}`} {...rest}>{children}</Tag>;
};

const Eyebrow = ({ children, className = "", color = "text-roman" }) => (
  <div className={`eyebrow ${color} ${className}`}>{children}</div>
);

const BtnPrimary = ({ children, href, onClick, className = "", dark=false, ...p }) => {
  const cls = `group inline-flex items-center justify-center gap-3 rounded-full px-6 py-3.5 text-sm font-medium transition
      ${dark ? "bg-cream text-oil hover:bg-champagne" : "bg-oil text-cream hover:bg-ink"} ${className}`;
  if (href) return (
    <a href={href} target={href.startsWith("http") ? "_blank" : undefined} rel="noopener noreferrer" className={cls} {...p}>
      {children}
      <Arrow className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
    </a>
  );
  return (
    <button onClick={onClick} className={cls} {...p}>
      {children}
      <Arrow className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
    </button>
  );
};
const BtnGhost = ({ children, href, onClick, className = "", dark=false, ...p }) => {
  const cls = `inline-flex items-center justify-center gap-3 rounded-full border px-6 py-3.5 text-sm font-medium transition
      ${dark ? "border-cream/30 text-cream hover:bg-cream/10" : "border-oil/25 text-oil hover:bg-oil/5"} ${className}`;
  if (href) return <a href={href} className={cls} {...p}>{children}</a>;
  return <button onClick={onClick} className={cls} {...p}>{children}</button>;
};

/* ---------- Sections ---------- */
function Nav() {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    on(); window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  const links = [
    ["Services", "#services"],
    ["About", "#about"],
    ["Process", "#process"],
    ["Contact", "#contact"],
  ];
  return (
    <header className={`fixed inset-x-0 top-0 z-50 transition-all ${scrolled ? "bg-cream/85 backdrop-blur-md border-b border-oil/10" : "bg-transparent"}`}>
      <div className="mx-auto max-w-[1440px] px-5 sm:px-10 h-20 flex items-center justify-between">
        <a href="#top" className="flex items-baseline gap-2.5" aria-label="Techture home">
          <span className="font-display text-[24px] text-oil" style={{fontWeight:600, letterSpacing:"-0.02em"}}>Techture</span>
          <span className="hidden sm:inline text-[10px] font-mono uppercase tracking-[0.2em] text-roman">consulting</span>
        </a>
        <nav className="hidden md:flex items-center gap-10" aria-label="Primary">
          {links.map(([label, href]) => (
            <a key={href} href={href} className="text-sm text-oil/75 hover:text-oil transition">{label}</a>
          ))}
        </nav>
        <div className="flex items-center gap-3">
          <a href={BOOK_URL} target="_blank" rel="noopener noreferrer"
             className="hidden sm:inline-flex items-center gap-2 rounded-full bg-oil text-cream px-5 py-2.5 text-sm font-medium hover:bg-ink transition">
            Book a call <Arrow className="w-4 h-4" />
          </a>
          <button className="md:hidden p-2 -mr-2 text-oil" onClick={() => setOpen(v => !v)}
                  aria-label={open ? "Close menu" : "Open menu"} aria-expanded={open}>
            {open ? <XIcon /> : <Menu />}
          </button>
        </div>
      </div>
      {open && (
        <div className="md:hidden border-t border-oil/10 bg-cream/95 backdrop-blur">
          <div className="px-5 py-4 flex flex-col gap-1">
            {links.map(([label, href]) => (
              <a key={href} href={href} onClick={() => setOpen(false)} className="py-2 text-oil/80 hover:text-oil">{label}</a>
            ))}
            <a href={BOOK_URL} target="_blank" rel="noopener noreferrer" onClick={() => setOpen(false)}
               className="mt-2 inline-flex items-center justify-center gap-2 rounded-full bg-oil text-cream px-4 py-2.5 text-sm font-medium">
              Book a call <Arrow className="w-4 h-4" />
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

function Hero() {
  return (
    <section id="top" className="relative overflow-hidden">
      <div className="relative mx-auto max-w-[1440px] px-5 sm:px-10 pt-32 sm:pt-40 pb-12 sm:pb-16">
        <Reveal>
          <div className="flex items-center justify-between gap-6 pb-8 border-b border-oil/15">
            <div className="eyebrow text-roman">Jacksonville, FL — est. 2024</div>
            <div className="eyebrow text-roman hidden sm:block">AWS Certified × 3 · GenAI Pro → 2026</div>
            <div className="eyebrow text-roman hidden md:block">Jacksonville · nationwide</div>
          </div>
        </Reveal>

        <div className="relative mt-10 sm:mt-14">
          <Reveal>
            <h1 className="huge text-[17vw] sm:text-[16vw] md:text-[200px] lg:text-[240px] text-oil">
              <span className="italic font-normal" style={{fontWeight:400}}>techture</span>
            </h1>
          </Reveal>

          <div className="mt-6 md:-mt-4 grid md:grid-cols-12 gap-8 md:gap-10 items-start">
            <Reveal delay={80} className="md:col-span-5 md:col-start-1 order-2 md:order-1">
              <div className="relative">
                <div className="aspect-[4/5] rounded-sm overflow-hidden relative bg-judge">
                  <img src="img/founder-hero.png" alt="Desiree Weston, founder of Techture Consulting" className="absolute inset-0 w-full h-full object-cover" />
                  <div className="absolute inset-0 bg-gradient-to-t from-oil/60 via-oil/0 to-transparent" />
                  <div className="absolute inset-0 flex items-end p-6">
                    <div className="text-cream">
                      <div className="eyebrow text-champagne">Founder</div>
                      <div className="font-display text-2xl mt-1" style={{fontWeight:500}}>Desiree Weston</div>
                    </div>
                  </div>
                  <div className="absolute top-4 left-4 eyebrow text-champagne">est. 2024</div>
                </div>
                <div className="absolute -bottom-4 -right-4 hidden sm:block rounded-full bg-cream border border-oil/15 px-4 py-2">
                  <div className="eyebrow text-oil">AWS certified × 3 + 1</div>
                </div>
              </div>
            </Reveal>

            <Reveal delay={140} className="md:col-span-6 md:col-start-7 order-1 md:order-2">
              <p className="font-display text-2xl sm:text-3xl md:text-[34px] leading-[1.15] text-oil" style={{fontWeight:400}}>
                AI tools, websites and automation for
                <em className="italic text-honey"> small businesses </em>
                ready to grow.
              </p>
              <p className="mt-6 text-oil/70 leading-relaxed max-w-md">
                I build chatbots, AI websites and smart workflows on AWS — so you can stop chasing DMs and start running your business. No tech jargon, no enterprise prices.
              </p>
              <div className="mt-8 flex flex-wrap gap-3">
                <BtnPrimary href={BOOK_URL}>Book a free call</BtnPrimary>
              </div>

              <div className="mt-10 grid grid-cols-3 gap-3 max-w-md">
                {[
                  ["CLF-C02", "Cloud Practitioner", false],
                  ["AIF-C01", "AI Practitioner", false],
                  ["DVA-C02", "Developer Associate", false],
                  ["GenAI Pro", "GenAI Developer Pro", true],
                ].map(([code, label, soon]) => (
                  <div key={code} className={`rounded-sm border px-3 py-3 ${soon ? "border-honey/40 bg-honey/[0.06]" : "border-oil/15 bg-bone/50"}`}>
                    <div className={`font-mono text-[9px] uppercase tracking-[0.18em] ${soon ? "text-honey" : "text-roman"}`}>{soon ? "In progress" : `AWS · ${code}`}</div>
                    <div className="font-display text-[13px] mt-1 leading-tight text-oil" style={{fontWeight:500}}>{label}</div>
                    {soon && <div className="font-mono text-[9px] mt-1 text-honey">2026</div>}
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const words = ["Less busywork", "More clients", "AI that helps", "Time back", "Real growth"];
  return (
    <section aria-hidden className="border-y border-oil/15 bg-bone/60 overflow-hidden py-6 sm:py-8">
      <div className="marquee-line flex gap-8 items-center text-oil/80"
           style={{animation:"marquee 36s linear infinite"}}>
        {Array.from({length: 4}).flatMap((_, k) => words.map((w, i) => (
          <span key={`${k}-${i}`} className="flex items-center gap-8 shrink-0">
            <span className="huge text-[48px] sm:text-[64px] text-oil" style={{fontWeight:400}}>{w}</span>
            <span className="w-2 h-2 rounded-full bg-honey shrink-0" />
          </span>
        )))}
      </div>
      <style>{`@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }`}</style>
    </section>
  );
}

function WhoWeHelp() {
  return (
    <section id="who" className="relative py-24 sm:py-32">
      <div className="mx-auto max-w-[1440px] px-5 sm:px-10">
        <Reveal>
          <div className="max-w-4xl">
            <Eyebrow>Who I serve</Eyebrow>
            <h2 className="font-display mt-5 text-5xl sm:text-6xl md:text-7xl text-oil leading-[0.98]" style={{fontWeight:500, letterSpacing:"-0.025em"}}>
              For small business owners <em className="italic font-normal text-roman">who want</em> simple, smart tech that works.
            </h2>
            <p className="mt-7 text-oil/70 text-lg leading-relaxed max-w-2xl">
              I work with small business owners who want a partner who listens first, builds second, and explains everything in plain English.
            </p>
          </div>
        </Reveal>

        <div className="mt-16 grid sm:grid-cols-2 lg:grid-cols-4 gap-[1px] bg-oil/15 border border-oil/15">
          {segments.map((s, i) => (
            <Reveal key={s.title} delay={i * 60}>
              <article className="h-full bg-cream card-lift p-7 hover:bg-bone/60 group">
                <div className="flex items-start justify-between">
                  <s.icon className="w-6 h-6 text-honey" />
                  <span className="font-mono text-[10px] uppercase tracking-[0.18em] text-roman">0{i+1} / 04</span>
                </div>
                <h3 className="font-display text-2xl mt-10 leading-[1.1] text-oil" style={{fontWeight:500}}>{s.title}</h3>
                <p className="mt-4 text-sm text-oil/65 leading-relaxed">{s.pain}</p>
                <div className="mt-6 pt-5 border-t border-oil/15">
                  <div className="eyebrow text-honey">What you get</div>
                  <p className="mt-2 text-sm text-oil/85 leading-relaxed">{s.gain}</p>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ s, dark = false }) {
  const featured = s.featured;
  return (
    <article className={`card-lift relative h-full p-8 sm:p-10 rounded-sm border
      ${featured ? "bg-oil text-cream border-oil"
        : dark ? "bg-cream border-oil/15 hover:border-oil/40"
        : "bg-cream border-oil/15 hover:border-oil/40"}`}>
      {featured && (
        <div className="absolute top-6 right-6 eyebrow text-champagne flex items-center gap-2">
          <Star className="w-3.5 h-3.5" /> Most booked
        </div>
      )}
      <div className={`flex items-baseline justify-between ${featured ? "text-cream/70" : "text-roman"}`}>
        <span className="font-mono text-[10px] uppercase tracking-[0.2em]">{s.no} · {s.tag}</span>
        <span className="font-mono text-xs">{s.scope}</span>
      </div>
      <div className="mt-6 flex items-start gap-4">
        <div className={`w-11 h-11 rounded-sm flex items-center justify-center shrink-0 ${featured ? "bg-cream/10" : "bg-bone/80"}`}>
          <s.icon className={`w-5 h-5 ${featured ? "text-champagne" : "text-honey"}`} />
        </div>
        <h3 className={`font-display text-3xl sm:text-[36px] leading-[1.02] ${featured ? "text-cream" : "text-oil"}`} style={{fontWeight:500}}>
          {s.title}
        </h3>
      </div>
      <div className={`mt-3 font-display text-lg italic ${featured ? "text-champagne" : "text-honey"}`}>
      </div>
      <p className={`mt-5 leading-relaxed ${featured ? "text-cream/80" : "text-oil/70"}`}>{s.body}</p>
      {s.bullets && (
        <ul className="mt-6 space-y-3">
          {s.bullets.map(b => (
            <li key={b} className={`flex gap-3 text-sm leading-relaxed ${featured ? "text-cream/90" : "text-oil/85"}`}>
              <span className={`shrink-0 mt-[8px] w-3 h-px ${featured ? "bg-champagne" : "bg-honey"}`}></span>
              <span>{b}</span>
            </li>
          ))}
        </ul>
      )}
      <div className="mt-7">
        <a href={BOOK_URL} target="_blank" rel="noopener noreferrer"
           className={`group inline-flex items-center gap-2 text-sm font-medium transition ${featured ? "text-cream hover:text-champagne" : "text-oil hover:text-honey"}`}>
          {s.cta} <Arrow className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
        </a>
      </div>
    </article>
  );
}

function Services() {
  return (
    <section id="services" className="relative py-24 sm:py-32 bg-bone/60 border-y border-oil/10">
      <div className="mx-auto max-w-[1440px] px-5 sm:px-10">
        {/* GenAI Builds */}
        <div className="grid lg:grid-cols-12 gap-10 items-end">
          <Reveal className="lg:col-span-8">
            <Eyebrow>Services · GenAI builds</Eyebrow>
            <h2 className="font-display mt-5 text-5xl sm:text-6xl md:text-7xl text-oil leading-[0.98]" style={{fontWeight:500, letterSpacing:"-0.025em"}}>
              AI that <em className="italic font-normal text-roman">works for</em> your business — not the other way around.
            </h2>
          </Reveal>
          <Reveal delay={100} className="lg:col-span-4">
            <p className="text-oil/70 leading-relaxed max-w-sm">
              Chatbots, AI-powered websites, smart tools and workflow automation — built for the way real small businesses actually run.
            </p>
          </Reveal>
        </div>

        <div className="mt-14 grid md:grid-cols-2 gap-5">
          {aiServices.map((s, i) => (
            <Reveal key={s.title} delay={i * 70} className={s.featured ? "md:col-span-2" : ""}>
              <ServiceCard s={s} />
            </Reveal>
          ))}
        </div>

      </div>
    </section>
  );
}

function BookBanner() {
  return (
    <section className="relative py-24 sm:py-32 bg-oil text-cream overflow-hidden grain">
      <div className="mx-auto max-w-[1440px] px-5 sm:px-10">
        <div className="grid lg:grid-cols-12 gap-10 items-center">
          <div className="lg:col-span-8">
            {[0, 1, 2].map(i => (
              <Reveal key={i} delay={i * 80}>
                <div className={`huge text-[18vw] md:text-[180px] ${i === 1 ? "italic text-honey pl-[8vw]" : i === 2 ? "text-cream/20" : "text-cream"}`}
                     style={{fontWeight:400, lineHeight:0.86}}>
                  Book with us
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={200} className="lg:col-span-4">
            <div className="relative">
              <div className="aspect-[3/4] rounded-sm overflow-hidden relative bg-judge">
                <img src="img/founder-working.jpeg" alt="Desiree Weston" className="absolute inset-0 w-full h-full object-cover" />
                <div className="absolute inset-0 bg-gradient-to-t from-oil/55 via-transparent to-transparent" />
                <div className="absolute inset-0 flex items-end p-5">
                  <div className="text-cream">
                    <div className="eyebrow text-champagne">Your engineer</div>
                    <div className="font-display text-xl mt-1" style={{fontWeight:500}}>Desiree Weston</div>
                  </div>
                </div>
              </div>
              <div className="mt-6">
                <p className="text-cream/80 leading-relaxed max-w-sm">
                  Thirty free minutes. You tell me what's slowing you down. I tell you exactly how I'd fix it. No pressure, no pitch deck.
                </p>
                <div className="mt-6">
                  <BtnPrimary href={BOOK_URL} dark>Go to booking page</BtnPrimary>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section id="about" className="relative py-24 sm:py-32 bg-bone/60 border-y border-oil/10">
      <div className="mx-auto max-w-[1440px] px-5 sm:px-10">
        <Reveal>
          <div className="text-center max-w-5xl mx-auto">
            <Eyebrow>Meet the founder</Eyebrow>
            <h2 className="huge text-[18vw] md:text-[180px] mt-4 text-oil" style={{fontWeight:500}}>
              desiree
            </h2>
            <div className="huge text-[12vw] md:text-[120px] -mt-2 italic text-honey" style={{fontWeight:400}}>
              weston
            </div>
          </div>
        </Reveal>

        <div className="mt-16 grid lg:grid-cols-12 gap-10 items-start">
          <Reveal className="lg:col-span-5">
            <div className="relative">
              <div className="aspect-[4/5] rounded-sm overflow-hidden relative bg-judge">
                <img src="img/founder-meet.jpeg" alt="Desiree Weston portrait" className="absolute inset-0 w-full h-full object-cover" />
                <div className="absolute inset-0 bg-gradient-to-t from-oil/55 via-transparent to-transparent" />
                <div className="absolute inset-0 flex items-end p-6">
                  <div className="text-cream">
                    <div className="eyebrow text-champagne">Cloud &amp; AI Engineer</div>
                    <div className="font-display text-2xl mt-1" style={{fontWeight:500}}>Jacksonville, FL</div>
                  </div>
                </div>
              </div>
              <div className="absolute -bottom-5 -right-5 hidden sm:block rounded-full bg-honey text-cream px-5 py-2.5 font-display italic"
                   style={{fontWeight:400}}>
                your trusted AWS tech
              </div>
            </div>
          </Reveal>

          <Reveal delay={100} className="lg:col-span-7">
            <p className="font-display text-2xl sm:text-3xl leading-[1.25] text-oil" style={{fontWeight:400}}>
              Hi, I'm Desiree. I build technology giving small business owners their <em className="italic text-honey">time back.</em> No tech jargon. No “trust me it works.” Systems doing the boring work so you focus on the parts of your business you love.
            </p>
            <div className="mt-8 space-y-6 text-oil/80 leading-relaxed">
              <div>
                <div className="eyebrow text-roman">How I got here</div>
                <p className="mt-3">
                  I spent over two decades in accounting and enterprise software before pivoting into cloud and AI engineering after 40. So when you talk about your business, I hear the operations side and the technical side at the same time. I read your P&amp;L with the same focus I read your architecture diagram. I know what a slow customer intake form costs you in real dollars.
                </p>
              </div>
              <div>
                <div className="eyebrow text-roman">The credentials</div>
                <p className="mt-3">
                  AWS Cloud Practitioner, AI Practitioner and Developer Associate certified, with the AWS Generative AI Developer Professional exam scheduled for Summer 2026. Those matter to other engineers. What matters to you is I build things the right way the first time. Secure, scalable and built so you are not paying someone else to rebuild it in 18 months.
                </p>
              </div>
              <div>
                <div className="eyebrow text-roman">What I am building now</div>
                <p className="mt-3">
                  <strong className="font-medium text-oil">Mela-Money</strong>, an AI platform helping Black women founders find SBA grants and federal certifications faster. Same care I bring to your business. Real problems. Real solutions. Built to last.
                </p>
              </div>
              <div>
                <div className="eyebrow text-roman">What you get when we work together</div>
                <p className="mt-3">
                  An engineer who speaks fluent business owner. The kind who explains tech in plain English, asks about your goals before your tools and treats your budget like the receipts it is.
                </p>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Process() {
  return (
    <section id="process" className="relative py-24 sm:py-32">
      <div className="mx-auto max-w-[1440px] px-5 sm:px-10">
        <Reveal>
          <div className="max-w-3xl">
            <Eyebrow>How we work</Eyebrow>
            <h2 className="font-display mt-5 text-5xl sm:text-6xl md:text-7xl text-oil leading-[0.98]" style={{fontWeight:500, letterSpacing:"-0.025em"}}>
              Four simple steps. <em className="italic text-roman">No surprises</em> on the invoice.
            </h2>
          </div>
        </Reveal>

        <div className="mt-16 grid md:grid-cols-2 lg:grid-cols-4 gap-[1px] bg-oil/15 border border-oil/15">
          {processSteps.map((s, i) => (
            <Reveal key={s.title} delay={i * 70}>
              <div className="h-full bg-cream p-8 hover:bg-bone/70 transition">
                <div className="flex items-start justify-between">
                  <div className="font-display text-5xl text-honey" style={{fontWeight:500, fontStyle:"italic"}}>
                    0{i+1}
                  </div>
                  <s.icon className="w-6 h-6 text-oil/60" />
                </div>
                <h3 className="font-display text-3xl mt-10 text-oil" style={{fontWeight:500}}>{s.title}</h3>
                <p className="mt-4 text-sm text-oil/70 leading-relaxed">{s.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    console.log("email capture:", email);
    setSent(true);
    setTimeout(() => setSent(false), 2400);
    setEmail("");
  };
  return (
    <section id="book" className="relative py-24 sm:py-32">
      <div className="mx-auto max-w-[1440px] px-5 sm:px-10">
        <div className="grid lg:grid-cols-12 gap-10 items-start">
          <Reveal className="lg:col-span-7">
            <Eyebrow>Let's build</Eyebrow>
            <h2 className="huge text-[14vw] md:text-[144px] mt-5 text-oil leading-[0.88]" style={{fontWeight:500}}>
              Leave with <em className="italic text-honey">a plan,</em><br/>
              not a <em className="italic">quote.</em>
            </h2>
            <p className="mt-8 text-oil/70 text-lg leading-relaxed max-w-xl">
              Thirty free minutes. You tell me what's slowing you down. I tell you exactly how I'd fix it. No pressure, no pitch deck.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <BtnPrimary href={BOOK_URL}>Book a free call</BtnPrimary>
              <a href={`mailto:${EMAIL}`}
                 className="inline-flex items-center gap-2 rounded-full border border-oil/25 px-5 py-3.5 text-sm font-medium text-oil hover:bg-oil hover:text-cream transition">
                <Mail className="w-4 h-4" /> {EMAIL}
              </a>
            </div>
          </Reveal>

          <Reveal delay={120} className="lg:col-span-5">
            <form onSubmit={onSubmit} className="rounded-sm border border-oil/15 bg-bone/60 p-8">
              <div className="eyebrow text-roman">Not ready yet?</div>
              <div className="font-display text-2xl mt-3 text-oil leading-tight" style={{fontWeight:500}}>
                Get the <em className="italic text-honey">small business AI</em> playbook.
              </div>
              <p className="mt-3 text-sm text-oil/65 leading-relaxed">
                One email. Real examples, plain-English explanations, and where to start with AI in your business.
              </p>
              <div className="mt-6 flex flex-col gap-2">
                <label htmlFor="lead-email" className="eyebrow text-roman">Email</label>
                <input id="lead-email" type="email" required value={email}
                       onChange={(e) => setEmail(e.target.value)}
                       placeholder="you@yourbusiness.com"
                       aria-label="Email address"
                       className="w-full rounded-full bg-cream border border-oil/20 px-5 py-3 text-sm text-oil placeholder:text-oil/35 focus:border-honey outline-none transition" />
                <button type="submit"
                  className="mt-2 inline-flex items-center justify-center gap-2 rounded-full bg-oil text-cream px-5 py-3 text-sm font-medium hover:bg-ink transition">
                  {sent ? <>Sent <Check className="w-4 h-4" /></> : <>Send me the playbook <Arrow className="w-4 h-4" /></>}
                </button>
              </div>
            </form>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer id="contact" className="relative bg-oil text-cream pt-24 pb-10 grain">
      <div className="mx-auto max-w-[1440px] px-5 sm:px-10">
        <Reveal>
          <div className="huge text-[22vw] md:text-[220px] leading-[0.86] text-cream/95" style={{fontWeight:500}}>
            techture.
          </div>
        </Reveal>

        <div className="mt-16 grid lg:grid-cols-[1.4fr_1fr_1fr_1fr] gap-10">
          <div>
            <Eyebrow color="text-champagne">Consulting LLC</Eyebrow>
            <p className="mt-4 text-cream/70 leading-relaxed max-w-sm">
              AI tools, websites and AWS automation for small businesses ready to grow. Based in Jacksonville, FL. Serving clients nationwide.
            </p>
            <div className="mt-6 flex items-center gap-3">
              {[
                [Instagram, "Instagram"],
                [Linkedin, "LinkedIn"],
              ].map(([I, label]) => (
                <a key={label} href="#" aria-label={label}
                   onClick={(e)=>{e.preventDefault();console.log(label);}}
                   className="w-10 h-10 rounded-full border border-cream/20 flex items-center justify-center hover:bg-cream hover:text-oil transition">
                  <I />
                </a>
              ))}
            </div>
          </div>

          <div>
            <Eyebrow color="text-champagne">Services</Eyebrow>
            <ul className="mt-4 space-y-2.5 text-sm text-cream/75">
              <li><a href="#services" className="hover:text-cream">AI Chatbots</a></li>
              <li><a href="#services" className="hover:text-cream">AI Websites</a></li>
              <li><a href="#services" className="hover:text-cream">AI Tools & Workflows</a></li>
              <li><a href="#services" className="hover:text-cream">AWS Automation</a></li>
              <li><a href="#services" className="hover:text-cream">Fractional Advisor</a></li>
            </ul>
          </div>
          <div>
            <Eyebrow color="text-champagne">Company</Eyebrow>
            <ul className="mt-4 space-y-2.5 text-sm text-cream/75">
              <li><a href="#about" className="hover:text-cream">About</a></li>
              <li><a href="#process" className="hover:text-cream">Process</a></li>
              <li><a href={BOOK_URL} target="_blank" rel="noopener noreferrer" className="hover:text-cream">Book a call</a></li>
            </ul>
          </div>
          <div>
            <Eyebrow color="text-champagne">Contact</Eyebrow>
            <ul className="mt-4 space-y-2.5 text-sm text-cream/75">
              <li><a href={`mailto:${EMAIL}`} className="hover:text-cream">{EMAIL}</a></li>
              <li>Jacksonville, FL</li>
              <li className="text-cream/55">Mon–Fri · 9a–6p ET</li>
            </ul>
          </div>
        </div>

        <div className="mt-20 pt-6 border-t border-cream/15 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 text-xs text-cream/50">
          <div>© 2026 Techture Consulting LLC. All rights reserved.</div>
          <div className="font-mono tracking-[0.1em] uppercase">Jacksonville, FL · Serving nationwide</div>
        </div>
      </div>
    </footer>
  );
}

function App() {
  return (
    <div className="font-sans">
      <Nav />
      <main>
        <Hero />
        <Marquee />
        <WhoWeHelp />
        <Services />
        <BookBanner />
        <About />
        <Process />
        <FinalCTA />
      </main>
      <Footer />
    </div>
  );
}

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