<?
$tablet_browser = 0;
$mobile_browser = 0;

$body_class = 'desktop';
$es_tablet = '';
$es_movil = '';

$user_agent  = isset($_SERVER['HTTP_USER_AGENT']) ? strtolower($_SERVER['HTTP_USER_AGENT']) : '';
$http_accept = isset($_SERVER['HTTP_ACCEPT']) ? strtolower($_SERVER['HTTP_ACCEPT']) : '';

if (preg_match('/(tablet|ipad|playbook)|(android(?!.*(mobi|opera mini)))/i', $user_agent)) {
    $tablet_browser++;
    $body_class = "tablet";
}

if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android|iemobile)/i', $user_agent)) {
    $mobile_browser++;
    $body_class = "mobile";
}

if ((strpos($http_accept, 'application/vnd.wap.xhtml+xml') !== false) || isset($_SERVER['HTTP_X_WAP_PROFILE']) || isset($_SERVER['HTTP_PROFILE'])) {
    $mobile_browser++;
    $body_class = "mobile";
}

$mobile_ua = strtolower(substr($user_agent, 0, 4));

$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda ','xda-'
);

if (in_array($mobile_ua, $mobile_agents)) {
    $mobile_browser++;
}

if (strpos($user_agent, 'opera mini') !== false) {
    $mobile_browser++;
    $stock_ua = strtolower(
        isset($_SERVER['HTTP_X_OPERAMINI_PHONE_UA'])
            ? $_SERVER['HTTP_X_OPERAMINI_PHONE_UA']
            : (isset($_SERVER['HTTP_DEVICE_STOCK_UA']) ? $_SERVER['HTTP_DEVICE_STOCK_UA'] : '')
    );

    if (preg_match('/(tablet|ipad|playbook)|(android(?!.*mobile))/i', $stock_ua)) {
        $tablet_browser++;
    }
}

if ($tablet_browser > 0) {
    $es_tablet = 'si';
} else if ($mobile_browser > 0) {
    $es_movil = 'si';
}
?>

<style type="text/css">
.bloque-eleccion-foto *{
    box-sizing:border-box;
}
.bloque-eleccion-foto{
    max-width:1100px;
    margin:20px auto;
    font-family:Arial, Helvetica, sans-serif;
    color:#1f2937;
}
.bloque-eleccion-foto .seccion{
    margin-bottom:28px;
}
.bloque-eleccion-foto .badge-tipo{
    display:inline-block;
    padding:8px 12px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    border:1px solid #bfdbfe;
    font-size:13px;
    font-weight:700;
    margin-bottom:12px;
}
.bloque-eleccion-foto .titulo{
    margin:0 0 8px 0;
    font-size:28px;
    font-weight:700;
    color:#111827;
}
.bloque-eleccion-foto .subtitulo{
    margin:0 0 18px 0;
    font-size:14px;
    color:#6b7280;
    line-height:1.5;
}
.bloque-eleccion-foto .cards{
    display:grid;
    grid-template-columns:repeat(2,minmax(240px,1fr));
    gap:18px;
}
.bloque-eleccion-foto .card-link{
    display:block;
    text-decoration:none;
    color:#111827;
    background:#fff;
    border:1px solid #dbe4f0;
    border-radius:16px;
    padding:18px;
    box-shadow:0 4px 18px rgba(15,23,42,.04);
    transition:.2s ease;
}
.bloque-eleccion-foto .card-link:hover{
    transform:translateY(-2px);
    border-color:#0d6efd;
    box-shadow:0 10px 24px rgba(13,110,253,.10);
}
.bloque-eleccion-foto .shape-box{
    width:100%;
    min-height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#f8fbff,#eef4fb);
    border:1px dashed #c7d7ee;
    border-radius:14px;
    margin-bottom:14px;
}
.bloque-eleccion-foto .shape-square{
    width:120px;
    height:120px;
    border-radius:16px;
    background:linear-gradient(135deg,#0d6efd,#5aa2ff);
    box-shadow:inset 0 0 0 4px rgba(255,255,255,.25);
}
.bloque-eleccion-foto .shape-rect{
    width:170px;
    height:96px;
    border-radius:16px;
    background:linear-gradient(135deg,#198754,#4fd18a);
    box-shadow:inset 0 0 0 4px rgba(255,255,255,.25);
}
.bloque-eleccion-foto .card-title{
    margin:0 0 6px 0;
    font-size:22px;
    font-weight:700;
}
.bloque-eleccion-foto .card-text{
    margin:0;
    font-size:14px;
    line-height:1.45;
    color:#6b7280;
}
.bloque-eleccion-foto .form-card{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:20px;
}
.bloque-eleccion-foto .form-grid{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:12px;
    align-items:end;
}
.bloque-eleccion-foto label{
    display:block;
    margin-bottom:7px;
    font-size:13px;
    font-weight:700;
    color:#374151;
}
.bloque-eleccion-foto input[type="number"]{
    width:100%;
    height:46px;
    border:1px solid #cfd8e3;
    border-radius:10px;
    padding:0 14px;
    font-size:15px;
    background:#fff;
    outline:none;
}
.bloque-eleccion-foto input[type="number"]:focus{
    border-color:#0d6efd;
    box-shadow:0 0 0 3px rgba(13,110,253,.12);
}
.bloque-eleccion-foto .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:46px;
    padding:0 18px;
    border:none;
    border-radius:10px;
    background:#0d6efd;
    color:#fff;
    font-weight:700;
    cursor:pointer;
    text-decoration:none;
    font-size:14px;
}
.bloque-eleccion-foto .btn:hover{
    background:#0b5ed7;
}
.bloque-eleccion-foto .devices{
    display:grid;
    grid-template-columns:repeat(2,minmax(220px,260px));
    gap:24px;
    justify-content:start;
}
.bloque-eleccion-foto .device-card{
    display:block;
    text-decoration:none;
    color:#111827;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:18px;
    text-align:center;
    box-shadow:0 4px 18px rgba(15,23,42,.04);
    transition:.2s ease;
}
.bloque-eleccion-foto .device-card:hover{
    transform:translateY(-2px);
    border-color:#0d6efd;
    box-shadow:0 10px 24px rgba(13,110,253,.10);
}
.bloque-eleccion-foto .device{
    width:120px;
    height:218px;
    margin:0 auto 14px;
    border-radius:28px;
    background:#111827;
    position:relative;
    box-shadow:inset 0 0 0 3px #0b1220;
}
.bloque-eleccion-foto .device:before{
    content:"";
    position:absolute;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    width:36px;
    height:5px;
    border-radius:999px;
    background:#d1d5db;
}
.bloque-eleccion-foto .device:after{
    content:"";
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    width:18px;
    height:18px;
    border-radius:50%;
    background:#d1d5db;
}
.bloque-eleccion-foto .screen{
    position:absolute;
    top:24px;
    left:10px;
    right:10px;
    bottom:28px;
    border-radius:14px;
    background:linear-gradient(180deg,#ffffff,#f3f6fb);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    text-align:center;
    font-weight:700;
    color:#111827;
    line-height:1.15;
    font-size:15px;
}
.bloque-eleccion-foto .device-title{
    margin:0 0 6px 0;
    font-size:16px;
    font-weight:700;
    color:#111827;
}
.bloque-eleccion-foto .device-text{
    margin:0;
    font-size:13px;
    color:#6b7280;
    line-height:1.4;
}
.bloque-eleccion-foto .divider{
    border:0;
    border-top:1px solid #e5e7eb;
    margin:28px 0;
}
@media (max-width:768px){
    .bloque-eleccion-foto .cards,
    .bloque-eleccion-foto .devices,
    .bloque-eleccion-foto .form-grid{
        grid-template-columns:1fr;
    }
    .bloque-eleccion-foto .titulo{
        font-size:24px;
    }
}
</style>

<div class="bloque-eleccion-foto">

<? if ($es_movil == 'si' ) { ?>

    <div class="seccion">
        <span class="badge-tipo">Recomendado para celu</span>
        <h2 class="titulo">Sin recortar</h2>
        <p class="subtitulo">
            Desde el móvil o tableta se recomienda subir la imagen sin recorte manual.
        </p>

        <div class="devices">
            <a class="device-card" href="panel/upload_foto_movil_home.php?ID=<?php echo $ID ?>&amp;alto=370&amp;ancho=370">
                <div class="device">
                    <div class="screen">FOTO DEL HOME</div>
                </div>
                <h3 class="device-title">Foto del home</h3>
                <p class="device-text">Carga rápida y recomendada para publicar desde celular.</p>
            </a>
        </div>
    </div>

<? } else { ?>

    <div class="seccion">
        <span class="badge-tipo">Recomendado para PC</span>
        <h2 class="titulo">Recortando</h2>
        <p class="subtitulo">
            Una vez subida la imagen, vas a poder recortar exactamente el área que quieras usar.
        </p>

        <div class="cards">
            <a class="card-link" href="subir_foto_principal.php?ID=<?php echo $ID ?>&alto=860&ancho=860">
                <div class="shape-box">
                    <div class="shape-square"></div>
                </div>
                <h3 class="card-title">Cuadrada</h3>
                <p class="card-text">Formato 1:1 ideal para piezas cuadradas o recortes simétricos.</p>
            </a>

            <a class="card-link" href="subir_foto_principal.php?ID=<?php echo $ID ?>&alto=460&ancho=860">
                <div class="shape-box">
                    <div class="shape-rect"></div>
                </div>
                <h3 class="card-title">Rectángulo normal</h3>
                <p class="card-text">Formato horizontal recomendado para cabeceras o imagen principal.</p>
            </a>
        </div>
    </div>

    <div class="seccion">
        <h2 class="titulo">Tamaño personalizado</h2>
        <p class="subtitulo">
            Podés indicar una medida manual. Máximo recomendado: 1000 x 1000 px.
        </p>

        <div class="form-card">
            <form action="subir_foto_principal.php?ID=<?php echo $ID ?>" method="get">
                <input type="hidden" value="<?php echo $ID ?>" name="ID">

                <div class="form-grid">
                    <div>
                        <label for="alto">Alto</label>
                        <input type="number" name="alto" id="alto" value="500">
                    </div>

                    <div>
                        <label for="ancho">Ancho</label>
                        <input type="number" name="ancho" id="ancho" value="500">
                    </div>

                    <div>
                        <label>&nbsp;</label>
                        <input type="submit" value="Continuar" class="btn">
                    </div>
                </div>
            </form>
        </div>
    </div>

    <hr class="divider" />

    <div class="seccion">
        <span class="badge-tipo">Recomendado para celu</span>
        <h2 class="titulo">Sin recortar</h2>
        <p class="subtitulo">
            Desde el celular o tablet conviene usar la carga rápida sin recorte manual.
        </p>

        <div class="devices">
            <a class="device-card" href="panel/upload_foto_movil_home.php?ID=<?php echo $ID ?>&amp;alto=370&amp;ancho=370">
                <div class="device">
                    <div class="screen">FOTO DEL HOME</div>
                </div>
                <h3 class="device-title">Foto del home</h3>
                <p class="device-text">Ideal para subir la imagen destacada rápidamente desde el celu.</p>
            </a>

            <a class="device-card" href="panel/upload_foto_movil_nota.php?ID=<?php echo $ID ?>&amp;alto=370&amp;ancho=370">
                <div class="device">
                    <div class="screen">FOTO DENTRO DE LA NOTA</div>
                </div>
                <h3 class="device-title">Foto dentro de la nota</h3>
                <p class="device-text">Pensado para carga rápida de imágenes internas desde celular.</p>
            </a>
        </div>
    </div>

<? } ?>

</div>