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

// Inline lucide-style icons (so we don't depend on a UMD that may be broken)
const Icon = ({ size = 16, stroke = 2, children, style }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={size} height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={stroke}
    strokeLinecap="round"
    strokeLinejoin="round"
    style={style}
    aria-hidden="true"
  >{children}</svg>
);
const ArrowRight = (p) => <Icon {...p}><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></Icon>;
const Clock = (p) => <Icon {...p}><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></Icon>;
const Menu = (p) => <Icon {...p}><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></Icon>;
const X = (p) => <Icon {...p}><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></Icon>;

// Live clock for navbar — London time HH:MM
function useLondonTime() {
  const [t, setT] = useState(() => fmt(new Date()));
  useEffect(() => {
    const id = setInterval(() => setT(fmt(new Date())), 1000);
    return () => clearInterval(id);
  }, []);
  return t;
}
function fmt(d) {
  try {
    return new Intl.DateTimeFormat('en-GB', {
      hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'Europe/London',
    }).format(d);
  } catch { return '00:00'; }
}

// ───────────── HERO ─────────────
const HEADLINE_VARIANTS = {
  bold: ['We build software, mobile apps', 'and AI automations for teams', 'ready to move faster.'],
  expert: ['Engineering software, mobile', 'apps and AI workflows for', 'businesses that ship.'],
  playful: ['Code, apps and automations', 'for the teams who keep the', 'internet running.'],
};

function Hero({ accent, headlineKey, shaderIntensity, mobileOpen, setMobileOpen }) {
  const shaderHost = useRef(null);
  const shaderApi = useRef(null);
  const time = useLondonTime();
  const lines = HEADLINE_VARIANTS[headlineKey] || HEADLINE_VARIANTS.bold;

  useEffect(() => {
    if (!shaderHost.current) return;
    shaderApi.current = window.mountShader(shaderHost.current, {
      baseA: '#ffffff', baseB: '#f0f0f0', accent, grain: 0.05, intensity: shaderIntensity,
    });
    return () => shaderApi.current?.destroy();
  }, []); // mount once
  useEffect(() => { shaderApi.current?.setAccent(accent); }, [accent]);
  useEffect(() => { shaderApi.current?.setIntensity(shaderIntensity); }, [shaderIntensity]);

  return (
    <section data-screen-label="01 Hero" className="relative w-full min-h-screen bg-[#EFEFEF] overflow-hidden flex flex-col">
      {/* Shader background */}
      <div ref={shaderHost} className="absolute inset-0 z-10 pointer-events-none" aria-hidden="true"></div>

      {/* Navbar */}
      <div className="relative z-20 w-full max-w-[1440px] mx-auto p-2 sm:p-3">
        <nav className="bg-white rounded-full flex items-center justify-between" style={{ padding: 5 }}>
          {/* left */}
          <div className="flex items-center gap-3 sm:gap-5">
            <div className="w-9 h-9 sm:w-10 sm:h-10 bg-gray-900 rounded-full flex items-center justify-center">
              <span className="text-white font-bold tracking-tight" style={{ fontSize: 11, lineHeight: 1 }}>EF</span>
            </div>
            <div className="hidden md:flex items-center gap-6">
              {['Services', 'Work', 'Studio', 'Journal', 'Contact'].map(l => (
                <a key={l} href="#" className="text-gray-900 hover:text-gray-500 transition-colors duration-300" style={{ fontSize: 14 }}>{l}</a>
              ))}
            </div>
          </div>

          {/* right */}
          <div className="hidden md:flex items-center gap-3 lg:gap-5 pr-1">
            <span className="hidden lg:inline text-gray-600" style={{ fontSize: 13 }}>Taking on projects for Q1 2026</span>
            <div className="flex items-center gap-1.5 text-gray-600" style={{ fontSize: 13 }}>
              <Clock size={14} />
              <span>{time} in London</span>
            </div>
            <CTAButton dark>Book a strategy call</CTAButton>
          </div>

          {/* mobile toggle */}
          <button
            onClick={() => setMobileOpen(true)}
            className="md:hidden bg-gray-900 text-white rounded-full w-10 h-10 flex items-center justify-center"
            aria-label="Open menu"
          >
            <Menu size={18} />
          </button>
        </nav>
      </div>

      {/* spacer */}
      <div className="flex-1"></div>

      {/* Hero content */}
      <div className="relative z-20 w-full max-w-[1440px] mx-auto px-5 sm:px-8 lg:px-12 pb-14 sm:pb-16 lg:pb-20">
        <div className="text-gray-900 tracking-wide mb-5 sm:mb-8" style={{ fontSize: 13 }}>
          Encode Fox Tech
        </div>
        <h1
          className="font-medium text-gray-900"
          style={{
            fontSize: 'clamp(1.75rem, 7vw, 4.2rem)',
            lineHeight: 1.08,
            letterSpacing: '-0.03em',
          }}
        >
          <span className="hero-headline">
            {lines.map((line, i) => (
              <React.Fragment key={i}>
                {line}
                {i < lines.length - 1 && (<>
                  <br className="hidden sm:block" />
                  <span className="sm:hidden"> </span>
                </>)}
              </React.Fragment>
            ))}
          </span>
        </h1>

        {/* CTAs */}
        <div className="mt-8 sm:mt-12 flex flex-col sm:flex-row gap-4 sm:gap-5 items-start sm:items-center">
          <CTAButton accent={accent}>Start a project</CTAButton>
          <PartnerBadge accent={accent} />
        </div>
      </div>

      <MobileMenu open={mobileOpen} onClose={() => setMobileOpen(false)} time={time} accent={accent} />
    </section>
  );
}

// ───────────── CTA button with text-roll hover ─────────────
function CTAButton({ children, dark = false, accent = '#F26522' }) {
  const bg = dark ? '#111827' : accent;
  const arrowColor = dark ? '#111827' : accent;
  return (
    <button
      className="ef-cta"
      data-dark={dark ? 'true' : 'false'}
      style={{
        ['--bg']: bg,
        ['--bg-hover']: dark ? '#000000' : darken(bg, 0.08),
      }}
    >
      <span className="ef-cta-text">
        <span>{children}</span>
        <span>{children}</span>
      </span>
      <span className="ef-cta-arrow" style={{ width: dark ? 24 : 28, height: dark ? 24 : 28 }}>
        <ArrowRight size={dark ? 12 : 14} style={{ color: arrowColor }} />
      </span>
    </button>
  );
}

function darken(hex, amt) {
  hex = hex.replace('#','');
  if (hex.length === 3) hex = hex.split('').map(c=>c+c).join('');
  const n = parseInt(hex, 16);
  let r = Math.max(0, ((n>>16)&255) - Math.round(255*amt));
  let g = Math.max(0, ((n>>8)&255) - Math.round(255*amt));
  let b = Math.max(0, (n&255) - Math.round(255*amt));
  return '#' + [r,g,b].map(v=>v.toString(16).padStart(2,'0')).join('');
}

// Partner badge with starburst SVG
function PartnerBadge({ accent }) {
  return (
    <div
      className="bg-white rounded flex items-center gap-2.5 px-3 py-2 transition-shadow duration-300"
      style={{
        borderRadius: 4,
        boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
      }}
      onMouseEnter={e => e.currentTarget.style.boxShadow = '0 4px 16px rgba(0,0,0,0.12)'}
      onMouseLeave={e => e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.08)'}
    >
      <svg viewBox="0 0 100 100" className="w-5 h-5 sm:w-6 sm:h-6" style={{ fill: accent }} aria-hidden="true">
        <path d="m19.6 66.5 19.7-11 .3-1-.3-.5h-1l-3.3-.2-11.2-.3L14 53l-9.5-.5-2.4-.5L0 49l.2-1.5 2-1.3 2.9.2 6.3.5 9.5.6 6.9.4L38 49.1h1.6l.2-.7-.5-.4-.4-.4L29 41l-10.6-7-5.6-4.1-3-2-1.5-2-.6-4.2 2.7-3 3.7.3.9.2 3.7 2.9 8 6.1L37 36l1.5 1.2.6-.4.1-.3-.7-1.1L33 25l-6-10.4-2.7-4.3-.7-2.6c-.3-1-.4-2-.4-3l3-4.2L28 0l4.2.6L33.8 2l2.6 6 4.1 9.3L47 29.9l2 3.8 1 3.4.3 1h.7v-.5l.5-7.2 1-8.7 1-11.2.3-3.2 1.6-3.8 3-2L61 2.6l2 2.9-.3 1.8-1.1 7.7L59 27.1l-1.5 8.2h.9l1-1.1 4.1-5.4 6.9-8.6 3-3.5L77 13l2.3-1.8h4.3l3.1 4.7-1.4 4.9-4.4 5.6-3.7 4.7-5.3 7.1-3.2 5.7.3.4h.7l12-2.6 6.4-1.1 7.6-1.3 3.5 1.6.4 1.6-1.4 3.4-8.2 2-9.6 2-14.3 3.3-.2.1.2.3 6.4.6 2.8.2h6.8l12.6 1 3.3 2 1.9 2.7-.3 2-5.1 2.6-6.8-1.6-16-3.8-5.4-1.3h-.8v.4l4.6 4.5 8.3 7.5L89 80.1l.5 2.4-1.3 2-1.4-.2-9.2-7-3.6-3-8-6.8h-.5v.7l1.8 2.7 9.8 14.7.5 4.5-.7 1.4-2.6 1-2.7-.6-5.8-8-6-9-4.7-8.2-.5.4-2.9 30.2-1.3 1.5-3 1.2-2.5-2-1.4-3 1.4-6.2 1.6-8 1.3-6.4 1.2-7.9.7-2.6v-.2H49L43 72l-9 12.3-7.2 7.6-1.7.7-3-1.5.3-2.8L24 86l10-12.8 6-7.9 4-4.6-.1-.5h-.3L17.2 77.4l-4.7.6-2-2 .2-3 1-1 8-5.5Z" />
      </svg>
      <span className="text-gray-900 font-medium" style={{ fontSize: 13 }}>AWS &amp; GCP Certified Partner</span>
      <span className="bg-gray-900 text-white rounded px-1.5 sm:px-2 py-0.5" style={{ fontSize: 10 }}>Featured</span>
    </div>
  );
}

// Mobile menu sheet
function MobileMenu({ open, onClose, time, accent }) {
  return (
    <div
      className={`fixed inset-0 z-50 ${open ? 'pointer-events-auto' : 'pointer-events-none'}`}
      aria-hidden={!open}
    >
      <div
        className="absolute inset-0 bg-black/60 transition-opacity duration-500"
        style={{ opacity: open ? 1 : 0 }}
        onClick={onClose}
      ></div>
      <div
        className="absolute left-0 right-0 bottom-0 bg-white rounded-2xl mx-3 mb-3 p-6"
        style={{
          transform: open ? 'translateY(0)' : 'translateY(100%)',
          transition: 'transform 500ms cubic-bezier(0.32,0.72,0,1)',
        }}
      >
        <div className="flex justify-between items-center mb-8">
          <div className="flex items-center gap-1.5 text-gray-600 border border-gray-200 rounded-full px-3 py-1.5" style={{ fontSize: 12 }}>
            <Clock size={12} />
            <span>{time} London</span>
          </div>
          <button onClick={onClose} className="bg-gray-900 text-white rounded-full w-10 h-10 flex items-center justify-center">
            <X size={18} />
          </button>
        </div>
        <nav className="flex flex-col gap-3 mb-8">
          {['Services', 'Work', 'Studio', 'Journal', 'Contact'].map(l => (
            <a key={l} href="#" className="text-gray-900 font-medium" style={{ fontSize: 28, lineHeight: '32px' }}>{l}</a>
          ))}
        </nav>
        <div>
          <CTAButton accent={accent}>Start a project</CTAButton>
        </div>
      </div>
    </div>
  );
}

// ───────────── ABOUT ─────────────
function About({ accent }) {
  const SMALL = 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090123_74be96d4-9c1b-40cf-932a-96f4f4babed3.png&w=1280&q=85';
  const LARGE = 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090133_c157d30b-a99a-4477-bec1-a446149ec3f2.png&w=1280&q=85';

  return (
    <section data-screen-label="02 About" className="bg-white pt-16 sm:pt-20 lg:pt-32 pb-12 sm:pb-16 lg:pb-24 overflow-hidden">
      <div className="max-w-[1440px] mx-auto">
        {/* Badge */}
        <div className="px-5 sm:px-8 lg:px-12 flex items-center gap-3 mb-6 sm:mb-8">
          <div className="w-6 h-6 sm:w-7 sm:h-7 rounded-full bg-gray-900 text-white flex items-center justify-center font-semibold" style={{ fontSize: 11 }}>1</div>
          <div className="border border-gray-200 rounded-full font-medium px-3 sm:px-4 py-1 sm:py-1.5" style={{ fontSize: 12 }}>Introducing Encode Fox Tech</div>
        </div>

        {/* Heading */}
        <h2
          className="px-5 sm:px-8 lg:px-12 font-medium text-gray-900 mb-12 sm:mb-16 lg:mb-28"
          style={{
            fontSize: 'clamp(1.5rem, 4vw, 3.2rem)',
            lineHeight: 1.12,
            letterSpacing: '-0.02em',
          }}
        >
          Strategy-led engineering, delivering<br />
          results across software, mobile and AI.
        </h2>

        {/* Mobile/tablet stacked */}
        <div className="lg:hidden px-5 sm:px-8 lg:px-12">
          <p className="font-medium text-gray-900 mb-6" style={{ fontSize: 15, lineHeight: 1.6 }}>
            Through research, engineering and iteration we help growing teams realize their digital potential — from custom software and mobile apps to AI automations that quietly run the business.
          </p>
          <div className="mb-10">
            <CTAButton accent={accent}>About our studio</CTAButton>
          </div>
          <div className="flex flex-col sm:flex-row gap-4 sm:gap-5">
            <div className="sm:w-[45%]" style={{ aspectRatio: '438 / 346' }}>
              <img src={SMALL} alt="" className="w-full h-full rounded-xl sm:rounded-2xl object-cover" />
            </div>
            <div className="sm:w-[55%]" style={{ aspectRatio: '900 / 600' }}>
              <img src={LARGE} alt="" className="w-full h-full rounded-xl sm:rounded-2xl object-cover" />
            </div>
          </div>
        </div>

        {/* Desktop grid */}
        <div className="hidden lg:grid grid-cols-[26%_1fr_48%] items-end gap-6 xl:gap-8 px-5 sm:px-8 lg:px-12">
          <div className="self-end" style={{ aspectRatio: '438 / 346' }}>
            <img src={SMALL} alt="" className="w-full h-full rounded-2xl object-cover" />
          </div>
          <div className="self-start flex flex-col justify-end items-end text-right">
            <p className="font-medium text-gray-900 mb-6" style={{ fontSize: 16, lineHeight: 1.65, whiteSpace: 'nowrap' }}>
              Software, mobile apps and AI automations,<br />
              built with research, engineering and iteration<br />
              for teams ready to ship faster.
            </p>
            <CTAButton accent={accent}>About our studio</CTAButton>
          </div>
          <div className="self-end" style={{ aspectRatio: '3 / 2' }}>
            <img src={LARGE} alt="" className="w-full h-full rounded-2xl object-cover" />
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────────── CASE STUDIES ─────────────
const CASES = [
  {
    title: 'Helios AI',
    description: 'Cut a fintech support team\'s response time by 80% with an AI triage workflow integrated into Zendesk and Slack.',
    video: 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260516_122702_390f5305-8719-41d5-ae80-d23ab3796c28.mp4',
    aspect: '329 / 246',
    bg: '#1a1d2e',
    button: { variant: 'white', label: 'Learn more', width: 148, icon: 'link' },
  },
  {
    title: 'Vault Mobile',
    description: 'Rebuilt a banking mobile app from the ground up — shipped to iOS &amp; Android, hit a 4.9 store rating in six weeks.',
    video: 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260516_123323_f909c2b8-ff6c-4edf-882b-8ebcdbe389b5.mp4',
    aspect: '1 / 1',
    bg: '#6b6b6b',
    button: { variant: 'dark', label: 'View case study', width: 168, icon: 'arrow' },
  },
];

function Cases() {
  return (
    <section data-screen-label="03 Case studies" className="bg-[#F5F5F5] pt-16 sm:pt-20 lg:pt-28 pb-16 sm:pb-20 lg:pb-28">
      <div className="max-w-[1440px] mx-auto">
        {/* Badge */}
        <div className="px-5 sm:px-8 lg:px-12 flex items-center gap-3 mb-6 sm:mb-8">
          <div className="w-6 h-6 sm:w-7 sm:h-7 rounded-full bg-gray-900 text-white flex items-center justify-center font-semibold" style={{ fontSize: 11 }}>2</div>
          <div className="border border-gray-300 rounded-full font-medium px-3 sm:px-4 py-1 sm:py-1.5" style={{ fontSize: 12 }}>Featured client work</div>
        </div>

        {/* Heading */}
        <h2
          className="px-5 sm:px-8 lg:px-12 font-medium text-gray-900 mb-10 sm:mb-14 lg:mb-16"
          style={{
            fontSize: 'clamp(1.75rem, 7vw, 4.2rem)',
            lineHeight: 1.08,
            letterSpacing: '-0.03em',
          }}
        >
          Our projects
        </h2>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-5 sm:gap-6 lg:gap-7 px-5 sm:px-8 lg:px-12">
          {CASES.map((c, i) => <CaseCard key={c.title} {...c} />)}
        </div>
      </div>
    </section>
  );
}

function CaseCard({ title, description, video, aspect, bg, button }) {
  return (
    <div className="ef-case cursor-pointer">
      <div
        className="relative rounded-2xl overflow-hidden"
        style={{ aspectRatio: aspect, background: bg }}
      >
        <video
          src={video}
          autoPlay muted loop playsInline
          className="w-full h-full object-cover"
        ></video>
        <HoverButton {...button} />
      </div>
      <p className="text-gray-600 mt-4 leading-relaxed" style={{ fontSize: 13 }} dangerouslySetInnerHTML={{ __html: description }}></p>
      <h3 className="text-gray-900 font-semibold mt-1" style={{ fontSize: 14 }}>{title}</h3>
    </div>
  );
}

function HoverButton({ variant, label, width, icon }) {
  const isDark = variant === 'dark';
  return (
    <div
      className="ef-hover-btn"
      data-dark={isDark ? 'true' : 'false'}
      style={{ ['--expand-w']: width + 'px' }}
    >
      <span className="ef-hover-label">{label}</span>
      <span className="ef-hover-icon">
        {icon === 'link' ? <LinkIcon /> : <ArrowRight size={14} />}
      </span>
    </div>
  );
}

function LinkIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
    </svg>
  );
}

// ───────────── APP ─────────────
const TWEAKS = /*EDITMODE-BEGIN*/{
  "accent": "#F26522",
  "headline": "bold",
  "shaderIntensity": 1
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweaks] = useTweaks(TWEAKS);
  const [mobileOpen, setMobileOpen] = useState(false);
  return (
    <div className="font-sans antialiased text-gray-900">
      <Hero
        accent={tweaks.accent}
        headlineKey={tweaks.headline}
        shaderIntensity={tweaks.shaderIntensity}
        mobileOpen={mobileOpen}
        setMobileOpen={setMobileOpen}
      />
      <About accent={tweaks.accent} />
      <Cases />
      {/* Footer strip */}
      <footer className="bg-[#F5F5F5] border-t border-gray-200">
        <div className="max-w-[1440px] mx-auto px-5 sm:px-8 lg:px-12 py-10 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 bg-gray-900 rounded-full flex items-center justify-center">
              <span className="text-white font-bold" style={{ fontSize: 11 }}>EF</span>
            </div>
            <span className="text-gray-900 font-medium" style={{ fontSize: 14 }}>Encode Fox Tech</span>
          </div>
          <span className="text-gray-500" style={{ fontSize: 12 }}>© 2026 Encode Fox Tech. Engineering by humans, shipped by humans.</span>
        </div>
      </footer>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent">
          <TweakColor
            label="Accent color"
            value={tweaks.accent}
            options={['#F26522', '#2A6FDB', '#1F8A5B', '#7C3AED', '#111827']}
            onChange={v => setTweaks('accent', v)}
          />
        </TweakSection>
        <TweakSection label="Headline">
          <TweakSelect
            label="Tone"
            value={tweaks.headline}
            options={[
              { value: 'bold', label: 'Bold / dominant' },
              { value: 'expert', label: 'Calm / expert' },
              { value: 'playful', label: 'Playful / modern' },
            ]}
            onChange={v => setTweaks('headline', v)}
          />
        </TweakSection>
        <TweakSection label="Shader">
          <TweakSlider
            label="Intensity"
            value={tweaks.shaderIntensity}
            min={0} max={2} step={0.05}
            onChange={v => setTweaks('shaderIntensity', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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