<?php
declare(strict_types=1);

/**
 * Orientation screen for paid ads (route: /free).
 *
 * Paid channels (Craigslist) charge per ad, so an ad cannot afford two links: a split
 * decision in the ad body costs clicks and makes the spend unattributable. The ad
 * carries ONE link to here, and the visitor picks their trade in one tap.
 *
 * Its ONE job is to route. It deliberately does NOT re-sell: the ad already did that,
 * and every extra sentence here is a chance to leave. The only argument it repeats is
 * the one the audience actually distrusts (free, and no card), because a Craigslist
 * visitor arrives assuming a catch.
 *
 * Cards are driven from Core\Verticals: adding a vertical (a registry entry with a
 * 'chooser' block) adds its card here automatically, with no edit to this file.
 *
 * ?src= is passed through to the builder so paid traffic stays attributable end to end
 * (that is the whole point of one link). Whitelisted to a short token: this value ends
 * up in a URL, so it never carries anything a visitor typed.
 *
 * Standalone (own <html>), matching demo-entry.php, so it carries zero dependency on
 * the screen-page render pipeline.
 */
if (!defined('ABSPATH')) { exit; }

$verticals = [];
foreach (\Instinctor\Core\Verticals::keys() as $k) {
    $c = \Instinctor\Core\Verticals::cfg($k, 'chooser', []);
    $r = (string) \Instinctor\Core\Verticals::cfg($k, 'route', '');
    if (!$c || $r === '' || empty($c['label'])) continue;   // vertical without a chooser stays hidden
    $verticals[] = ['label' => (string) $c['label'], 'blurb' => (string) ($c['blurb'] ?? ''), 'route' => $r];
}

// Campaign tag, passed straight through to the builder. Whitelist the shape: this is
// reflected into an href, so a visitor-supplied value never reaches the page raw.
$src = (string) ($_GET['src'] ?? '');
$src = preg_match('/^[a-z0-9_-]{1,24}$/i', $src) ? $src : '';
$q   = $src !== '' ? '?src=' . rawurlencode($src) : '';

$e = static fn($s): string => htmlspecialchars((string) $s, ENT_QUOTES, 'UTF-8');
?><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<title>Get your free website | Instinctor</title>
<style>
  *{box-sizing:border-box}
  html,body{margin:0;min-height:100%;background:#050608;color:#fff;
    font-family:Arial,Helvetica,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased}
  body{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;min-height:100vh}
  body::before{content:"";position:fixed;inset:0;
    background:radial-gradient(1100px 620px at 50% 30%,rgba(70,78,138,0.22),transparent 70%);
    pointer-events:none}
  .fe{position:relative;z-index:1;width:100%;max-width:660px;margin:auto;padding:56px 32px;text-align:center;
    opacity:0;transform:translateY(14px);animation:feRise 640ms cubic-bezier(0.4,0,0.2,1) 120ms forwards}
  @keyframes feRise{to{opacity:1;transform:translateY(0)}}
  @media(prefers-reduced-motion:reduce){.fe{animation:none;opacity:1;transform:none}}
  .fe-brand{display:inline-flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;margin:0 0 26px}
  .fe-brand-mark{width:40px;height:40px}
  .fe-brand-mark svg{width:100%;height:100%;display:block}
  .fe-brand-name{font-size:20px;font-weight:800;letter-spacing:-0.3px;color:#fff;line-height:1}
  .fe-eyebrow{font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#9aa0aa;margin:0 0 18px}
  .fe-h1{font-size:40px;line-height:1.12;font-weight:800;letter-spacing:-0.5px;margin:0 0 12px}
  .fe-sub{font-size:16px;line-height:1.6;color:#c8ccd2;margin:0 auto 34px;max-width:480px}
  .fe-sub b{color:#fff}
  .fe-pick{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#9aa0aa;margin:0 0 14px}
  .fe-cards{display:flex;flex-direction:column;gap:12px;margin:0 0 30px;text-align:left}
  .fe-card{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:14px;text-decoration:none;
    background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);color:#fff;
    transition:background .15s ease-in-out,border-color .15s ease-in-out,transform .15s ease-in-out}
  .fe-card:hover{background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.28);transform:translateY(-2px)}
  .fe-card:focus-visible{outline:2px solid #fff;outline-offset:3px}
  /* Catch-all for a trade that is not one of the listed verticals: a free site is
     still theirs, we just set it up by hand. Dashed to read as "other". */
  .fe-card.fe-else{border-style:dashed;background:rgba(255,255,255,0.03)}
  .fe-card-b{flex:1;min-width:0}
  .fe-card-l{display:block;font-size:17px;font-weight:700;margin:0 0 4px}
  .fe-card-d{display:block;font-size:13px;line-height:1.5;color:#9aa0aa}
  .fe-card-x{flex:0 0 auto;color:#9aa0aa}
  .fe-card:hover .fe-card-x{color:#fff}
  .fe-card-x svg{width:20px;height:20px;display:block}
  .fe-foot{font-size:13px;line-height:1.6;color:#7e848e;margin:0}
  .fe-foot b{color:#c8ccd2;font-weight:700}
  @media(max-width:560px){
    .fe{padding:38px 20px}
    .fe-h1{font-size:29px}
    .fe-sub{font-size:15px;margin-bottom:26px}
    .fe-eyebrow{letter-spacing:2.4px;margin-bottom:10px}
    .fe-card{padding:17px 18px;gap:12px}
  }
</style>
</head>
<body>
  <main class="fe">
    <a class="fe-brand" href="https://instinctor.com" aria-label="Instinctor">
      <span class="fe-brand-mark"><svg viewBox="0 0 10.49 10.49" fill="#fff" fill-rule="evenodd" aria-hidden="true"><path d="M3.02 0.02l2.23 0c1.44,0 2.75,0.59 3.7,1.54 0.95,0.95 1.54,2.26 1.54,3.7 0,1.44 -0.59,2.75 -1.54,3.7 -0.95,0.95 -2.26,1.54 -3.7,1.54 -1.44,0 -2.75,-0.59 -3.7,-1.54 -0.95,-0.95 -1.54,-2.26 -1.54,-3.7l0 -2.23 2.31 0 0 2.23c0,0.8 0.33,1.53 0.86,2.06 0.53,0.53 1.26,0.86 2.06,0.86 0.8,0 1.53,-0.33 2.06,-0.86 0.53,-0.53 0.86,-1.26 0.86,-2.06 0,-0.8 -0.33,-1.53 -0.86,-2.06 -0.53,-0.53 -1.26,-0.86 -2.06,-0.86l-2.23 0 0 -2.31z"/><rect x="0.02" y="0.02" width="2.31" height="2.31"/></svg></span>
      <span class="fe-brand-name">Instinctor</span>
    </a>

    <p class="fe-eyebrow">Free forever</p>
    <h1 class="fe-h1">Get your free website</h1>
    <p class="fe-sub">Type your name, watch it build itself, publish it.<br><b>No charge, no hidden fees, no credit card.</b><br>It is yours to keep and edit.</p>

    <p class="fe-pick">What do you do?</p>
    <?php // phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped -- $e() (defined above) IS the escaper: htmlspecialchars ENT_QUOTES on every interpolation below. ?>
    <div class="fe-cards">
      <?php foreach ($verticals as $v): ?>
      <a class="fe-card" href="<?php echo $e($v['route'] . $q); ?>">
        <span class="fe-card-b">
          <span class="fe-card-l"><?php echo $e($v['label']); ?></span>
          <?php if ($v['blurb'] !== ''): ?><span class="fe-card-d"><?php echo $e($v['blurb']); ?></span><?php endif; ?>
        </span>
        <span class="fe-card-x" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></span>
      </a>
      <?php endforeach; ?>
      <a class="fe-card fe-else" href="<?php echo $e('/make-a-site' . $q); ?>">
        <span class="fe-card-b">
          <span class="fe-card-l">Didn&rsquo;t find your business?</span>
          <span class="fe-card-d">You are still eligible for a free site. Tell us what you do and we will help you get set up.</span>
        </span>
        <span class="fe-card-x" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></span>
      </a>
      <?php // phpcs:enable WordPress.Security.EscapeOutput.OutputNotEscaped ?>
    </div>

    <p class="fe-foot">We never ask for a card, so we cannot charge you.<br><b>Free to look. Free to publish. Free to keep.</b></p>
  </main>
</body>
</html>
