// Eliks website kit — page sections

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero__grid"></div>
      <div className="shell hero__in">
        <h1>We design &amp; build <span className="red">web and mobile</span> products.</h1>
        <p className="hero__sub">Eliks is a product studio for companies that need software shipped — discovery, UX, engineering and launch, run by one team on one timeline.</p>
        <div className="hero__actions">
          <a className="btn btn--primary btn--lg" href="#contact">Start a project<Icon name="arrow-right" /></a>
          <a className="btn btn--outline btn--lg" href="#work">See the work</a>
        </div>
      </div>
    </section>
  );
}

const SERVICES = [
  ['monitor', 'Web platforms', 'Custom apps, dashboards, CMS and e-commerce — built on React and Node to scale with you.'],
  ['smartphone', 'Mobile apps', 'Native and cross-platform iOS & Android with React Native and Flutter.'],
  ['cpu', 'AI features', 'Practical AI — search, assistants and automation wired into products people use.'],
  ['gauge', 'Platform & DevOps', 'Cloud architecture, CI/CD and observability so releases stay boring.'],
];

function Services() {
  return (
    <section className="sec" id="services">
      <div className="shell">
        <div className="sec__head">
          <span className="eyebrow">Services</span>
          <h2>One team for the whole build.</h2>
          <p>From the first whiteboard to the App Store and beyond — no handoffs, no finger-pointing.</p>
        </div>
        <div className="svc">
          {SERVICES.map(([ic, t, d]) => (
            <div className="svc__item" key={t}>
              <div className="svc__ic"><Icon name={ic} /></div>
              <h3>{t}</h3><p>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const PROJECTS = [
  {
    name: 'Tarot Daily Cards',
    sector: 'Wellness',
    desc: 'Daily tarot, moon readings and a personal journal — with AI insights tied to your sign.',
    tag: 'Mobile',
    url: 'https://tarot-daily-cards.com/',
    icon: './assets/projects/tarot-icon.png',
    tone: 'tarot',
    mark: '✦',
  },
  {
    name: 'Pastor Online',
    sector: 'Faith',
    desc: 'Daily prayers, Bible guidance and an AI spiritual companion — always on your phone.',
    tag: 'Mobile',
    url: 'https://pastor-online.com/',
    icon: './assets/projects/pastor-icon.png',
    tone: 'pastor',
    mark: '✝',
  },
];

function Work() {
  const [filter, setFilter] = useState('All');
  const tabs = ['All', 'Web', 'Mobile'];
  const shown = PROJECTS.filter(p => filter === 'All' || p.tag === filter);
  return (
    <section className="sec sec--alt" id="work">
      <div className="shell">
        <div className="sec__head">
          <span className="eyebrow">Selected work</span>
          <h2>Products we shipped.</h2>
        </div>
        <div className="filters">
          {tabs.map(t => (
            <button key={t} className="chip" aria-pressed={filter === t} onClick={() => setFilter(t)}>{t}</button>
          ))}
        </div>
        <div className="work">
          {shown.map(({ name, sector, desc, tag, url, icon, tone, mark }) => (
            <a className="proj" key={name} href={url} target="_blank" rel="noopener noreferrer">
              <div className={`proj__img proj__img--${tone}`}>
                <span className="proj__mark" aria-hidden="true">{mark}</span>
                <img className="proj__icon" src={icon} alt="" width="64" height="64" />
                <span className="proj__tag"><span className="badge badge--brand">{tag}</span></span>
              </div>
              <div className="proj__body">
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--fg-subtle)' }}>{sector}</div>
                <h3 style={{ marginTop: 6 }}>{name}</h3>
                <p>{desc}</p>
                <div className="proj__arrow">Visit site<Icon name="arrow-right" /></div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

const STEPS = [
  ['01', 'Discover', 'We map the problem, users and scope in a focused kickoff. You leave with a plan and a fixed estimate.'],
  ['02', 'Design', 'Flows, wireframes and a clickable prototype — validated before a line of production code.'],
  ['03', 'Build', 'Two-week sprints, demos every Friday, code you can see in a staging build at all times.'],
  ['04', 'Launch & grow', 'Store submission, monitoring and a roadmap for what ships next.'],
];

function Process() {
  return (
    <section className="sec sec--dark" id="process">
      <div className="shell">
        <div className="sec__head">
          <span className="eyebrow">How we work</span>
          <h2 style={{ color: '#fff' }}>A process you can actually see.</h2>
        </div>
        <div className="steps">
          {STEPS.map(([num, t, d]) => (
            <div className="step" key={num}>
              <div className="num">{num}</div><h3>{t}</h3><p>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const CONTACT_DETAILS = [
  ['mail', 'Email', 'hello@eliks.com', 'mailto:hello@eliks.com'],
  ['map-pin', 'Location', 'Valencia, Spain · Remote worldwide'],
  ['clock', 'Response time', 'Within 1 business day'],
];

function CTA() {
  return (
    <section className="sec sec--alt" id="contact">
      <div className="shell">
        <div className="sec__head">
          <span className="eyebrow">Contact</span>
          <h2>Let's talk about your project.</h2>
          <p>Have something to build? Reach out — we typically respond within one business day.</p>
        </div>
        <div className="contact__details">
          {CONTACT_DETAILS.map(([icon, label, value, href]) => (
            <div className="contact__row" key={label}>
              <div className="contact__ic"><Icon name={icon} /></div>
              <div>
                <div className="contact__label">{label}</div>
                {href
                  ? <a className="contact__val" href={href}>{value}</a>
                  : <div className="contact__val">{value}</div>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Services, Work, Process, CTA });