/* global React, ReactDOM */
const { useState, useEffect, useRef, useCallback } = React;

/* ─────── HEADER ─────── */
function Header({ onOpenLang, currentLang }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={"header" + (scrolled ? " header--scrolled" : "")}>
      <div className="wrap header__inner">
        <a href="#top" className="logo" data-cursor="hover" aria-label="Alcazaba home">
          <span className="logo__mark" aria-hidden="true"></span>
          <span>Alcazaba</span>
        </a>
        <nav className="nav" aria-label="Primary">
          <a href="#about" data-cursor="hover">About</a>
          <a href="#services" data-cursor="hover">Services</a>
          <a href="#industries" data-cursor="hover">Industries</a>
          <a href="#faq" data-cursor="hover">FAQ</a>
          <a href="#contact" data-cursor="hover">Contact</a>
        </nav>
        <div className="header__right">
          <a className="btn btn--ghost btn--sm" href="#contact" data-cursor="hover">
            Get in touch <ArrowIcon />
          </a>
        </div>
      </div>
    </header>
  );
}

/* ─────── LANGUAGE SHEET ─────── */
function LangSheet({ open, onClose, lang, setLang }) {
  useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    if (open) document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, onClose]);
  return (
    <>
      <div className={"lang-sheet-overlay" + (open ? " is-open" : "")} onClick={onClose}></div>
      <div className={"lang-sheet" + (open ? " is-open" : "")} role="dialog" aria-label="Choose language">
        <div className="lang-sheet__title">Language</div>
        <div className="lang-list">
          {window.ALCAZABA_LANGS.map((l) => (
            <button
              key={l.code}
              className={lang === l.code ? "is-active" : ""}
              onClick={() => { setLang(l.code); onClose(); }}
              data-cursor="hover"
            >
              <span>
                <span style={{ display: "block", fontSize: 14 }}>{l.name}</span>
                <span className="code">{l.code} · {l.note}</span>
              </span>
              {lang === l.code && <CheckIcon />}
            </button>
          ))}
        </div>
        <div className="lang-note">
          <SparkleIcon /> Translations are AI-assisted. English is the source of truth.
        </div>
      </div>
    </>
  );
}

/* ─────── HERO ─────── */
function Hero() {
  const auroraRef = useRef(null);
  const panelRef = useRef(null);
  useEffect(() => {
    const onMove = (e) => {
      const x = (e.clientX / window.innerWidth - 0.5);
      const y = (e.clientY / window.innerHeight - 0.5);
      if (auroraRef.current) {
        auroraRef.current.style.transform = `translate3d(${x * -30}px, ${y * -20}px, 0)`;
      }
      if (panelRef.current) {
        panelRef.current.style.transform = `rotateY(${x * 8}deg) rotateX(${y * -6}deg)`;
      }
    };
    const onScroll = () => {
      if (auroraRef.current) {
        auroraRef.current.style.opacity = Math.max(0.15, 0.55 - window.scrollY / 1200);
      }
    };
    window.addEventListener("mousemove", onMove);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => {
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("scroll", onScroll);
    };
  }, []);
  return (
    <section className="hero" id="top">
      <div className="hero__aurora" ref={auroraRef}>
        <div className="blob b1"></div>
        <div className="blob b2"></div>
        <div className="blob b3"></div>
      </div>
      <div className="hero__grid"></div>
      <div className="wrap hero__inner">
        <div className="hero__badge reveal in">
          <span className="pill">New</span>
          <span>Now offering advanced software development and AI-powered solutions</span>
        </div>
        <h1 className="h-display hero__title reveal in" data-delay="1">
          Capital, code, and<br/>strategy — <em>compounding</em><br/>for the long view.
        </h1>
        <p className="hero__sub reveal in" data-delay="2">
          Spain-based, globally connected.
          We partner with ambitious companies to finance, build, and scale the systems 
          that propel their business forward. From strategic advisory and capital deployment 
          to marketing that converts  and software that performs — we're the engine behind growth 
          across capital, capability, and go-to-market.
        </p>
        <div className="hero__cta reveal in" data-delay="3">
          <a className="btn btn--primary btn--lg" href="#contact" data-cursor="hover">
            Start a conversation <ArrowIcon />
          </a>
          <a className="btn btn--ghost btn--lg" href="#services" data-cursor="hover">
            Explore services
          </a>
        </div>

        <div className="hero__panel" aria-hidden="true">
          <div className="hero__panel-inner" ref={panelRef}>
            <div className="float-card fc1">
              <div className="fc-row"><span className="fc-dot"></span> ARR forecast / Q3</div>
              <div className="fc-num" style={{ marginTop: 12 }}>€ 4.82M</div>
              <div className="fc-bar" style={{ marginTop: 12 }}><i style={{ width: "72%" }}></i></div>
              <div className="fc-row" style={{ marginTop: 10 }}>vs plan +12.4%</div>
            </div>
            <div className="float-card fc2">
              <div className="fc-row"><span className="fc-dot"></span> Deploy · main</div>
              <div className="fc-row" style={{ marginTop: 8 }}>build #1284 · 41s</div>
              <div className="fc-row">tests passed · 0 errors</div>
              <div className="fc-bar" style={{ marginTop: 10 }}><i style={{ width: "100%" }}></i></div>
            </div>
            <div className="float-card fc3">
              <div className="fc-row"><span className="fc-dot"></span> Conversion</div>
              <div className="fc-num" style={{ marginTop: 8 }}>3.41%</div>
            </div>
          </div>
        </div>

        <div className="hero__meta reveal in" data-delay="3">
          <div><div className="num">45+</div><div className="lbl">Years of combined experience in finance, marketing & software</div></div>
          <div><div className="num">€2.1 Billion</div><div className="lbl">In corporate and project finance transactions</div></div>
          <div><div className="num">5</div><div className="lbl">Languages, in-house</div></div>
          <div><div className="num">40</div><div className="lbl">Countries served</div></div>
        </div>
      </div>
    </section>
  );
}

/* ─────── ABOUT ─────── */
function About() {
  return (
    <section className="section" id="about">
      <div className="wrap">
        <div className="about-grid">
          <div>
            <span className="eyebrow reveal">About Alcazaba</span>
            <h2 className="h-1 reveal" data-delay="1" style={{ marginTop: 20 }}>
              We work like a small team of partners — not a firm with billable targets.
            </h2>
            <p className="lead reveal" data-delay="2" style={{ marginTop: 24 }}>
              Most of our clients come to us because they're tired of being passed
              between specialists who don't talk to each other. We sit at the seam between
              technology, operations, and capital — and we stay there with you, from the
              first whiteboard to the platform that runs the business five years on.
            </p>
            <p className="reveal" data-delay="3" style={{ marginTop: 16, color: "var(--fg-muted)", maxWidth: "60ch" }}>
              Spain is home. The work is global. We speak English, Spanish, Portuguese,
              French, and Arabic — so you can communicate the way you feel the most comfortable.
            </p>
          </div>
          <div className="value-list">
            <div className="reveal">
              <div className="ix">01</div>
              <h4>One team, two disciplines</h4>
              <p>Engineers, finance and marketing partners on every engagement — no handoffs, no telephone game.</p>
            </div>
            <div className="reveal" data-delay="1">
              <div className="ix">02</div>
              <h4>Outcomes over hours</h4>
              <p>We propose fixed-fee, retainer, or success-based pricing — whichever is most honest for the work.</p>
            </div>
            <div className="reveal" data-delay="2">
              <div className="ix">03</div>
              <h4>Pilot, then scale</h4>
              <p>Engagements start with a small, scoped phase. We earn the next one — we don't lock you in.</p>
            </div>
            <div className="reveal" data-delay="3">
              <div className="ix">04</div>
              <h4>Quietly senior</h4>
              <p>The people you meet in the first call are the people doing the work. No bait-and-switch.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────── SERVICES ─────── */
// Services data - defined once outside the component
const SERVICES_DATA = [
  {
    id: "software",
    num: "01",
    label: "Software",
    title: "Software development",
    blurb: "Full-lifecycle technology services — from headless commerce and mobile apps to enterprise systems and Web3. Built by engineers who care about the long view.",
    tags: ["E-commerce", "Mobile", "ERP/CRM", "Web3", "APIs"],
    items: [
      { t: "E-commerce & marketplace development", d: "B2B, B2C, D2C platforms; multi-vendor marketplaces; headless commerce in React, Vue, Next.js; PWAs; custom POS; Shopify, WooCommerce, Magento extensions." },
      { t: "Mobile app development", d: "Native Android/iOS, cross-platform Flutter & React Native, hybrid apps. Retail POS, booking, delivery, and commerce mobile experiences." },
      { t: "Enterprise software (ERP, CRM, HRM)", d: "Odoo implementation, migration, customisation; Krayin and multi-CRM integrations; HRM systems; warehouse management; custom enterprise modules." },
      { t: "PIM & data solutions", d: "Akeneo and Pimcore integration and development; master data management; centralised product data synchronised across every channel." },
      { t: "API, integrations & connectors", d: "REST API design; omni-channel connectors; payment gateways; shipping & 3PL integration; multi-system data orchestration." },
      { t: "Blockchain & Web3", d: "NFT marketplaces; crypto wallet integration; smart contracts; tokenisation platforms; decentralised application architecture." },
      { t: "Open-source & custom modules", d: "Contribution to and customisation of Bagisto, Krayin, UVDesk, UnoPim, Aureus ERP; custom plugins, modules, and SaaS solutions." },
      { t: "UI/UX design & frontend engineering", d: "User research, conversion-focused interface design, headless frontends in React, Next.js, Vue.js; landing pages and corporate sites." },
      { t: "Consulting, support & maintenance", d: "Technology stack advisory, architecture design, platform selection; ongoing support, performance optimisation, version upgrades." }
    ]
  },
  {
    id: "finance",
    num: "02",
    label: "Financial advisory",
    title: "Financial advisory",
    blurb: "Expert guidance for private enterprises and public institutions — corporate finance, M&A, and project finance for infrastructure and renewables.",
    tags: ["Corporate finance", "M&A", "Project finance", "Valuation", "Due diligence"],
    items: [
      { t: "Financial modeling & projections", d: "Robust, dynamic financial models for business planning, fundraising, and strategic decision-making." },
      { t: "Budgeting, forecasting & financial planning", d: "Comprehensive budgets, rolling forecasts, and long-term financial plans tailored to your operations." },
      { t: "M&A advisory (private companies)", d: "End-to-end support on mergers, acquisitions, and sales of privately held SMEs — target identification, negotiation, structuring." },
      { t: "Business valuation", d: "Independent valuation of private companies for M&A, shareholder planning, or internal strategy." },
      { t: "Financial & accounting analysis", d: "Diagnostic reviews of financial statements, performance metrics, and accounting policies to surface insights and improve reporting." },
      { t: "Capital structure & strategic advisory", d: "Optimal debt/equity mix, refinancing strategies, and long-term capital planning for sustained growth." },
      { t: "Financial due diligence", d: "Buy-side and sell-side investigations to support informed transaction decisions, identifying risks and opportunities." },
      { t: "Commercial contract review", d: "Analysis and negotiation of financial clauses, pricing models, and commercial terms in business contracts." },
      { t: "Cash flow & working capital", d: "Practical strategies to optimise cash conversion cycles, liquidity, and operational efficiency." },
      { t: "Post-merger integration", d: "Financial and operational integration planning to ensure a seamless transition and realisation of deal synergies." },
      { t: "Project finance modeling", d: "Specialised models for solar, wind, waste-to-energy and other infrastructure — covering construction, operation, and refinancing phases." },
      { t: "Project feasibility & viability", d: "Assessment of technical, commercial, and financial viability of greenfield and brownfield projects." },
      { t: "PPP & concession structuring", d: "Public-private partnership frameworks, concession models, and risk allocation for infrastructure initiatives." },
      { t: "Infrastructure M&A & asset rotation", d: "Buy-side and sell-side advisory for project portfolios — solar parks, waste treatment, and other real-asset transactions." },
      { t: "SPA & project contract review", d: "Review and negotiation of PPAs, EPC, O&M, and concession agreements from a commercial and financial perspective." },
      { t: "Refinancing & restructuring", d: "Analysis and execution support for the refinancing or restructuring of corporate or project debt." }
    ]
  },
  {
    id: "marketing",
    num: "03",
    label: "Sales & marketing",
    title: "Sales & marketing advisory",
    blurb: "Strategic consulting to drive customer acquisition, conversion, and revenue growth across digital and traditional channels.",
    tags: ["Digital strategy", "CRO", "Brand", "Lead gen", "Analytics"],
    items: [
      { t: "Digital marketing strategy & execution", d: "Data-driven plans across SEO, SEM, paid social, display, and programmatic — with clear ROI tracking." },
      { t: "Landing pages & CRO", d: "Creation, A/B testing, and continuous improvement of landing and product pages to lift conversion and AOV." },
      { t: "Market research & competitive analysis", d: "In-depth analysis of market trends, customer segments, and competitor positioning to inform go-to-market." },
      { t: "Customer experience & journey design", d: "Mapping end-to-end customer journeys, identifying friction, and designing seamless, high-converting experiences." },
      { t: "Multi-channel & marketplace strategy", d: "Selling across Amazon, eBay, Fnac, social commerce, and omnichannel retail integration." },
      { t: "Brand strategy & positioning", d: "Brand identity, value proposition, messaging architecture, and positioning for B2C and B2B markets." },
      { t: "Content marketing & inbound", d: "Planning and execution of blogs, videos, and whitepapers to attract, engage, and convert target audiences." },
      { t: "Lead generation & nurturing", d: "Lead capture mechanisms, email automation sequences, and scoring models to build and qualify pipeline." },
      { t: "CRM strategy & sales enablement", d: "CRM utilisation, sales process mapping, pipeline management, and sales team training to lift conversion." },
      { t: "Pricing & promotional strategy", d: "Pricing models, discount structures, and promotional calendars to optimise margin and lifetime value." },
      { t: "Marketing analytics & attribution", d: "Analytics frameworks, KPI dashboards, and multi-touch attribution models to guide investment." },
      { t: "Influencer & affiliate marketing", d: "Strategy for engaging and managing influencer partnerships and affiliate programmes to extend reach." }
    ]
  },
  {
    id: "ecommerce",
    num: "04",
    label: "E-commerce ops",
    title: "E-commerce advisory",
    blurb: "Operations & technology consulting to build, integrate, and manage the digital backbone of your online business.",
    tags: ["Platform selection", "Integrations", "3PL", "Migration", "Automation"],
    items: [
      { t: "Platform selection & implementation", d: "Choosing and deploying the right e-commerce solution — Shopify, WooCommerce, Magento, PrestaShop, or custom — and essential payment gateways." },
      { t: "Digital infrastructure & CMS setup", d: "Content management systems, hosting, and scalable architecture for high-performance online stores." },
      { t: "Inventory & order management", d: "Inventory control, demand forecasting, and order processing solutions to ensure operational efficiency." },
      { t: "ERP & CRM selection & integration", d: "Choosing, configuring, and integrating Odoo, SAP, Microsoft Dynamics, Salesforce — tailored to back-office and customer data needs." },
      { t: "3PL scouting & integration", d: "Identification, vetting, and technical integration of 3PL partners for warehousing, fulfilment, returns, and last-mile delivery." },
      { t: "Migration & replatforming", d: "Seamless migrations between e-commerce platforms or from on-premise to cloud — minimising downtime and data loss." },
      { t: "Automation & process optimisation", d: "Workflow automation for order processing, invoicing, inventory syncing, and customer notifications." }
    ]
  }
];

function Services() {
  const [activeId, setActiveId] = React.useState(SERVICES_DATA[0].id);
  const [forceKey, setForceKey] = React.useState(0);

  const current = SERVICES_DATA.find(s => s.id === activeId);
  if (!current) return null;

  const handleTabClick = (id) => {
    setActiveId(id);
    // Force a complete re-render by changing the key after state updates
    setForceKey(prev => prev + 1);
  };

  return (
    <section className="section" id="services">
      <div className="wrap">
        <div className="services-head reveal">
          <div>
            <span className="eyebrow">What we do</span>
            <h2 className="h-1" style={{ marginTop: 20 }}>Four practices.<br/>One coordinated team.</h2>
          </div>
          <p className="lead" style={{ maxWidth: "44ch" }}>
            Pick a practice to explore. Most engagements span more than one — that's
            usually where the real leverage lives.
          </p>
        </div>

        <div className="services-tabs reveal" data-delay="1">
          {SERVICES_DATA.map(s => (
            <button
              key={s.id}
              className={"services-tab" + (activeId === s.id ? " is-active" : "")}
              onClick={() => handleTabClick(s.id)}
              data-cursor="hover"
            >
              <span className="tab-num">{s.num}</span>
              <span>{s.label}</span>
            </button>
          ))}
        </div>

        {/* The key={forceKey} makes React throw away the old panel and create a new one */}
        <div key={forceKey} className="service-panel reveal" data-delay="2">
          <div className="service-summary">
            <span className="eyebrow">Practice {current.num}</span>
            <h3>{current.title}</h3>
            <p>{current.blurb}</p>
            <div className="tag-row">
              {current.tags.map(t => <span key={t} className="service-tag">{t}</span>)}
            </div>
          </div>
          <div className="subservice-list">
            {current.items.map((item, i) => (
              <div className="subservice" key={item.t}>
                <span className="num">{String(i + 1).padStart(2, "0")}</span>
                <div>
                  <h5>{item.t}</h5>
                  <p>{item.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
/* ─────── INDUSTRIES ─────── */
function Industries() {
  return (
    <section className="section" id="industries">
      <div className="wrap">
        <div style={{ marginBottom: 48, maxWidth: "60ch" }} className="reveal">
          <span className="eyebrow">Industries we serve</span>
          <h2 className="h-1" style={{ marginTop: 20 }}>Where our work tends to land.</h2>
        </div>
        <div className="industries">
          {window.ALCAZABA_INDUSTRIES.map((it, i) => (
            <div className="industry reveal" data-delay={Math.min(4, i % 4)} key={it.ix}>
              <div className="ix">{it.ix}</div>
              <div>
                <h4>{it.t}</h4>
                <p>{it.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────── FAQ ─────── */
function FAQ() {
  const faqs = window.ALCAZABA_FAQ;

  if (!faqs) return null;

  return (
    <section className="section" id="faq">
      <div className="wrap" style={{ maxWidth: 980 }}>
        <div className="reveal" style={{ marginBottom: 40 }}>
          <span className="eyebrow">FAQ</span>
          <h2 className="h-1" style={{ marginTop: 20 }}>Common questions, answered honestly.</h2>
        </div>
        <div className="faq-list">
          {faqs.map((f, idx) => (
            <div key={idx} className="faq-item reveal">
              <div className="faq-q-static">
                <span>{f.q}</span>
              </div>
              <div className="faq-a-static">
                <p>{f.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
/* ─────── CONTACT ─────── */
const SERVICE_INTERESTS = [
  { id: "finance", label: "Financial advisory" },
  { id: "software", label: "Software development" },
  { id: "ecommerce", label: "E-commerce" },
  { id: "marketing", label: "Sales & marketing" }
];

function Contact() {
  const [form, setForm] = useState({
    name: "", email: "", phone: "", subject: "", message: "",
    interests: []
  });
  const [submitted, setSubmitted] = useState(false);
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const toggleInterest = (id) => {
    const has = form.interests.includes(id);
    setForm({ ...form, interests: has ? form.interests.filter((x) => x !== id) : [...form.interests, id] });
  };
 const onSubmit = async (e) => {
    e.preventDefault();
    try {
      const r = await fetch('/api/lead', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (!r.ok) throw new Error('Submit failed');
      setSubmitted(true);
      setTimeout(() => {
        setSubmitted(false);
        setForm({ name: "", email: "", phone: "", subject: "", message: "", interests: [] });
      }, 4500);
    } catch (err) {
      console.error(err);
      alert('Sorry, something went wrong. Please try emailing us directly.');
    }
  };
  return (
    <section className="section contact" id="contact">
      <div className="wrap contact-inner">
        <div className="contact-side">
          <span className="eyebrow reveal">Contact</span>
          <h2 className="h-1 reveal" data-delay="1">Tell us what you're working on.</h2>
          <p className="reveal" data-delay="2">
            Most messages get a reply from a partner within one business day. If it's
            urgent, the messengers below are watched live during EU working hours.
          </p>
          <div className="messenger-row reveal" data-delay="3">
            <a className="messenger-link wa" href="https://wa.me/34000000000" target="_blank" rel="noopener" data-cursor="hover">
              <WhatsAppIcon /> WhatsApp
            </a>
            <a className="messenger-link signal" href="https://signal.me/#p/+34000000000" target="_blank" rel="noopener" data-cursor="hover">
              <SignalIcon /> Signal
            </a>
          </div>
          <div className="reveal" data-delay="4" style={{ marginTop: 40, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-dim)", lineHeight: 1.7 }}>
            <div>ALCAZABA · MELILLA, SPAIN</div>
            <div>contact@alcazaba.me</div>
          </div>
        </div>
        <form className="contact-card reveal" data-delay="2" onSubmit={onSubmit}>
          {submitted ? (
            <div className="contact-success">
              <div className="ok-mark"><CheckIcon /></div>
              <h3 className="h-2">Thank you.</h3>
              <p className="muted" style={{ marginTop: 12 }}>Your message is on its way. A partner will reply within one business day.</p>
            </div>
          ) : (
            <>
              <div className="field-row">
                <div className="field">
                  <label htmlFor="name">Your name</label>
                  <input id="name" required value={form.name} onChange={update("name")} placeholder="Jane Doe" />
                </div>
                <div className="field">
                  <label htmlFor="email">Email</label>
                  <input id="email" type="email" required value={form.email} onChange={update("email")} placeholder="jane@company.com" />
                </div>
              </div>
              <div className="field-row">
                <div className="field">
                  <label htmlFor="phone">Phone</label>
                  <input id="phone" type="tel" value={form.phone} onChange={update("phone")} placeholder="+34 000 000 000" />
                </div>
                <div className="field">
                  <label htmlFor="subject">Subject</label>
                  <input id="subject" required value={form.subject} onChange={update("subject")} placeholder="What can we help with?" />
                </div>
              </div>
              <div className="field">
                <label>Services of interest</label>
                <div className="checkbox-grid">
                  {SERVICE_INTERESTS.map((s) => {
                    const checked = form.interests.includes(s.id);
                    return (
                      <label key={s.id} className={"cbx" + (checked ? " is-checked" : "")} data-cursor="hover">
                        <input type="checkbox" checked={checked} onChange={() => toggleInterest(s.id)} />
                        <span className="box"><CheckIcon small /></span>
                        <span>{s.label}</span>
                      </label>
                    );
                  })}
                </div>
              </div>
              <div className="field">
                <label htmlFor="message">Message</label>
                <textarea id="message" rows="4" value={form.message} onChange={update("message")} placeholder="A few sentences about the project, timeline, and team."></textarea>
              </div>
              <div className="contact-submit">
                <small>By submitting, you agree to our privacy policy. We never share your data.</small>
                <button type="submit" className="btn btn--accent btn--lg" data-cursor="hover">
                  Send message <ArrowIcon />
                </button>
              </div>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

/* ─────── FOOTER ─────── */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="logo" style={{ marginBottom: 16 }}>
              <span className="logo__mark"></span>
              <span>Alcazaba</span>
            </div>
            <p className="muted" style={{ fontSize: 14, maxWidth: "36ch" }}>
              A small team of partners building software and structuring capital for ambitious companies. Based in Spain — working everywhere.
            </p>
          </div>
          <div>
            <h5>Practices</h5>
            <ul>
              <li><a href="#services" data-cursor="hover">Software</a></li>
              <li><a href="#services" data-cursor="hover">Financial advisory</a></li>
              <li><a href="#services" data-cursor="hover">Sales & marketing</a></li>
              <li><a href="#services" data-cursor="hover">E-commerce ops</a></li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="#about" data-cursor="hover">About</a></li>
              <li><a href="#industries" data-cursor="hover">Industries</a></li>
              <li><a href="#faq" data-cursor="hover">FAQ</a></li>
              <li><a href="#contact" data-cursor="hover">Contact</a></li>
            </ul>
          </div>
          <div>
            <h5>Reach us</h5>
            <ul>
              <li><a href="mailto:contact@alcazaba.me" data-cursor="hover">contact@alcazaba.me</a></li>
              <li><a href="https://www.linkedin.com/company/alcazabaspain/" target="_blank" rel="noopener noreferrer" data-cursor="hover">LinkedIn</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© {new Date().getFullYear()} Alcazaba · Spain</div>
          <div style={{ fontFamily: "var(--font-mono)" }}></div>
        </div>
      </div>
    </footer>
  );
}

/* ─────── ICONS ─────── */
function ArrowIcon() {
  return <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>;
}
function CheckIcon({ small }) {
  const s = small ? 10 : 14;
  return <svg width={s} height={s} viewBox="0 0 14 14" fill="none"><path d="M2.5 7.5l3 3 6-7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>;
}
function PlusIcon() {
  return <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 2v10M2 7h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>;
}
function GlobeIcon() {
  return <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.25" stroke="currentColor" strokeWidth="1.4"/><path d="M1.75 8h12.5M8 1.75c2 2.2 2 10.3 0 12.5M8 1.75c-2 2.2-2 10.3 0 12.5" stroke="currentColor" strokeWidth="1.4"/></svg>;
}
function SparkleIcon() {
  return <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1l1.2 3.3L10.5 5.5 7.2 6.7 6 10 4.8 6.7 1.5 5.5l3.3-1.2L6 1z" fill="currentColor"/></svg>;
}
function WhatsAppIcon() {
  return <svg viewBox="0 0 24 24"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.86 9.86 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.85 9.85 0 0 0 12.04 2zm0 18.15c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.16 8.16 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24 2.2 0 4.27.86 5.83 2.42a8.18 8.18 0 0 1 2.42 5.83c0 4.54-3.7 8.23-8.25 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.7-.81-.23-.08-.39-.12-.56.12-.16.25-.64.81-.79.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-2-1.23-.74-.66-1.24-1.47-1.39-1.72-.14-.25-.02-.39.11-.51.11-.11.25-.29.37-.43.12-.14.16-.25.24-.41.08-.16.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.41-.56-.42h-.48c-.16 0-.43.06-.66.31-.23.25-.86.84-.86 2.06 0 1.21.88 2.38 1 2.55.12.16 1.74 2.65 4.21 3.71.59.25 1.05.4 1.4.51.59.19 1.13.16 1.55.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.18-.47-.3z"/></svg>;
}
function SignalIcon() {
  return <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 0-8.94 14.46l-1.05 4.34 4.34-1.05A10 10 0 1 0 12 2zm0 18.18a8.16 8.16 0 0 1-4.16-1.13l-.3-.18-2.6.63.63-2.6-.18-.3A8.18 8.18 0 1 1 12 20.18z"/></svg>;
}

/* ─────── EXPORT ─────── */
Object.assign(window, {
  Header, LangSheet, Hero, About, Services, Industries, FAQ, Contact, Footer,
  ArrowIcon, CheckIcon, PlusIcon, GlobeIcon, SparkleIcon
});
